how to add menu inside a grid column using template

[Pradeep]

how to add menu inside a grid column using template .. ??

[Dimo]

Hello Pradeep,

You can use the following approach:

$("#grid").kendoGrid({
    dataBound: function (e) { e.sender.tbody.find(".myMenu").kendoMenu(); },
    scrollable: false,
    columns: [{
        }, {
            title: "Menu",
            template: '<ul class="myMenu"><li>item 1<ul><li>sub item 1</li></ul></li></ul>'
        }
    ]
});

There are several things to note:

1. You can't use an ID for the Menus, unless you make sure the ID is different for each row.
2. If the Menu will have expandable sub items, then Grid scrolling should be disabled, and the following CSS rule should be added:

#grid td
{
    overflow: visible;
}

3. If you want to prevent the Menu from expanding horizontally to 100% of the cell width, then use:

#grid .k-menu
{
    display: inline-block;
    border-right-width: 0;
}

Regards,
Dimo
Telerik