Add clear icon in search in ASP.NET MVC Grid

[thibault fouillat]

Hi,

I'm using a EJS grid in my ASP.NET application. I need to have a clear icon (e-clear-icon) in the search input so I used this to add the icon (like in the documentation) :

Razor:

@Html.EJS().Grid("FlatGrid").DataSource((System.Data.DataTable)ViewBag.DataSource).Height("auto").Width("auto").ShowColumnChooser().Toolbar(toolbarItems).AllowResizing().AllowReordering().AllowFiltering().FilterSettings(filter =>

{ filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).AllowSorting().AllowGrouping().GroupSettings(grouping => grouping.DisablePageWiseAggregates(true).ShowGroupedColumn(true)).AllowSelection().SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).AllowPaging().PageSettings(page =>

page.PageSizes(new int[] { 10, 20, 50, 100 }).PageSize(gridPageSize)).Columns((List<Syncfusion.EJ2.Grids.GridColumn>)ViewBag.cols).ToolbarClick("toolbarClick").RowSelected("rowSelect").QueryCellInfo("queryCellInfo").Render()

JS:

if (document.querySelector(".e-input-group.e-search") != null || document.querySelector(".e-input-group.e-search") != undefined) {

        var inputSearch = document.querySelector(".e-input-group.e-search");

        inputSearch.innerHTML += '<span class="e-clear-icon" onclick="clearGridSearch();"></span>';

    }

function clearGridSearch() {

    console.log("clearing");

    document.getElementById('FlatGrid_searchbar').value = "";

}

This solution displays the icon correctly but search does not work anymore. When I write some text and press "enter" nothing happens. But, clear button clears the input correctly.

I’ve got either Search or Clear working…

What I am doing wrong ?

Regards,

[Venkatesh Ayothi Raman]

Hi Thibault, 

Thanks for contacting Syncfusion Support. 

We have checked your query and in your sample code you have cleared the search box value but missed to clear the grid searching programmatically. You can use the search() method with empty string to clear the Grid searching. We have prepared a simple sample based on your requirement. Please refer to the below code example, Documentation link and sample link. 

[index.cshtml] 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Toolbar(new List<string>() { "Search" }).Columns(col => 

{ 

    . .  . 

 

}).DataBound("dataBound").AllowPaging().Render() 

 

<script> 

    function dataBound(e) { 

       var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

        //  checks whether the cancel icon is already present or not 

        if (!grid.element.getElementsByClassName('e-search')[0].classList.contains('clear')) { 

            var span = ej.base.createElement('span', { 

                id: grid.element.id + '_searchcancelbutton', 

                className: 'e-clear-icon' 

            }); 

            span.addEventListener('click', (args) => { 

               document.querySelector('.e-search').getElementsByTagName('input')[0] = ""; 

                grid.search(""); 

            }); 

            grid.element.getElementsByClassName('e-search')[0].appendChild(span); 

            grid.element.getElementsByClassName('e-search')[0].classList.add('clear'); 

        } 

        

    } 

 

    </script> 

 

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

                             https://ej2.syncfusion.com/documentation/grid/api-grid.html#databound  

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/search_cancel-434028692  

Regards, 

Venkatesh Ayothiraman.