Search results

Use filter bar template in foreign key column

You can use the filter bar template in foreign key column by defining the filterBarTemplate property of e-grid-column tag helper. The following example demonstrates the way to use filter bar template in foreign column.

In the following example, The Employee Name is a foreign key column. This column header shows the custom filter bar template and you can select filter value by using the `DropDown options.

tagHelper
filterbar-temp-foreign.cs
@{
    Object filterTemplate = new Object();
    filterTemplate = (new { read = "read", write = "write" });
}

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="EmployeeID" headerText="Employee Name" foreignKeyValue='FirstName' dataSource="ViewBag.ForeignData" width="150" filterBarTemplate="filterTemplate"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>

function create (args) {
    return ej.base.createElement('input', { className: 'flm-input' });
}

function write (args) {
    var fEmployeeData = @Json.Serialize(ViewBag.ForeignData);
    fEmployeeData.splice(0, 0, { 'FirstName': 'All' }); // for clear filtering
    var dropInstance = new ej.dropdowns.DropDownList({
        dataSource: new ej.data.DataManager(fEmployeeData),
        fields: { text: 'FirstName' },
        placeholder: 'Select a value',
        popupHeight: '200px',
        index: 0,
        change: (args) => {
            var grid = document.getElementById("Grid").ej2_instances[0];
            if (args.value !== 'All') {
                grid.filterByColumn('EmployeeID', 'equal', args.value);
            }
            else {
                grid.clearFiltering("EmployeeID");
            }
        }
    });
    dropInstance.appendTo(args.element);
}
</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    ViewBag.ForeignData = EmployeeDetails.GetAllRecords();
    return View();
}