avoid multiple datasource refreshes when adding custom filtering and sorting

[Koen]

Dear,

The following code result in 4 XHR responses with datasource data. Whichever response comes last (not necessarily the last one called) will be set as the datasource.

How can I avoid 4 calls being sent and just send one datasource refresh call after all filtering and sorting has been set?

        document.getElementById('Invoices').addEventListener('click',
    () => {
        var gridObj = document.getElementById("gridInvoices").ej2_instances[0];
 
        gridObj.clearFiltering();
        gridObj.clearSorting();
 
        gridObj.sortColumn("ColumnA", "descending");
 
        gridObj.filterByColumn("ColumnA", "greaterthan", 0.01);
 
    });

Thanks,

Koen

[Manivel Sellamuthu]

Hi Koen, 

Greetings from Syncfusion support. 

We have checked the possibility to achieve your requirement. But unfortunately, it is not feasible to achieve your requirement. Each grid action needs to be made a request to the server, so that the data for the currentPage records will be proper and the UI level changes will be applied. 

Please find the below cause. 

1. ClearFiltering – invoking the method needs to be clear the Filtered data and made to get First 12 records(changeable according to pageSettings)
2. ClearSorting – The same above reason Sorted first 12 records, will not be matched the Original dataSource, So this network request is also needed.
3. FilterByColumn-  Since the Grid will have only the currentView records based on the on-demand concept, this request is necessary to get the server side filtered data
4. SortColumn – For the same reason for filterByColumn, the request for SortColumns is also needed.

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Koen]

Dear,

I am still struggling with this issue...

The end user is allowed to search/filter/sort on the grid. When the user hits my "reset" button, the grid should be set to the "default" state. 

My code (as already shown) removes all "custom" filtering, sorting and grouping... and sets a default sorting. This results in multiple requests, and sometimes the last one (with the default sorting) is not coming back as the last response, but is overwritten by another response that comes in later...

This is causing the grid not being sorted on the default column(s)... this is very annoying... how can I solve this?!?

Thanks,

Koen

[Manivel Sellamuthu]

Hi Koen, 

Thanks for your update. 

As we have already stated this is the default behavior. However based on your confirmation we will, try to create a workaround solution for your requirement. So please confirm that whether we can provide a workaround for this or not. 

Regards, 

Manivel 

[Koen]

Hi Koen, 

Thanks for your update. 

As we have already stated this is the default behavior. However based on your confirmation we will, try to create a workaround solution for your requirement. So please confirm that whether we can provide a workaround for this or not. 

Regards, 

Manivel 

Hi, It would be nice if you could find a workaround.

IMHO, this is not a "rocket science" use case; it is quite normal to "reset" a grid to it's default state when a user has done some custom sorting/filtering... but currently the user has to "reset" multiple time and hope that the grid is set to it's default state after a few tries...

[Manivel Sellamuthu]

Hi Koen, 

Thanks for your update. 

We have tried at our end each possibility to achieve your requirement. But we are unsuccessful at our end. If we prevent the request , it causes the data displayed in the grid mismatch from the current action.  

Since the each operation has a separate functionality, it needs each request for an action. 

Query: but currently the user has to "reset" multiple time and hope that the grid is set to it's default state after a few tries... 

 

Could you please explain this query with code example. While validating this query, we could see that the Grid has cleared the sorting and filtering in first click of the reset button itself. 

Please find the below tried code example and sample for your reference. 

<button id="doaction"> Filter & Sort</button> 

<button id="reset"> Reset</button> 

 

<ejs-grid id="Grid" allowPaging="true" allowFiltering="true" allowSorting="true"> 

    <e-grid-filterSettings type="Menu"></e-grid-filterSettings> 

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="Freight" format="C2" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    var gridObj; 

    document.getElementById('reset').addEventListener('click', 

        () => { 

            gridObj = document.getElementById("Grid").ej2_instances[0]; 

            gridObj.clearFiltering(); 

            gridObj.clearSorting();; 

 

        }); 

 

    document.getElementById('doaction').addEventListener('click', 

        () => { 

            gridObj = document.getElementById("Grid").ej2_instances[0]; 

            gridObj.sortColumn("OrderID", "Ascending"); 

            gridObj.filterByColumn("ShipCountry", "startswith", "Austria"); 

        }); 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/154914-Sample-784282171.zip 

Regards, 

Manivel