Set Filter Dialog with Two or More Fields in Grid
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
The Kendo UI Grid API includes the filterable.extra property which allows the user to add a second criterion in the filter menu.
How can I display a filter dialog with three or more fields?
Solution
Manually change the content of the filter menu container and its logic by subscribing to the filterMenuInit event of the API.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 15
},
height: 550,
scrollable: true,
filterable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "Name",
width: 160,
filterable: {
extra: false
},
template: "#=FirstName# #=LastName# - #=Title#",
}
],
filterMenuInit: function(e){
e.container
.empty()
.append($('<span>First name: </span><br /><input id="first-name-operators" /><input id="first-name-tb" class="k-textbox" /><br /><input id="first-logic" /><br /><span>Last name: </span><br /><input id="last-name-operators" /><input id="last-name-tb" class="k-textbox" /><br /><input id="second-logic" /><br /><span>JobTitle: </span><br /><input id="job-title-operators" /><input id="job-title-tb" class="k-textbox" /><div><button type="submit" class="k-button k-primary" id="submit">Filter</button><button type="reset" class="k-button" id="clear">Clear</button></div>'));
var operators = ['eq', 'startswith', 'contains'];
$('#first-name-operators, #last-name-operators, #job-title-operators').kendoDropDownList({
dataSource: operators
});
$('#first-logic, #second-logic').kendoDropDownList({
dataSource: ['and', 'or']
});
$('#submit').kendoButton({
click: function(){
var firstName = $('#first-name-tb').val();
var lastName = $('#last-name-tb').val();
var title = $('#job-title-tb').val();
var firstNameOperator = $('#first-name-operators').data('kendoDropDownList').value();
var lastNameOperator = $('#last-name-operators').data('kendoDropDownList').value();
var titleOperator = $('#job-title-operators').data('kendoDropDownList').value();
var logic = $('#first-logic').data('kendoDropDownList').value();
var filter = { logic: logic, filters: [] };
if(firstName.length) {
filter.filters.push({
field: 'FirstName',
operator: firstNameOperator,
value: firstName
});
}
if(lastName.length) {
filter.filters.push({
field: 'LastName',
operator: lastNameOperator,
value: lastName
});
}
if(title.length) {
filter.filters.push({
field: 'Title',
operator: titleOperator,
value: title
});
}
e.sender.dataSource.filter(filter);
}
});
$('#clear').kendoButton({
click: function(){
e.sender.dataSource.filter({});
}
})
}
});
});
</script>
</div>