filterable.messages Object

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

Example - customizing the filter menu messages

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      { field: "extension" }
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO", extension: 8241 },
      { id: 2, parentId: 1, lastName: "Weber", position: "  VP, Engineering", extension: 8342 }
    ],
    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 - setting the AND message

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      { field: "extension" }
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO", extension: 8241 },
      { id: 2, parentId: 1, lastName: "Weber", position: "  VP, Engineering", extension: 8342 }
    ],
    filterable: {
      messages: {
        and: "and"
      }
    }
  });
</script>

filterable.messages.clear String (default: "Clear")

The text of the button which clears the filter.

Example - setting the clear message

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      { field: "extension" }
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO", extension: 8241 },
      { id: 2, parentId: 1, lastName: "Weber", position: "  VP, Engineering", extension: 8342 }
    ],
    filterable: {
      messages: {
        clear: "Clear filter"
      }
    }
  });
</script>

filterable.messages.filter String (default: "Filter")

The text of the button which applies the filter.

Example - setting the filter message

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      { field: "extension" }
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO", extension: 8241 },
      { id: 2, parentId: 1, lastName: "Weber", position: "  VP, Engineering", extension: 8342 }
    ],
    filterable: {
      messages: {
        filter: "Apply filter"
      }
    }
  });
</script>

filterable.messages.info String (default: "Show items with value that: ")

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

Example - setting the info message

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      { field: "extension" }
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO", extension: 8241 },
      { id: 2, parentId: 1, lastName: "Weber", position: "  VP, Engineering", extension: 8342 }
    ],
    filterable: {
      messages: {
        info: "Filter by: "
      }
    }
  });
</script>

filterable.messages.title String (default: "Show items with value that: ")

The text that is 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 the user filters Boolean fields.

Example - setting the isFalse message

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      { field: "available" }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO", available: true },
        { id: 2, parentId: 1, lastName: "Weber", position: "    VP, Engineering", available: false }
      ],
      schema: {
        model: {
          fields: {
            available: {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 the user filters Boolean fields.

Example - setting the isTrue message

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      { field: "available" }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO", available: true },
        { id: 2, parentId: 1, lastName: "Weber", position: "    VP, Engineering", available: false }
      ],
      schema: {
        model: {
          fields: {
            available: {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 - setting the or message

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      { field: "extension" }
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO", extension: 8241 },
      { id: 2, parentId: 1, lastName: "Weber", position: "  VP, Engineering", extension: 8342 }
    ],
    filterable: true,
    filterable: {
      messages: {
        or: "or"
      }
    }
  });
</script>