Kendo Grid - How to set different column label in column menu

Question

Have a look at this fiddle

var _grid = $("#grid").kendoGrid({
   dataSource: _peopleDataSource,
   filterable: true,
   columnMenu: true,
   columns: [
    {
        field: "id",title: " ",width: 10
    },
    {
        field: "name",title: "Name",width: 40
    },{
        field: "roleTitle",title: "Role",width: 50
    }
   ],
   editable: true
}).data("kendoGrid");

The column for Id is not having column title. However, inside grid column menu, I need to show the column name as Id.

I am not finding anything on kendo documentation. Any idea how I can achieve this?

Lars Höppner Lars Höppner · Accepted Answer · 2013-11-19T13:05:29

I would suggest setting the title field to "Id" and using an empty headerTemplate:

var _grid = $("#grid").kendoGrid({
    dataSource: _peopleDataSource,
    filterable: true,
    columnMenu: true,
    columns: [
        {
            field: "id",
            headerTemplate: "",
            title: "Id",
            width: 10
        },
        {
            field: "name",
            title: "Name",width: 40
        },{
            field: "roleTitle",
            title: "Role",width: 50
        }
    ],
    editable: true
}).data("kendoGrid");

That way, the column name will not show in the header, but will be listed in the column menu.

See example: http://jsfiddle.net/lhoeppner/74LvK/

Kendo Grid - How to set different column label in column menu

1 Answers