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
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