[solved] auto submit search

[Koen]

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]

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

https://www.syncfusion.com/forums/129830/is-it-possible-to-do-real-time-search-with-multiple-keywords

I will come back if it does not work

[Balaji Sekar]

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); 

    } 

   

Sample : https://www.syncfusion.com/downloads/support/directtrac/147140/ze/EJ2Grid-03092019339793201.zip 

Help documentation : 

https://ej2.syncfusion.com/angular/documentation/api/grid/#created 

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

Regards,
Balaji Sekar.