Customized Column Menu

4 posts, 0 answers
  1. Xavier
    Xavier avatar
    9 posts
    Member since:
    Feb 2014

    Posted 05 Sep 2017 Link to this post

    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

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 07 Sep 2017 Link to this post

    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.
  3. Xavier
    Xavier avatar
    9 posts
    Member since:
    Feb 2014

    Posted 07 Sep 2017 in reply to Tsvetina Link to this post

    Thank you so much for that example? May I ask how that would look using Kendo MVC? 
  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 12 Sep 2017 Link to this post

    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.
Back to Top