Filter Data on the basis of dropdown in custom toolbar

[Muhammad Tassadaque Zia]

I have seen this post about how to add dropdown in custom toolbar. I want to know how can i filter grid data on the basis of value selected in dropdown

[Dhivya Rajendran]

Hi Muhammad, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement and we suggest you to bind change event for dropdown and get the selected value from dropdown list then based on the value you can perform filter in Grid by using filterByColumn method. 

Index.cshtml 

<ejs-dropdownlist id="filterDropDown" dataSource="@ViewBag.DataSource" placeholder="Select a Value to Filter" width="300" change="dropDownchange" popupHeight="220px"> 

    <e-dropdownlist-fields text="OrderID" value="OrderID"></e-dropdownlist-fields> 

</ejs-dropdownlist> 

 

<ejs-grid id="Grids" dataSource="ViewBag.DataSource" allowPaging="true" allowFiltering="true"> 

    . . . . . 

</ejs-grid> 

 

<script> 

    function dropDownchange(args) { 

        var grid = document.getElementById('Grids').ej2_instances[0]; 

        grid.filterByColumn('OrderID', 'equal', args.value); 

    } 

    

</script> 

Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/#filterbycolumn 

https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/data-binding/?no-cache=1#bind-to-url-adaptor 

Regards, 

R.Dhivya