Create Custom Checkbox Filter Combined with Default Filter Menu in the Grid
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I add a custom checkbox filter functionality in combination with the default filter menu in the Kendo UI Data Grid for jQuery?
Solution
To achieve the desired scenario, apply custom logic in the filterMenuInit event handler.
The following example demonstrates how to add the Is Null or Empty and Is not empty checkbox filter options on top of the default filter functionality of the Grid.
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "200px"}],
editable: "inline",
filterable: true,
filterMenuInit: onFilterMenuInit
});
});
function onFilterMenuInit(e) {
if (e.field == "ProductName") {
initCheckboxFilter.call(this, e);
}
}
function initCheckboxFilter(e) {
var popup = e.container.data("kendoPopup");
var dataSource = this.dataSource;
var field = e.field;
var data = [{value: "Is Null or Empty"}, {value: "Is not empty"}]
// Add the checkboxes container.
var helpTextElement = e.container.children(":first").children(":first");
helpTextElement.nextUntil(":has(.k-button)").remove();
var element = $("<div class='checkbox-container'><ul class='fieldlist'><li><input type='checkbox' id='eq1' /></li><li><input type='checkbox' id='eq2' /></li></ul></div>").insertAfter(helpTextElement);
// Initialize the Kendo UI Checkboxes.
$('#eq1').kendoCheckBox({
label: "Is Null or Empty"
});
$('#eq2').kendoCheckBox({
label: "Is not empty",
});
// Prevent the internal filtering.
e.container.find("[type='submit']").click(function (e) {
e.preventDefault();
e.stopPropagation();
var filter = dataSource.filter() || { logic: "and", filters: [] };
// Create a custom filter expression.
var fieldFilters = $.map(element.find(":checkbox:checked"), function (input) {
if($(input).next().text() == "Is Null or Empty") {
return {
logic: "or",
filters: [
{
field: field,
operator: "isnull"
},
{
field: field,
operator: "isempty"
}
]
}
};
if($(input).next().text() == "Is not empty") {
return {
field: field,
operator: "isnotempty",
};
}
});
if (fieldFilters.length) {
removeFiltersForField(filter, field);
filter.filters.push({
logic: "and",
filters: fieldFilters
});
// Filter the dataSource.
dataSource.filter(filter);
}
// Close the filter menu.
popup.close();
});
}
function removeFiltersForField(expression, field) {
if (expression.filters) {
expression.filters = $.grep(expression.filters, function (filter) {
removeFiltersForField(filter, field);
if (filter.filters) {
return filter.filters.length;
} else {
return filter.field != field;
}
});
}
}
</script>
<style type="text/css">
ul.fieldlist {
list-style-type: none;
padding-left: 2px;
}
</style>