how to augment templates of kendo menu control

[Roger]

I build a menu using a data source to supply the items.  The data source is just an array of objects that have text, url, and items properties (for sub menus)

Subsequently, i want to select some menu item and apply some API function to it, like say enable.
To do so, I need to first find the particular menu item of interest.  It would be nice if the menu item had an ID property. Its easy enough to add that property to my data source, but it doesn't carry through when the menu is rendered.

And, it is pretty easy to see the change that i would like to make to the menu's item template. Just add something like this:
     #= item.id ? 'id=\"'+item.id+'\"' : '' # 
to the item member of the templates object in kendo.menu.js

Problem is, the templates object is a function scoped "private" variable and I can't really see any good way to override or augment Menu to achieve this.

Any suggestions?

Thanks 
roger

[Kamen Bundev]

Hi Roger,

Yes, you can't set the ID of the item currently, as there are other means to find the needed item (through a CSS class or through the passed item in a select event). As a workaround you can use the provided cssClass property to select your items or alternatively you can initialize your Menu dynamically using simple HTML (though not officially supported) - thus you can set any attributes to the items. Check this jsBin for some samples.

Regards,
Kamen Bundev
the Telerik team

[Roger]

Ah, I can use the cssClass property on my dataSource items to locate and select them.  Perfect.

Now, for the complaining...

I spent significant time trying to figure out the menu API from the samples. (http://demos.kendoui.com/web/menu/index.html) and from the documentation (http://docs.kendoui.com/api/web/menu)

Now, if i had known that i was looking for cssClass, i could have found it in the documentation, as there is one passing reference to it under the append method. 

I never found the Getting Started page (http://docs.kendoui.com/getting-started/web/menu/overview) that also seems to have a good overview.  Again, easy to find if you know you're looking for the cssClass keyword. Maybe a link to that page from the documentation and/or samples would be helpful.

But instead, stuck with trying to figure this out from the demo/samples page API section, where i was confounded, shocked, and horrified by the code that is computing the N.M location of a given target menu item and then using that to try to find the item with a jquery search.   You guys really need to update that sample to use the new cssClass property to tag and locate items.  I see it was only added very recently.

Thanks for the tip on cssClass.
roger

[Kamen Bundev]

Hi Roger,

Thanks for the suggestion, the API demo surely needs an update to reflect some new features - we will do that for the next release or the service pack. As for the Getting Started <-> API docs links - there usually are related document links at the bottom of the left navigation menu, however our documentation site developers currently investigate why they disappear from time to time.

Greetings,
Kamen Bundev
the Telerik team