Opening Filter Dropdown to the Left Side in Kendo Grid using jQuery

Environment

Property	Value
Product	Grid for Progress® Kendo UI®

Description

I want to open the filter dropdown of a Kendo Grid to the left side using jQuery. How can I achieve this?

Solution

To open the filter dropdown of a Kendo Grid to the left side, you can handle the columnMenuOpen event of the Grid. In the event handler, you can get a reference to the Kendo Menu and set its direction configuration option to the needed direction.

columnMenuInit: function(e){
    $('.k-column-menu .k-menu').data('kendoMenu').setOptions({
        direction: "top left"
    });
}

Below is a runnable example:

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

      var dataSource = new kendo.data.DataSource({
        transport: {
          read: {
            url: "https://demos.telerik.com/kendo-ui/service/products",
            dataType: "jsonp"
          }
        },
        pageSize: 10
      });

      var grid = $("#grid").kendoGrid({

          dataSource: dataSource,
          filterable: true,
          columnMenu: true,
          multi: true,
          selectable: true,  
            columnMenuInit: function(e){            
            $('.k-column-menu .k-menu').data('kendoMenu').setOptions({
             direction: "left"
            })
          },
          pageable: {
            pageSize: 5,
            input: true
          },
          columns: [
            {
              title: "Id",
              field: "ProductID",
              width: 70
            },
            {
              field: "ProductName", title: 'Title',
              width: "25%",
              attributes: {
                style: 'white-space: nowrap;'
              },
              filterable: {
                multi: true,
                extra: false,
                search: true,
                operators: {
                  string: {
                    eq: "Is equal to",
                    neq: "Is not equal to",
                    contains: "Contains"
                  }
                }
              }
            },
            "UnitsInStock",
            "UnitPrice"            
          ]
        });

    </script>