We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to apply data filter (where) in client side

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

1 Reply

MS Mani Sankar Durai Syncfusion Team July 3, 2017 12:34 PM UTC

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: 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Loader.
Up arrow icon