filterable.messages Object

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

Example - customize filter menu messages

<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.and String (default: "And")

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

Example - set the "and" message

<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 (default: "{0} filter column settings")

The title of the button that displays the FilterMenu.

The {0} argument represents the field name

Example - set the "buttonTitle" message

<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.clear String (default: "Clear")

The text of the button which clears the filter.

Example - set the "clear" message

<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 (default: "Filter")

The text of the button which applies the filter.

Example - set the "filter" message

<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 (default: "Show items with value that: ")

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

Example - set the "info" message

<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.title String (default: "Show items with value that: ")

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

filterable.messages.isFalse String (default: "is false")

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

Example - set the "isFalse" message

<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 (default: "is true")

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

Example - set the "isTrue" message

<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.or String (default: "Or")

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

Example - set the "or" message

<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 (default: "Search")

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

Example - set the "search" message

<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 (default: "-Select value-")

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

Example - set the "selectValue" message

<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 (default: "{0} items selected")

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

Example - set the "selectedItemsFormat" text

<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.operator String (default: "Operator")

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

Example - set the text of operator item

<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.additionalOperator String (default: "Additional operator")

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

Example - set the text of operator item

<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.value String (default: "Value")

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

Example - set the text of value item

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

filterable.messages.additionalValue String (default: "Additional value")

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

Example - set the text of value item

<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.logic String (default: "Logic")

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

Example - set the text of value item

<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.checkAll String (default :"Select All")

The label used for the check-all checkbox.

Example - change the checkAll default message.

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