Grid Open Filter Menu Upon Initialization

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

How can I programmatically open the filter menu and focus its input when the Grid first loads?

Solution

Use the dataBound event of the Grid to open the filter menu as soon as the Grid has finished loading.

    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>

    <div id="grid"></div>

    <script>
      let initial = true;
      $(document).ready(function() {
        $("#grid").kendoGrid({
          dataSource: {
            data: createRandomData(50),
            schema: {
              model: {
                fields: {
                  City: { type: "string" },
                  Title: { type: "string" },
                  BirthDate: { type: "date" }
                }
              }
            },
            pageSize: 15
          },
          height: 550,
          scrollable: true,
          filterable: true,
          pageable: true,
          dataBound: function(e) {
            let grid = e.sender;

            if(initial) {
              initial = false;
              // Find the filter menu component using the name of the field.
              let titleFilterMenu = grid.thead.find("[data-field='Title']").data("kendoFilterMenu");
              titleFilterMenu.one("open", (e) => {
                // When the menu opens, focus the input.
                e.container.find("input").focus();
              });
              // Click on the filter icon to open the menu.
              titleFilterMenu.link.click();
            }
          },
          columns: [
            {
              title: "Name",
              width: 160,
              filterable: false,
              template: ({ FirstName, LastName }) => `${FirstName} ${LastName}`
            },
            {
              field: "Title",
              title: "Some Title",
              filterable: {
                ui: titleFilter,
                extra: false
              }
            },
            {
              field: "BirthDate",
              title: "Birth Date",
              format: "{0:MM/dd/yyyy HH:mm tt}",
              filterable: {
                ui: "datetimepicker"
              }
            }
          ]
        });
      });

      function titleFilter(element) {
        element.kendoAutoComplete({
          dataSource: titles
        });
      }
    </script>