Show filter, sorting information in jQWidget JQX grid with server side events

Question

I have implemented a grid with server side paging, sorting, filtering. Now my user has saved that grid with all the sorting, filtering information. I have generated a query with all these information. That means, when I load that grid again, I am giving the filtered and sorted data to the grid. Even though I have given the sorted, filtered data, now the events hits the DB since I am applying the filtering and sorting properties as below. In this situation, If I have sorted 7 fields in the grid, it hits DB 8 times (7 for applying filter and one for loading the grid for the first time). This makes so many performance issues.

 $(openFrom + "#jqxgrid").jqxGrid('sortby', sessionStorage.getItem("GridSortColumn"), sortdirectionvalue);

 $(openFrom + "#jqxgrid").jqxGrid('addfilter', currentColumnFilterValue['columnname'], filterGroup);
 $(openFrom + "#jqxgrid").jqxGrid('applyfilters');

Here is my source object.

var source =
                  {
                      datafields: DataFields,
                      datatype: "json",
                      async: false,//If it is true, server side filtering and sorting won't work together
                      url: '../Widget/GetDataForGrid/',
                      type: 'POST',
                      sort: function () {
                      },
                      filter: function () {
                      },
                      beforeprocessing: function (data) {
                      }
                  };

So my requirement is, I just need to show the filter, sort selection in the grid without going to DB. This is applicable only for the first time(When the grid with sorted, filtered information loads first). And when the user click the filter again or user tries to sort another field, it should work as in server side filtering and sorting.

Any help is much appreciated.

Answer 1

I have solved it myself.

1. I created a variable and initiated it in the document ready as follows.

   var isFilterSortGrid = false; 
   

2. Change sort filter functions in source object as follows.

   sort: function () {
                         if (isFilterSortGrid) {
                             $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                         }
                     },
   filter: function () {
                         if (isFilterSortGrid) {
                             $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                         }
                     }
   

3. And finally in filter and clear button click I made that variable true again.

   $(document).on('click', '#filterbuttonjqxgrid', function () {
     isFilterSortGrid = true;
   });
   
   $(document).on('click', '#filterclearbuttonjqxgrid', function () {
    isFilterSortGrid = true;
   });
   

   I am applying the filter and sorting as normal, so that the filter selection will be there.