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

Filterable.messages

configuration

The text messages displayed in the filter menu. Use it to customize or localize the filter menu messages.

filterable.messages

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  filterable: {
    messages: {
      and: "and",
      or: "or",
      filter: "Apply filter",
      clear: "Clear filter"
    }
  }
});
</script>

filterable.messages.additionalOperator

String

The text displayed in the tooltip of the additional operator item in filter menu.

Default: "Additional operator"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
        { text: "Beverages", value: 1 },
        { text: "Food", value: 2 },
      ]
    }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ],
  mobile: "phone",
  height: 550,
  filterable: {
    messages: {
      additionalOperator: "Choose operator"
    }
  }
});
</script>

filterable.messages.additionalValue

String

The text displayed in the tooltip of the additional value item in filter menu.

Default: "Additional value"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
        { text: "Beverages", value: 1 },
        { text: "Food", value: 2 },
      ]
    }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ],
  mobile: "phone",
  height: 550,
  filterable: {
    messages: {
      additionalValue: "Choose value"
    }
  }
});
</script>

filterable.messages.and

String

The text of the option which represents the "and" logical operation.

Default: "And"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  filterable: {
    messages: {
      and: "and"
    }
  }
});
</script>

filterable.messages.buttonTitle

String

The title of the button that displays the FilterMenu.

The {0} argument represents the field name

Default: "{0} filter column settings"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
        { text: "Beverages", value: 1 },
        { text: "Food", value: 2 },
      ]
    }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ],
  filterable: {
    messages: {
      buttonTitle: "{0} Filter Menu"
    }
  }
});
</script>

filterable.messages.checkAll

String

The label used for the check-all checkbox.

Default: (default :"Select All")

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [{
        field: "country",
        filterable: {
            multi:true,
            messages: {
                checkAll: "Do select all"
            },
            itemTemplate: function(e) {
                return ({ country, all }) => `<span><label><span>${country || all}</span><input type='checkbox' name='" + e.field + "' value='${country}'/></label></span>`
            }
        }
    }],
    filterable: true,
    dataSource: [ { country: "BG" }, { country: "USA" } ]
  });
</script>

filterable.messages.clear

String

The text of the button which clears the filter.

Default: "Clear"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  filterable: {
    messages: {
      clear: "Clear filter"
    }
  }
});
</script>

filterable.messages.filter

String

The text of the button which applies the filter.

Default: "Filter"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  filterable: {
    messages: {
      filter: "Apply filter"
    }
  }
});
</script>

filterable.messages.info

String

The text of the information message on the top of the filter menu.

Default: "Show items with value that: "

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  filterable: {
    messages: {
      info: "Filter by: "
    }
  }
});
</script>

filterable.messages.isFalse

String

The text of the radio button for false values. Displayed when filtering Boolean fields.

Default: "is false"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "active" }
  ],
  dataSource: {
    data: [
      { active: true },
      { active: false }
    ],
    schema: {
      model: {
        fields: {
          active: { type: "boolean" }
        }
      }
    }
  },
  filterable: {
    messages: {
      isFalse: "False"
    }
  }
});
</script>

filterable.messages.isTrue

String

The text of the radio button for true values. Displayed when filtering Boolean fields.

Default: "is true"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "active" }
  ],
  dataSource: {
    data: [
      { active: true },
      { active: false }
    ],
    schema: {
      model: {
        fields: {
          active: { type: "boolean" }
        }
      }
    }
  },
  filterable: {
    messages: {
      isTrue: "True"
    }
  }
});
</script>

filterable.messages.logic

String

The text displayed in the tooltip of the logic item in filter menu.

Default: "Logic"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
        { text: "Beverages", value: 1 },
        { text: "Food", value: 2 },
      ]
    }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ],
  filterable: {
    messages: {
      logic: "Choose logic"
    }
  }
});
</script>

filterable.messages.operator

String

The text displayed in the tooltip of the operator item in filter menu.

Default: "Operator"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
        { text: "Beverages", value: 1 },
        { text: "Food", value: 2 },
      ]
    }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ],
  mobile: "phone",
  height: 550,
  filterable: {
    messages: {
      operator: "Choose operator"
    }
  }
});
</script>

filterable.messages.or

String

The text of the option which represents the "or" logical operation.

Default: "Or"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  filterable: {
    messages: {
      or: "or"
    }
  }
});
</script>

filterable.messages.search

String

The placeholder of the search input for columns with the search option set to true.

Default: "Search"

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      {
        field: "category",
        filterable: {
          multi: true,
          search: true
        }
      }
    ],
    dataSource: [
      { category: "Foo" },
      { category: "Boo" }
    ],
    filterable: {
      messages: {
        search: "Search category"
      }
    }
  });
</script>

filterable.messages.selectValue

String

The text of the DropDownList displayed in the filter menu for columns whose values option is set.

Default: "-Select value-"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
        { text: "Beverages", value: 1 },
        { text: "Food", value: 2 },
      ]
    }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ],
  filterable: {
    messages: {
      selectValue: "Select category"
    }
  }
});
</script>

filterable.messages.selectedItemsFormat

String

The format string for selected items count in filter menu when search option set to true.

Default: "{0} items selected"

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      {
        field: "category",
        filterable: {
          multi: true,
          search: true
        }
      }
    ],
    dataSource: [
      { category: "Foo" },
      { category: "Boo" }
    ],
    filterable: {
      messages: {
        selectedItemsFormat: "There are {0} selected items"
      }
    }
  });
</script>

filterable.messages.title

String

The text rendered for the title attribute of the filter menu form.

Default: "Show items with value that: "

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" },
    { field: "unitPrice" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages", unitPrice: 2.5 },
    { productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
  ],
  filterable: {
    messages: {
      title: "Filter items where value:"
    }
  }
});
</script>

filterable.messages.value

String

The text displayed in the tooltip of the value item in filter menu.

Default: "Value"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
        { text: "Beverages", value: 1 },
        { text: "Food", value: 2 },
      ]
    }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 }
  ],
  mobile: "phone",
  height: 550,
  filterable: {
    messages: {
      value: "Choose value"
    }
  }
});
</script>