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

[solved] auto submit search

Thread ID:

Created:

Updated:

Platform:

Replies:

147140 Sep 2,2019 11:29 AM UTC Sep 3,2019 10:34 AM UTC ASP.NET Core - EJ 2 2
loading
Tags: DataGrid
Koen
Asked On September 2, 2019 11:29 AM UTC

Dear,
I have a simple grid with search enabled:
<ejs-grid id="Grid"
          dataSource="@Model"
          allowSorting="true"
          allowPaging="true"
          commandClick="commandClick"
          toolbar="@(new List<string>() {"Search"})">
    <e-grid-pagesettings pageSize="50" />
    <e-grid-filtersettings type="Excel"></e-grid-filtersettings>
    <e-grid-columns>
        <e-grid-column field="Name" headerText="Name" type="string" width="150" />
        <e-grid-column headerText="" width="200" commands=commands />
    </e-grid-columns>
</ejs-grid>
How can I achieve automatic submit of the text that has been entered in the search box, with a timeout (for example 500ms)? So when a user enters for example "abc" it searches automatically after 500ms (without the user hitting enter)...

Thanks,
Koen


Koen
Replied On September 2, 2019 11:51 AM UTC

I just came accross the following answer by accident, which gives me a clue on how to do this:


I will come back if it does not work

Balaji Sekar [Syncfusion]
Replied On September 3, 2019 10:34 AM UTC

Hi Koen, 

We have analyzed your requirement and we have created a sample based on your that. In the below sample, we have bind the keyUp event for search input element in created event of Grid 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 sample for more information. 

[index.cshtml] 
 
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" toolbar="@(new List<string>() {"Search" })" created="created">     
    <e-grid-columns> 
         
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 
    .    .     .     .         
    </e-grid-columns> 
</ejs-grid> 
<script> 
    var debounceTimer = null; 
    function created(e) {         
        document.getElementById("Grid_searchbar").addEventListener('keyup', (event) => { 
            clearTimeout(debounceTimer); // you can customize as per your requirement 
            debounceTimer = setTimeout(() => { searchFun(event); }, 500); 
        })  
    } 
 
    function searchFun(event) { 
        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
        var value = event.target.value; 
        grid.search(value); 
        clearTimeout(debounceTimer); 
    } 

   

Help documentation : 



Regards,
Balaji Sekar.  


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