Morris Development

Custom System Development and Integration

Kendo Context Menus

When developing online databases, it’s often frustrating to lose the right-click ability that a normal desktop system would have. Instead, the user is presented with a bunch of options that are unrelated to the system – or things you’d prefer them not to have at all! Kendo offers a Context Menu feature that simple and straightforward.

Telerik has a nice page here: http://demos.telerik.com/kendo-ui/menu/context-menu that outlines the feature, but I find it best to start with the most basic rather than trying to show the full extent of the capabilities.

First, make sure you’ve got all the standard kendo includes in your header:

Then you’ve got to add in a div where you want the context menu to be in-effect.

Then create a context menu using an unordered list

Finally, add the script to your on-doc-ready



        var initMenu = function () {       
            menu = $("#context-menu").kendoContextMenu({
                orientation:  "vertical",
                target: "#myArea",             
                animation: {
                    open: { effects: "fadeIn" },
                    duration: 500
                },
                select: function(e) {
                    // Do something more complicated on select
                }
            });
        };

        initMenu();

That’s it. Seriously, it’s that easy.

Now, if you want, there are a LOT of ways you can modify the context menu dynamically, but I always find it best to get started with the basics.