columns.filterable Boolean|Object (default: true)

If set to true a filter menu will be displayed for this column when filtering is enabled. If set to false the filter menu will not be displayed. By default a filter menu is displayed for all columns when filtering is enabled via the filterable option.

Can be set to a JavaScript object which represents the filter menu configuration.

Example - disable filtering

<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position", filterable: false }
    ],
    editable: "popup",
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
    ]
  });
</script>

columns.filterable.ui String|Function

The role data attribute of the widget used in the filter menu or a JavaScript function which initializes that widget.

Example - specify the filter UI as a string

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      {
        field: "hireDate",
        filterable: {
          ui: "datetimepicker" // use Kendo UI DateTimePicker
        }
      }
    ],
    filterable: true,
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO", hireDate: new Date(2012, 2, 3) },
        { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering", hireDate: new Date(2012, 7, 13) }
      ],
      schema: {
        model: {
          fields: {
            hireDate: { type: "date" }
          }
        }
      }
    }
  });
</script>

Example - initialize the filter UI

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      {
        field: "hireDate",
        filterable: {
          ui: function(element) {
            element.kendoDateTimePicker(); // initialize a Kendo UI DateTimePicker
          }
        }
      }
    ],
    filterable: true,
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO", hireDate: new Date(2012, 2, 3) },
        { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering", hireDate: new Date(2012, 7, 13) }
      ],
      schema: {
        model: {
          fields: {
            hireDate: { type: "date" }
          }
        }
      }
    }
  });
</script>
In this article
Not finding the help you need?