How do you customize kendoUI Grid Column Menu for Mobile

5 posts, 0 answers
  1. Joseph
    Joseph avatar
    6 posts
    Member since:
    Jan 2016

    Posted 06 Feb 2016 Link to this post

    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?

  2. Joseph
    Joseph avatar
    6 posts
    Member since:
    Jan 2016

    Posted 06 Feb 2016 in reply to Joseph Link to this post

    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?
  3. Joseph
    Joseph avatar
    6 posts
    Member since:
    Jan 2016

    Posted 09 Feb 2016 Link to this post

    Anyone have any ideas?
  4. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 11 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Joseph
    Joseph avatar
    6 posts
    Member since:
    Jan 2016

    Posted 11 Feb 2016 in reply to Rosen Link to this post

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