Edit this page

filterable Boolean |Object (default: false)

If set to true the user can filter the data source using the treelist filter menu. Filtering is disabled by default.

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

Example - enable and configure filtering

<div id="treeList"></div>
      height: "100em",
      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: {
        extra: false,
        messages: {
          and: "and",
          or: "or",
          filter: "Apply filter",
          clear: "Clear filter",
          info: "Filter by: ",
          isFalse: "False",
          isTrue: "True",
          selectValue: "Select category",
          cancel: "Reject",
          operator: "Choose operator",
          value: "Choose value"
        operators: {
          string: {
            eq: "Equal to",
            neq: "Not equal to",
            startswith: "Starts",
            endswith: "Ends",
            contains: "Contains",
            doesnotcontain: "Doesn't contain"
          number: {
            eq: "Equal to",
            neq: "Not equal to",
            gt: "Greater than",
            gte: "Greater than or equal to",
            lt: "Less than",
            lte: "Less than or equal to"
          date: {
            gt: "After",
            gte: "On or after",
            lt: "Before",
            lte: "On or before",
            eq: "On",
            neq: "Not equal"
          enums: {
            eq: "Equal to",
            neq: "Not equal to"
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article