Using DropDownList as Boolean Filter in Grid
Environment
| Product | Progress® Telerik® UI Grid for UI for ASP.NET Core |
Description
How can I set up a custom filter for a Boolean column in the Grid and have a DropDownList which lists true, false, all?
Solution
- Create a template function to initialize the DropDownList.
function boolFilterTemplate(input) {
input.kendoDropDownList({
dataSource: {
data: [
{ text: "True", value: true },
{ text: "False", value: false }
]
},
dataTextField: "text",
dataValueField: "value",
valuePrimitive: true,
optionLabel: "All"
});
}
- Use the
filterMenuInitevent of the Grid to replace the default filter label with more appropriate text.
function onFilterMenuInit(e) {
if (e.field == "Discontinued") {
// replace default text in filter menu
e.container.find(".k-filter-help-text").text("Show items with value:");
}
}
- Use the
filterevent of the Grid to replace the string value in the generated filter expression with its Boolean equivalent.
function onFilter(e) {
if (e.field === "Discontinued") {
var filter = e.filter;
if (filter && filter.filters && filter.filters.length > 0) {
var filters = filter.filters;
// convert the filter string value to a boolean one
filters[0].value = (filters[0].value === "true");
}
}
}
Example:
@(Html.Kendo().Grid<BooleanFilterGrid.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.IsTrue);
})
.Pageable()
.Scrollable()
.Filterable()
.Events(ev=>ev.Filter("onFilter"))
.HtmlAttributes(new { style = "height:440px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
$(document).ready(function () {
var grid = $("#grid").data('kendoGrid');
var options = grid.getOptions();
options.columns[2].filterable = { ui: boolFilterTemplate };
options.filterMenuOpen = onFilterMenuInit;
grid.setOptions(options);
function boolFilterTemplate(input) {
input.kendoDropDownList({
dataSource: {
data: [
{ text: "True", value: true },
{ text: "False", value: false }
]
},
dataTextField: "text",
dataValueField: "value",
valuePrimitive: true,
optionLabel: "All"
});
}
function onFilterMenuInit(e) {
if (e.field == "IsTrue") {
// replace default text in filter menu
e.container.find(".k-filter-help-text").text("Show items with value:");
}
}
});
function onFilter(e) {
if (e.field === "IsTrue") {
var filter = e.filter;
if (filter && filter.filters && filter.filters.length > 0) {
var filters = filter.filters;
// convert the filter string value to a boolean one
filters[0].value = (filters[0].value === "true");
}
}
}
public partial class GridController : Controller
{
public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
{
var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
{
OrderID = i,
Freight = i * 10,
OrderDate = DateTime.Now.AddDays(i),
ShipName = "ShipName " + i,
ShipCity = "ShipCity " + i,
IsTrue = i % 2 == 0
}) ;
return Json(result.ToDataSourceResult(request));
}
}
public class OrderViewModel
{
public int OrderID { get; set; }
public bool IsTrue { get; set; }
public decimal? Freight { get; set; }
[Required]
public DateTime? OrderDate { get; set; }
public string ShipCity { get; set; }
public string ShipName{ get; set; }
}