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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply data filter (where) in client side

Thread ID:

Created:

Updated:

Platform:

Replies:

131258 Jun 30,2017 11:55 PM UTC Jul 3,2017 12:34 PM UTC ASP.NET Core 1
loading
Tags: Grid
dsapo
Asked On June 30, 2017 11:55 PM UTC

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 [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;