How do you customize kendoUI Grid Column Menu for Mobile

[Joseph]

I have a more detailed look at what I'm trying to do here (http://stackoverflow.com/questions/35158369/how-do-you-customize-kendoui-grid-column-menu-for-mobile), this is the only thing stopping me right now from using the GRID.

 After looking around for desktop mode I found how to modify the column menus.

 columnMenuInit: function (e) { console.log("menu init");var field = e.field; console.log(field);var menu = e.container.find(".k-menu").data("kendoMenu"); menu.append([{text: "Highlight", spriteCssClass: "k-i-custom", content: '<div class="colorpicker' + field + '"></div>'}]); $(".colorpicker" + field).kendoFlatColorPicker({ preview: false, value: "#000", change: select});};

 

However, this does not work for mobile when mobile:true is set for the grid (A.K.A adaptive rendering mode).  How would I customize the menu for the mobile version?

[Joseph]

Another way of asking my question is by refering to the documentation here (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-columnMenuInit), except how do I follow the example it provides but for the mobile version of the grid columns?

[Joseph]

Anyone have any ideas?

[Rosen]

Hello Joseph,

There is no Kendo Menu widget embedded in the column menu when mobile rendering is used. Thus, it will require a different approach than when non-mobile mode is used. For example functionality similar to the one demonstrated in the article you have reference could look similar to the following:

columnMenuInit: function(e) {
    $("<li><span class='k-link'>Custom</span></li>")
      .appendTo($(e.container).children().first())
        .click(function() {
        console.log("Custom is clicked");
        });
}

Regards,
Rosen
Telerik

 

 

[Joseph]

Thanks, this is what I was looking for! Much appreciated!