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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

External Search with various parameters

Thread ID:

Created:

Updated:

Platform:

Replies:

143550 Mar 26,2019 01:09 PM UTC Mar 28,2019 10:45 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
John Stephen Mangam
Asked On March 26, 2019 01:09 PM UTC

Hi,

Please provide me an example of a grid that receives a datasouce (ViewBag) list of books from server and then performs the search on the client side.

The page has a search form with book-id and book-name options separate from the grid.

The condition is that No Server-side operation is allowed.

Thank you.   

Pavithra Subramaniyam [Syncfusion]
Replied On March 27, 2019 05:22 AM UTC

Hi John, 
  
Greetings from Sycnfusion support. 
 
By default while the Grid is bound with ViewBag data locally, the Grid actions such as searching, paging etc. will be done in client side only. So you can achieve your requirement by using the grid.search() method while submitting the search value in the form. Please refer to the below code example and documentation link for more information. 
 
[index.cshtml] 
 
// external search box 
<input id="ext_search" /> 
<button id="Search_button" onclick="searching(this)" >Search</button> 
<button id="clear_button" onclick="clearing(this)">Clear</button> 
 
<ejs-grid id="Grid" dataSource=@ViewBag.data width="auto"> 
    <e-grid-columns> 
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column> 
        <e-grid-column field="OrderID" headerText="Order ID" width="120"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" width="170"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script> 
    function searching(e) { 
        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        var value = document.getElementById("ext_search").value; 
        grid.search(value);   // search the textbox value 
    } 
    function clearing(e) { 
        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        document.getElementById("ext_search").value = ""; 
        grid.search("");   // clears the searching 
    }  
    </script> 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


John Stephen Mangam
Replied On March 27, 2019 05:32 AM UTC

Hi Pavithra,

Thanks a lot for the prompt response.

In fact, as I stated, I'm looking for a way to be able to search with an external form with more than one text box. 

In the example you shared, i want to have a search form separately and let the user type the ids in the respective textboxes and search based on two or three values at the same time.

Perhaps its a function where i search the grid data for emp-id, name, city etc. Based on the user input given in the separate search form.

Pavithra Subramaniyam [Syncfusion]
Replied On March 28, 2019 10:45 AM UTC

Hi John, 
 
Thanks for your detailed update. 
 
We could see that your requirement involves performing searching with multiple values in Grid. We would like to inform you that we don’t have support for “Multi-value search” in Grid.  
 
Since you are trying to perform searching based on the value particular columns in Grid, We suggest you to use filtering instead of searching to achieve your requirement. We have prepared a sample for your convenience. Please download the sample from the link below, 
 
Documentation :  
 
In the above sample we will be using the “filterByColumn” method of Grid and use the “contains” operator(which works similar like searching) to perform filtering in Grid. And now when the “Search” button is clicked we will be performing the filtering in Grid columns with the values entered in the input elements. And to clear filtering we have used the “clearFiltering” method of Grid. 
 
 
<script> 
    function searching(e) { 
        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        for (var i = 0; i < document.getElementsByTagName("input").length; i++) { 
            grid.filterByColumn(grid.columns[i].field, "contains", document.getElementsByTagName("input")[i].value)// filter the textbox value 
        } 
    } 
    function clearing(e) { 
        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        document.getElementById("emp_search").value = ""; 
        document.getElementById("ord_search").value = ""; 
        document.getElementById("cust_search").value = ""; 
        grid.clearFiltering(); // clears the filtering 
    } 
</script> 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 
 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon