Filter grid column using external drop down

[Jais]

Hi Syncfusion,

I have a grid (https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core) where the data is loaded using a datamanger with adaptor=WebMethodAdaptor. I want to be able to filter the rows using the values in a column. The filter should be handled by a dropdownlist (https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/getting-started), which also sits outside the grid. The values for the dropdown should come from the values found in that grid column.

How do I do this?

Tha

[Pavithra Subramaniyam]

Hi Jais,

Thanks for contacting Syncfusion support.

You can achieve your requirement by calling the “filterByColumn” method inside the external DropDownList component’s “select” event. Please refer to the below code example and API link for more information.

In the below sample, we have set dataSource to the DropDownList component same as the Grid dataSource. Inside the select event, we have called the “filterByColumn” method with the selected “CustomerID” value.

<div id='url-data' class='col-lg-6' style='padding-top:15px'>

    <div class='content'>

        <ejs-dropdownlist id="country" placeholder="Select a Country" select="select">

            <e-data-manager adaptor="WebMethodAdaptor" url="/Home/UrlDataSource" crossDomain="true"></e-data-manager>

            <e-dropdownlist-fields value="CustomerID"></e-dropdownlist-fields>

        </ejs-dropdownlist>

    </div>

</div>

 

<ejs-grid id="Grid" allowPaging="true" allowFiltering="true">

    <e-data-manager url="/Home/UrlDataSource" adaptor=" WebMethodAdaptor"></e-data-manager>

    <e-grid-columns>

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>

        .  .  .

    </e-grid-columns>

</ejs-grid>

 

<script>

    function select(e) {

        var grid = document.getElementById("Grid").ej2_instances[0];

        grid.filterByColumn("CustomerID", "equal", e.itemData["CustomerID"]);

    }

    </script>

API        : https://ej2.syncfusion.com/javascript/documentation/api/grid/#filterbycolumn

                 https://ej2.syncfusion.com/javascript/documentation/api/drop-down-list#select

Please get back to us if you need further assistance on this.

Regards,

Pavithra S