Wijmo FlexGrid Filters showing only few items in the flexgrid filter

Posted by: rambabu on 6 October 2017, 1:05 am EST

    • Post Options:
    • Link

    Posted 6 October 2017, 1:05 am EST

    Hello Wijmo Team,

    I need a requirement in Wijmo Flexgrid filter to show all the values in wijmo filter,currently it shows upto some fixed number of values in the flexgrid filter.

    Can you please provide any solution to show all the filter values in the filter.

    Please find the attached screenshots for more details.

    Thank You

  • Posted 8 October 2017, 6:57 pm EST

    Hi, Rambabu,

    As the default, FlexGridFilter shows 250 default unique values in valueFilter. But, you can change it to the desired number to fetch different unique values by setting maxValues property for valueFilter.

    
    // change the maxItems property for the 'id' column:
    var f = new wijmo.grid.filter.FlexGridFilter(s);
    f.getColumnFilter('id').valueFilter.maxValues = 1000000;
    
    

    ~Manish Kumar Gupta

  • Posted 8 October 2017, 9:27 pm EST

    Thank You Manish Kumar Gupta,

    The solution works fine

    Thanks & Regards

  • Posted 6 June 2018, 5:20 pm EST

    Hello Wijmo Team,

    I’m able set the maxValues, but the grid filter still shows only 250.

    May I know what could be the problem?

    Code -

    
    this._wijmo_grid = new wjcCore.CollectionView(dataArray);
    this._wijmo_grid.pageSize = 10;
    var filter = new wjcGridFilter.FlexGridFilter(grid);
    filter.getColumnFilter('label').valueFilter.maxValues = 3000;
    
    

    HTML -

    
    <wj-flex-grid #grid [itemsSource]="_wijmo_grid">
      ....
    </wj-flex-grid>
    
    
  • Posted 7 June 2018, 12:34 am EST

    Hi,

    We are sorry, we are unable to replicate the issue at our end.

    Please refer to the following sample and modify depicting your issue:

    http://jsfiddle.net/y3ehyzbs/20/

    ~Manish

  • Posted 7 June 2018, 4:33 am EST

    Hello Manish,

    I checked the jsfiddle. My implementation is in Angular5 and I use wjcCore.

    Attaching the code below -

    http://jsfiddle.net/y3ehyzbs/29/ //Didn’t work for me, but updated the code

    
    @ViewChild('Grid') _grid: WjFlexGrid;
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    var data = [];
    for (var i = 0; i < 1000; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
    this.cvData = new wjcCore.CollectionView(data);
    cvData.pageSize = 10;
    var filter = new wjcGridFilter.FlexGridFilter(this._grid); //Referred in ViewChild
    filter.getColumnFilter('country').valueFilter.maxValues = 2;
    
    
    
    <div class="container">
        <div style="height:300px;">
            <wj-collection-view-pager [cv]="cvData"></wj-collection-view-pager>
            <wj-flex-grid #Grid
                          [itemsSource]="cvData"
                          [allowAddNew]="false"
                          [isReadOnly]="true">
                <wj-flex-grid-column [header]="'Country'"
                                     [binding]="'country'"
                                     [width]="'1.3*'">
                    <ng-template wjFlexGridCellTemplate
                                 [cellType]="'Cell'"
                                 let-cell="cell">
                        <a href="javascript:void(0)"
                           (click)="inputChanged(cell.item.country)">{{cell.item.country}}</a>
                    </ng-template>
                </wj-flex-grid-column>
                <wj-flex-grid-column [header]="'Sales'"
                                     [binding]="'sales'"
                                     [format]="'n2'"
                                     [width]="'1*'">
                </wj-flex-grid-column>
                <wj-flex-grid-column [header]="'Expenses'"
                                     [binding]="'expenses'"
                                     [format]="'n2'"
                                     [width]="'1*'">
                </wj-flex-grid-column>
            </wj-flex-grid>
        </div>
    </div>
    
    
  • Posted 8 June 2018, 1:44 am EST

    Hi,

    It looks like the initialization has not been done at the right place.

    Please use initialized event provided by WjFlexGrid to do any initialization work.

    Or you may also use the Angular lifecycle hooks like ngAfterViewInit()

    Please refer to the following angular 5 sample for the same:-

    https://stackblitz.com/edit/angular-v1kpe9?file=app%2Fapp.component.ts

    ~Manish

  • Posted 8 June 2018, 3:49 am EST

    Thank you Manish, this resolution works fine

  • Posted 13 December 2018, 11:03 pm EST

    Hell wijmo team,

    Hope you are doing well.

    I have one query regarding we can display filter text either in ascending or descending order,i.e

    Error

    OK

    Warning

    I want to display the filter text i.e.

    OK

    Error

    Warning

    How can i do this. appreciate your reply

    Thanks & regards

    Tarannum Banu

  • Posted 16 December 2018, 9:14 pm EST

    Hi,

    You may achieve the required functionality in the following steps:

    • Set ‘sortValues’ property of columnFilter.valueFilter instance to false.

    • Assign values to the uniqueValues property of the columnFilter.valueFilter instance in the required order.

    Please refer to the following code snippet:

    var countryFilter = filter.getColumnFilter('country');
        var countryVals = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
        countryFilter.valueFilter.sortValues = false;
        countryFilter.valueFilter.uniqueValues = countryVals;
    

    You may also refer to the following sample demonstrating the same: https://jsfiddle.net/9cn7gvek/

    ~Sharad

  • Posted 3 January 2019, 1:00 am EST

    thanks you so much

    Regards,

    Tarannum Banu

  • Posted 3 January 2019, 5:35 pm EST

    Hi wijmo team,

    The filter is working fine but for sorting also i want to display in below order when user click to sort.

    OK

    Error

    Warning

    Could you please help me out how to do this.

    Regards,

    Tarannum banu

  • Posted 3 January 2019, 6:11 pm EST

    Hi,

    After setting the ‘valueFilter.sortValues’ property to false and ‘valueFilter.uniqueValues’ property to the values in the required order, the filter will show the values in the defined order irrespective of sort applied on the column.

    The same behaviour could also be observed in the previously shared sample i.e. filter values show up in defined order irrespective of the sorting applied on the column.

    If you are facing some issue, then please let us know the step required to replicate the issue against the shared sample.

  • Posted 7 January 2019, 10:19 pm EST - Updated 3 October 2022, 11:14 am EST

    Thanks for your reply.

    Currently I am using wij-flex-grid of angularjs, want to apply filter and sort both the operations on grid

    the Validation column of grid has text value (Error, Warning and OK).

    Step 1: Applied sorting, the data displayed on grid in ascending order (Error, OK and Warning) but the requirement is the grid should display the data (OK, Warning and Error) in this order.

    Please see the below image its sort the data in ascending order, but we want to perform sorting in (OK, Warning and Error) order.

    And in descending order it should be display data (Error, warning and Ok)

    Step2: In filter popup, the data should be display (OK, Warning and Error), but currently it is displaying error, ok, warning ascending order

    Could you please help me out to resolve this issue

    Thanks,

    Tarannum Banu

  • Posted 8 January 2019, 4:35 pm EST

    Hi,

    To change the sort order in the grid, you may assign a sortConverter function on the underlying collectionView instance.

    Please refer to the following code snippet and sample:

    // define sort converter for grid values
        	grid.collectionView.sortConverter = function(sd, item, value){
          	// define sort order
          	var sortOrder = {
            	"ok": 1,
              "warning": 2,
              "error": 3
            };
            // if sorting by validation, then apply custom sort order
            if(sd.property == 'validation'){
            	return sortOrder[value.toLowerCase()];
            }
            
            return value;
          }
        }
    

    http://jsfiddle.net/g2juy4cs/

    You may read more about ‘sortConverter’ from the following doc: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.collections.CollectionView.Class.html#sortConverter

    Please let us know if you still face some issues.

  • Posted 10 January 2019, 5:54 pm EST

    Thanks for the support it works properly… :slight_smile:

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels