External Search with various parameters

[John Stephen Mangam]

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]

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> 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/grid/#search  

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

[John Stephen Mangam]

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]

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, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core620052173 

 

Documentation :  

https://ej2.syncfusion.com/javascript/documentation/api/grid/#filterbycolumn 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#clearfiltering 

 

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.