Customize filter UI in foreign key column
17 Feb 20222 minutes to read
You can create your own filtering UI by using Filter
property of Column
. The following example demonstrates the way to create a custom filtering UI in the foreign column.
In the following example, The Employee Name is a foreign key column. DropDownList is rendered using Filter UI.
@{
Object filterTemplate = new Object();
filterTemplate = (new { create = "create", read = "read", write = "write" });
}
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("EmployeeID").HeaderText("Employee Name").Width("150").Filter(new { ui = filterTemplate }).ForeignKeyValue("FirstName").DataSource(ViewBag.ForeignData).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Render()
<script>
var dropInstance;
var fEmployeeData = @Html.Raw(Json.Encode(@ViewData["ForeignData"]));
function create (args) {
var flValInput = document.createElement('input');
flValInput.classList.add('flm-input');
args.target.appendChild(flValInput);
dropInstance = new ej.dropdowns.DropDownList({
dataSource: new ej.data.DataManager(fEmployeeData),
fields: { text: 'FirstName', value: 'EmployeeID' },
placeholder: 'Select a value',
popupHeight: '200px'
});
dropInstance.appendTo(flValInput);
}
function write (args){
dropInstance.text = args.filteredValue || '';
}
function read (args) {
args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.text);
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
ViewBag.ForeignData = EmployeeDetails.GetAllRecords();
return View();
}