Adding Icon marker on previously selected menu item

[Ryan]

Hi All,

How to add an Icon marker on my previously selected item. Let say I have default Settings to show 20 rows per page. When I navigate on the menu, it should have an icon in front of the item. If I select 50, the next time I navigate on the menu, 50 has now the icon.

Please see attached.

Thanks,

Ryan

[Martin]

Hello Ryan,

You can do that in the select event of the Menu by prepending a span that will hold the icon.

function onSelect(e) {
    var selected = e.item;
    if ($(".k-i-check").length === 0) {            
        $(selected).children().first().prepend("<span class='k-icon k-i-check'></span>")
    } else {
        $(".k-i-check").remove();
        $(selected).children().first().prepend("<span class='k-icon k-i-check'></span>")
    }
}

Let me know if you have any questions regarding the above.

Regards,
Martin
Progress Telerik

[Ryan]

Nice it works! but it seems like select is not firing. Please note that Im using menu inside grid as a template.

@(Html.Kendo().Grid<UsersList>
                                ()
.ToolBar(t =>
                                {
                                    t.ClientTemplateId("GridToolbarTemplate");
                                })
)

<script id="GridToolbarTemplate" type="text/x-kendo-template">
                    <div class="menuBtnContainer">
                        <ul id="menu">
                            <li>
                                <a href="\\#" class="k-link k-button k-button-icon" title="Menu" style="font-family: verdana,arial,sans-serif; font-size: 12px;"><span class="k-icon k-i-menu" style="padding-left:3px;"></span></a>
                                <ul>
                                    <li><span class='k-icon k-i-check'></span>FB Users</li>
                                    <li><span class='menuSpace'></span>Twitter Users</li>
                                </ul>
                            </li>
                        </ul>
                    </div>

</script>

 

<script> $("#menu").kendoMenu({ select: function(e) {alert('test');}});</script>

 

Also how to dynamically populate the menu via javascript or jquery. need to populate it on the fly.

Thanks for your help.

 

[Martin]

Hello Ryan,

The select event is not triggered because the Menu is not getting initialized. Could you please put the Menu initialization in the document.ready function?

As for populating the Menu, you can add/remove/insertBefore/insertAfter items using the API methods. If you wish to replace the dataSource entirely, you can try the setOptions method, or you can destroy the Menu, and reinitialize it with new options.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik