How to set initial filtering in igGrid options in order to load the data already filtered??

Hi. What we want to achieve in our current project is to save the user’s settings like “sorting”, “pageSize”, “pageIndex” and “filtering” for the grid and when he/she loads it again, the grid will be loaded like the last time the user left it. We managed to set “sorting” with “columnSettings” option, also the “pageSize” and “pageIndex” in the options which we use for initializing the grid.

The problem is with the “Filtering”. We couldn’t find in the documentation any option which could allow you to set initial filtering and along this to update the UI respectively. What we want is to set all the settings in the options and load the grid with only one remote request, instead of loading it clean and then applying igGridFiltering, igGridPaging or igGridSorting methods, because in this way we have like 4 or more additional requests (all the features are set to remote type).

So is there a way to set the filtering in the features[] option the same way we did with the other settings?

Best Regards,
Georgi Tsvetkov

Hi Georgi,

igGridFiltering doesn't have this functionality out of the box. However this functionality exists in $.ig.DataSource. As a workaround you can create an instance of $.ig.DataSource and set its parameters($.ig.DataSource.settings.paging, $.ig.DataSource.settings.sorting, $.ig.DataSource.settings.filtering) in the urlParamsEncoding callback . Then just pass the configured $.ig.DataSource instance to igGrid.dataSource option.

Here is an example code:

 

Code Snippet

1. $.ig.loader(function () {
2.     var ds = new $.ig.DataSource({
3.         dataSource: "/Home/GetData",
4.         responseDataKey: "Records",
5.         urlParamsEncoding: function (owner, params) {
6.             owner.settings.filtering.expressions.push({ fieldName: "Name", expr: "Adj", cond: "equals" });
7.             owner.settings.sorting.expressions.push({ fieldName: "Name", dir: "desc" });
8.             owner.settings.paging.pageIndex = 1;
9.             return true;
10.         }
11.     });
12.     $("#grid1").igGrid({
13.         dataSource: ds,
14.         autoGenerateColumns: false,
15.         localSchemaTransform: false,
16.         columns: [
17.             { key: "Name", headerText: "Name" }
18.         ],
19.         features: [
20.             { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', type: 'remote', pageSize: 5 },
21.             { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', type: 'remote' },
22.             { filterExprUrlKey:

 

 

Hope this helps,
Martin Pavlov

Infragistics, Inc.

Thank you very much for the fast answer. The filtering is now working along with other settings, but still the input field for the filtered column in filter row is empty and thus there isn't an indication for the user that the grid has been filtered. Should we think of some custom solution or you can suggest us a quick workaround?

P.S. Понеже ми се струва че доста от хората, които отговарят са българи, ако пиша на български в този форум дали ще получа отговор?

Hi Georgi,

You can use the igGridFiltering._updateFiltersUI(filteringExpressions) private method.

Here is an example:

$("#grid1").data("igGridFiltering")._updateFiltersUI($("#grid1").data("igGrid").dataSource.settings.filtering.expressions);

However you should keep in mind that this is a private method and it can be changed in the future IgniteUI releases.

 

P.S.: It will be good if we communicate in English so other community members can leverage the knowledge shared in this forum thread.

 

Best regards,

Martin Pavlov

Infragistics, Inc.

But if grid have null or empty filters (showNullConditions: true), _updateFiltersUI method generating additional requests to datasource, which leads to wrong grid state…

Hi Georgi,

 

There was an issue with my first code sample. The problem is that urlParamsEncoding is executing each time a remote operation is applied, so it will always add those initial settings to the request parameters. The solution is to declare a variable and check its state, so this code executes only once on page load.

Here is a revised code:

$.ig.loader(function () {
    var pageLoad = true;
    var ds = new $.ig.DataSource({
        dataSource: "/Home/GetData",
        responseDataKey: "Records",
        urlParamsEncoding: function (owner, params) {
            if (pageLoad) {
                owner.settings.filtering.expressions.push({
                    fieldName: "Name",
                    expr: "Adj",
                    cond: "equals"
                });
                owner.settings.sorting.expressions.push({
                    fieldName: "Name",
                    dir: "desc"
                });
                owner.settings.paging.pageIndex = 1;
                pageLoad = false;
            }
            return true;
        }
    });
    $("#grid1").igGrid({
        dataSource: ds,
        autoGenerateColumns: false,
        localSchemaTransform: false,
        columns: [{
            key: "Name",
            headerText: "Name"
        }],
        features: [{
            recordCountKey: 'TotalRecordsCount',
            pageIndexUrlKey: 'page',
            pageSizeUrlKey: 'pageSize',
            name: 'Paging',
            type: 'remote',
            pageSize: 5
        }, {
            sortUrlKey: 'sort',
            sortUrlKeyAscValue: 'asc',
            sortUrlKeyDescValue: 'desc',
            name: 'Sorting',
            type: 'remote'
        }, {
            filterExprUrlKey: 'filter',
            filterLogicUrlKey: 'filterLogic',
            name: 'Filtering',
            type: 'remote'
        }]
    });
    $("#grid1").data("igGridFiltering")._updateFiltersUI($("#grid1").data("igGrid").dataSource.settings.filtering.expressions);
});

Best regards,

Martin Pavlov

Infragistics, Inc.

Thank you for this, but we use Local Storage, and we overwrite the settings every time the user changes some of them, so it works without this check in our project.

How are you loading your saved settings from localStorage?  I tried doing it in the create, databinding, etc methods of the grid but it won't let me.  Would you mind posting a sniplet?

Hi Dirk,

Attached you can find an example implementation on saving igGridSorting state in localStorage. For the other features the concept is the same, except for filtering where you need to set the filtering expressions directly in the $.ig.DataSource as described in this forum thread.

igGrid_SaveGridSortingState

Hope this helps,

Martin Pavlov

Infragistics, Inc.

hi

i wanted to filter with 2 or more options with 'ANY' (OR)

between them, and couldn't find how

(the default of the filtering is 'ALL' (AND))

 

my code:

$('#grid').igGridFiltering('filter', ([

{ fieldName:'CLUSTER_ID', expr: 28, cond: 'equals'},

{ fieldName:'CLUSTER_ID', expr: 81, cond: 'equals'}

]));

how to disable the filters like startswith and endswith and next month???????