How to Make Column in Kendo Grid Not Removable in Column Menu

0
votes

I have a column that I want always to be rendered in the grid, but I have other columns that I want to allow users to toggle on and off. I'm struggling to find a setting on the kendo-grid-column component that would remove it as an option.

enter image description here

I want to remove the "Actions" column from the column menu. I've tried editable false, locked, etc not finding something that will remove it from the column selector options.

  <kendo-grid-column
    [width]="200"
    [columnMenu]="false"
    [resizable]="false"
    [editable]="false"
    id="actions-col"
    field="actions"
    title="Actions"
  >
2
kendo-uikendo-grid

2 Answers

0
votes

I don't know any property that will allow to do this directly. However, you can still use the columnMenuInit event to hide some menu items:

columnMenuInit(e) {
   //Hides the ShipCountry column
   //HiddenMenuItem set display: none!important
   e.container.find('li.k-columns-item').find('input[data-field="ShipCountry"]').closest("li").addClass("HiddenMenuItem");
}

In this example, I can't use CSS display none directly because Kendo will overwrite it and we can't remove it from the DOM since the grid will raise an error if it can't find it... so that's why I'm using the HiddenMenuItem class.

0
votes

Define menu inside column object and set it to false:

$("#grid").kendoGrid({
  columns: [
    { field: "id", menu: false },
    { field: "name",  menu: false },
    { field: "age" }
  ],
  columnMenu: true,
  dataSource: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ]
});

Example: Columns menu