This is a migrated thread and some comments may be shown as answers.
Customized Column Menu
3 Answers 149 Views
This is a migrated thread and some comments may be shown as answers.
Xavier
Top achievements
Rank 1
Xavier asked on 05 Sep 2017, 08:23 PM

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

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 07 Sep 2017, 01:34 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Xavier
Top achievements
Rank 1
answered on 07 Sep 2017, 04:53 PM
Thank you so much for that example? May I ask how that would look using Kendo MVC? 
0
Tsvetina
Telerik team
answered on 12 Sep 2017, 08:40 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Xavier
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Xavier
Top achievements
Rank 1
Share this question
or