Customized Column Menu

[Xavier]

I would like to achieve the following with the Kendo Grid

1. Add a column menu to only one column

2. Remove all the default column menu items

3. Add two custom menu items

I would like to respond to the column menu items with a javascript function that invokes a grid refresh with a qualifier parameter. 

Any examples on how to accomplish the above tasks?  

Attached image illustrates what I'm looking for. 

Thanks in advance

[Tsvetina]

Hi Xavier,

It would be easier to create a context menu of your own, instead of doing so much customization on the column menu. You can add an icon to the given column header using a headerTemplate and create a ContextMenu of your own. Here is a sample Dojo with such implementation:

http://dojo.telerik.com/@tsveti/EyiZo/5

Regards,
Tsvetina
Progress Telerik

[Xavier]

Thank you so much for that example? May I ask how that would look using Kendo MVC? 

[Tsvetina]

Hello Xavier,

Here is a sample MVC implementation, based on the remote binding demo of the Grid:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:d}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity).HeaderTemplate("<span id='menuTarget' class='k-icon k-i-more-vertical'></span><a class='k-link' href='#'>Ship City</a>");
    })
    .Pageable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
)

@(Html.Kendo().ContextMenu()
            .Name("context-menu-events")
            .ShowOn("click")
            .Target("#grid")
            .Filter("#menuTarget")
            .Items(items =>
            {
                items.Add()
                    .Text("Item1");

                items.Add()
                     .Text("Item2");
            })
            .Events(e => e.Select("select"))
)
<script>

    function select(e) {
        alert("Selected: " + e.item.innerText);
    }
</script>
<style>
    #menuTarget {
        float: right;
        margin: -.5em -.6em -.4em 0;
        padding: .5em .2em .4em;
        position: relative;
        z-index: 1;
        cursor: pointer;
    }
</style>

Regards,
Tsvetina
Progress Telerik