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

Adding OnKeyUp event to Search on Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

146577 Aug 8,2019 06:29 PM UTC Aug 9,2019 10:27 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: Grid
Grant Sturgill
Asked On August 8, 2019 06:29 PM UTC

Hello,

Using the toolbar functionality for the grid object, I have added search functionality to my grid. Right now, the search only works after the user has input a query and either hit the "enter" key or clicked the search icon next to the input box. I would like to make it so that the search query is run automatically and rows in the grid are hidden/revealed based on user input as the user is typing. Is there built-in functionality for this in Syncfusion already? Barring that, I have a JavaScript function that does what I need it to using an OnKeyUp event that would be referenced in the input. Is there a way to add that OnKeyUp flag to the input tag generated by the Syncfusion grid (ex: <input class="e-ejinputtext e-gridsearchbar" id="FlatGrid_searchbar"  onkeyup="mySearch()" type="text">)?


Dhivya Rajendran [Syncfusion]
Replied On August 9, 2019 10:27 AM UTC

Hi Grant, 
Thanks for contacting Syncufsion support. 

Query:  Is there a way to add that OnKeyUp flag to the input tag generated by the Syncfusion grid 
 
We have analyzed your requirement and by default, we don’t have any build in functionality for this. However, you can achieve your requirement by using the below way. In the below code example, we have bind the keyUp event for search input element in created event and based on the search value we have performed the search operation in Grid by using the search method. 

Kindly refer to the below code example and documentation for more information. 

<div> 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add(); 
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 
}).AllowPaging().Toolbar(new List<string>() { "Search" }).Created("search").Render() 
 
</div> 
 
<script> 
    function search() { 
        // Grid - > id of the Grid component you can set based on you requirement  
        document.getElementById("Grid_searchbar").addEventListener('keyup', function (event) { 
            var value = event.target.value; 
            gridObj = document.getElementById('Grid').ej2_instances[0]; 
            gridObj.search(value) 
        }) 
    } 
</script> 
   
Help documentation : 



Regards,
R.Dhivya  


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