New to Kendo UI for jQueryStart a free 30-day trial

Grid Open Filter Menu Upon Initialization

Environment

ProductProgress® 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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support