Posted 14 September 2017, 11:21 am EST
I want to add server side filtering and infinite scrolling to my grid. when i first load the grid, data with page size of 10, i see 10 rows in my grid. when i scroll, i retrieve the remaining rows. let say my grid has 2 columns. One column is ‘Unit Id’ and the other column is ‘Unit Code’. First row has values of ‘Unit Id’ and ‘Unit Code’ as 1 and 100.
11th row has values of ‘Unit Id’ and ‘Unit Code’ as 2 and 100(I will see the 11th row only after i scroll as i set the default page size of 10).
when i click the filter icon on Unit code, i see a filter options popup, with only 100 in the list(Filter by Value).
when i click on apply i expect two rows.
When i do the filtering by filter by condition, i should be able to use the list of options available(Equals, Does not equal, Begins with…), when i click apply, i should be able to retrive all the filtered values.Not just the rows that are visible on the grid.
How do i achieve this?
I read the documentation “use the filterDefinition property to perform filtering on the server.”
view.filterDefinition = “startswith(CompanyName, ‘A’) and endswith(CompanyName, ‘B’)”;
Also when i add infinite scrolling and filtering on flex grid, when i scroll, after retrieveing the data, scroll bar moves to the top.
var pageSize1 = 10;
var serviceUrl = ‘http://apitrans.**.com:80/api’;
var entities = new wijmo.collections.CollectionView();
var getData = function () { $scope.reviewList = new wijmo.odata.ODataCollectionView(serviceUrl, 'Reviews/650365', { fields: ['reportingDatasetID', 'unitID', 'unitCode', 'etr', 'totalTaxProvision', 'deferredTaxAsset', 'payable', 'comp_ReportingDatasetID', 'comp_ETR', 'comp_TotalTaxProvision', 'comp_DeferredTaxAsset'], filterOnServer: true, pageSize: pageSize1, pageOnServer: true, loaded: loaded }); } $scope.init = function (s, e) { var flex = s; $scope.filter = new wijmo.grid.filter.FlexGridFilter(flex); s.onScrollPositionChanged = function () { var myDiv = $('#gsFlexGrid').find('div[wj-part="root"]'); //$('div[wj-part="root"]'); if (myDiv.prop('offsetHeight') + myDiv.scrollTop() >= myDiv.prop('scrollHeight')) { pageSize1 += 10; getData(); } } } getData();
