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. Image for the cookie policy date

[solved] auto submit search

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


2 Replies

KO Koen 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


BS Balaji Sekar Syncfusion Team 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.  


Loader.
Live Chat Icon For mobile
Up arrow icon