Customize Null Text for Checkbox Filter mode

Updated on Jun 17, 2026

Environment

Product Version	2019.3.1023
Product	Progress® Kendo UI® Grid for jQuery

Description

How can I customize the null option's text in the Checkbox filter menu?

Solution

You can add the columns.filterable.itemTemplate option and either change the text or completely hide the null value as an option:

Hide the null option from the filter menu

The following example uses a custom itemTemplate that omits the checkbox item when the cell value is null, effectively hiding it from the filter list.

    <div id="grid"></div>
    <script>
      var data = [
        { id: 1, name: "Fred", key: 1, value: "Green" },
        { id: 2, name: "Jed", key: 11, value: null },
        { id: 3, name: "Red", key: 2, value: "Doe" },
        { id: 4, name: null, key: 23, value: "Bleh" },
        { id: 5, name: "Ed", key: 3, value: "Toast" },
        { id: 6, name: "Zed", key: 4, value: "Smith" },
        { id: 7, name: "Ed", key: 41, value: null }
      ];

      $(function() {

        var commonCheckboxTemplate = function(e) {
          return "#if(data.all || data." + e.field + "){#" +
            "<div><label><input  type='checkbox' name='"+ e.field +"' value='#= data." + e.field + "#'><span>#= data.all || data." + e.field + " # </span></label></div>" +
            "#}#";
        };


        var dataSource = new kendo.data.DataSource({
          data: data,
          schema: {
            model: {
              fields: {
                id: { type: "number" },
                name: { type: "string" },
                key: { type: "number" },
                value: { type: "string" }
              }
            }
          }
        });

        var grid = $("#grid").kendoGrid({
          dataSource: dataSource,
          sortable: true,
          filterable: true,
          columns: [
            {field: "id", title: "Id"},
            {
              field: "name",
              title: "Name",
              filterable: { multi: true, itemTemplate: commonCheckboxTemplate }

            },
            {field: "key", title: "Key"},
            { field: "value", title: "Value",
             filterable: { multi: true, itemTemplate: commonCheckboxTemplate }
            }
          ]
        });
      });
    </script>
    </div>

Customize null option text in the filter menu

The following example uses a custom itemTemplate that replaces null cell values with the label No Value in the filter checkbox list.

    <div id="grid"></div>
    <script>
      var data = [
        { id: 1, name: "Fred", key: 1, value: "Green" },
        { id: 2, name: "Jed", key: 11, value: null },
        { id: 3, name: "Red", key: 2, value: "Doe" },
        { id: 4, name: null, key: 23, value: "Bleh" },
        { id: 5, name: "Ed", key: 3, value: "Toast" },
        { id: 6, name: "Zed", key: 4, value: "Smith" },
        { id: 7, name: "Ed", key: 41, value: null }
      ];

      $(function() {

        var commonCheckboxTemplate = function(e) {
          return "<div><label><input  type='checkbox' name='"+ e.field +"' value='#= data." + e.field + "#'><span>#= data.all || (data." + e.field + "?data." + e.field + ": 'No Value') # </span></label></div>"; 
        };


        var dataSource = new kendo.data.DataSource({
          data: data,
          schema: {
            model: {
              fields: {
                id: { type: "number" },
                name: { type: "string" },
                key: { type: "number" },
                value: { type: "string" }
              }
            }
          }
        });

        var grid = $("#grid").kendoGrid({
          dataSource: dataSource,
          sortable: true,
          filterable: true,
          columns: [
            {field: "id", title: "Id"},
            {
              field: "name",
              title: "Name",
              filterable: { multi: true, itemTemplate: commonCheckboxTemplate }

            },
            {field: "key", title: "Key"},
            { field: "value", title: "Value",
             filterable: { multi: true, itemTemplate: commonCheckboxTemplate }
            }
          ]
        });
      });
    </script>