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
close icon

Filter Data on the basis of dropdown in custom toolbar

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

1 Reply

DR Dhivya Rajendran Syncfusion Team August 8, 2019 09:36 AM UTC

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> 


Regards, 
R.Dhivya 


Loader.
Live Chat Icon For mobile
Up arrow icon