How to apply data filter (where) in client side

[dsapo]

Hi Support:

I have a view that has a button that get records from an action method using the jquery call.  

Then I have 3 Tabs, that shows the data in different ways, for example, in the first Tab , we want to show all records, but in the second Tab, I would like to show records based on a field value.  Everytime a user selects a different tab, I dont want to get the data from the server, instead I would like to use the data that I previously loaded when the user pressed the button.

Please could you help to know how to filter the data at client side, and only retrieve it from the server when we need to (pressing a button).

Thanks

David

[Mani Sankar Durai]

Hi David, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you would like to bind the filtered data for some of the grids in the AJAX post of button click. 

Refer the code example. 

<button id="btn" onclick="myFunc()">click to retrive data</button> 

<div id="defaultTab"> 

    ... 

 

</div> 

 

<script>  

        function myFunc() { 

         $.ajax({ 

                type: "POST", 

                url: '/Home/Data', 

               dataType: 'json', 

                success: function (data) {   //data retrieved from server end 

                    $("#defaultTab").ejTab(); 

                    $("#GridTab1").ejGrid({ 

                        dataSource: data, 

                        allowPaging: true, 

                        columns: ["OrderID", "CustomerID", "EmployeeID"], 

                    }); 

                    $("#GridTab2").ejGrid({ 

                        dataSource:ej.DataManager(data).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, 3, false).take(2)),      //filtered the data using where query 

                        allowPaging: true, 

                        columns: ["OrderID",  "EmployeeID"], 

                    }); 

                } 

From the above code example after retrieving the data from the server end in the AJAX success we have passed the full retrieved data to the GridTab1 and for the Gridtab2 we have filtered the data based on the value given. (Here we have given the value as 3 and filtered based on EmployeeID column) and passed those data to the dataSource property of grid. 

Refer the documentation link: 

Link: https://help.syncfusion.com/api/js/ejquery#methods:where 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.