[SOLVED] How I can increase the width of the filter menu in the column menu in Kendo Grid?

How I can increase the width of the filter menu in the column menu in Kendo Grid?

I know about the possibilities of using filterMenuInit. But this event not fired when I use columnMenu.

I tried to use columnMenuOpen and change the style for elements inside .k-animation-container, but unfortunately unsuccessful.

Can anybody help me?

$("#grid").kendoGrid({
  columns: [{
      field: "id"
    },
    {
      field: "name"
    },
    {
      field: "phone"
    }
  ],
  dataSource: [{
      name: "Jane Doe",
      id: 1,
      phone: "88443558741"
    },
    {
      name: "John Doe",
      id: 2,
      phone: "88443558751"
    }
  ],
  filterable: true,
  columnMenu: true,
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>
<div id="grid"></div>

Solution

Something like this?

.k-filter-menu-container {
     width: 200px;
}

Example: filter menu width