New to Kendo UI for jQuery? Download free 30-day trial

Set Filter Dialog with Two or More Fields in Grid


Product Progress® Kendo UI® Grid for jQuery
Operating System All
Browser All
Browser Version All


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?


Manually change the content of the filter menu container and its logic by subscribing to the filterMenuInit event of the API.

<script src=""></script>

<div id="example">
  <div id="grid"></div>
    $(document).ready(function() {
        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){
            .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']
            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) {
                  field: 'FirstName',
                  operator: firstNameOperator,
                  value: firstName
              if(lastName.length) {
                  field: 'LastName',
                  operator: lastNameOperator,
                  value: lastName
              if(title.length) {
                  field: 'Title',
                  operator: titleOperator,
                  value: title
            click: function(){

See Also

In this article