[Solved] Using JQuery to get the menu Object

[Reid]

Hello I am trying to apply a Telerik Theme to a Menu.  My plan is to using the DocumentReady method of JQuery and try to set it that way.

I used this code from this link:
Telerik MVC Web Demo

And the code does not work.  getMenu returns null.  On that page there is also the drop down for selecting the theme.  That is what I am after, no reference to that functionality at the above link.

Can someone give me an example of getting the MenuObject (Named "Menu") on the View?  And if you havea link to an example of appying themes I would appreciate it. 

Thanks,

Reid

[Dimo]

Hello Reid,

In order to obtain reference to the Menu client object, it has to be initialized first. In other words, your code is probably executed too early. Either place it after the ScriptRegistrar (if executed automatically), or call it after the registrar, or for example use the Menu's OnLoad event.

On a side note, I am not sure how is getting the Menu object related to themes.

The theme selector in our demos is a custom widget that is created on the client. You can inspect its code if you install the demo site locally and go through the files:

Views / Shared / Site.Master
Extensions / HtmlHelpersExtensions.cs

Views / Shared / Examples.Master
Scripts / telerik.examples.js


Regards,
Dimo
the Telerik team

[Reid]

Hello Dimo,

First of all I should give you more context, I am creating a stand alone solution for proof of concept for my client and am referring to the Demos provided when possible.

I am not able to get my head around the ScriptRegistrar part.  Should we include all includes for style sheets and JavaScript in the Site.Master?  That is the approach I have allways taken in the past.  Not sure for instance, do we call the Render() method of the XXRegistrars?

The menu on the page view works in that it drops down the items but I have two questions:

1) At this point the "Theme Selecting" widget does not display correctly that I am trying to implement.  (see attached screen shot)  It does not have the drop down and displays in one vertical column.  I assume there is a style associated with it that I can assign to it's div container?

2) At the point the user selects the theme, how do you find the menu (or in a perfect world, all Telerik controls) in JavaScript and assign the selected theme?


Your answers are much appreciated.

Thanks!

Reid

[Dimo]

Hello Reid,

Generally, you are not obliged to have a StyleSheetRegistrar and a ScriptRegistrar in the master page, however, if you are registering (mostly) the same CSS and JS files in all pages, this is the most reasonable approach.

Whether or not to use Render() depends on your code blocks. <% %> requires Render(), while <%= %> does not. Also, you can have several ScriptRegistrars, but only one of them should have a Render statement (or a <%= code block).

1. You are either missing some CSS classes in the HTML output, or you have not registered all required CSS styles that are provided in telerik.examples.css. I cannot provide more specific advice based on the provided information, but you can inspect the skin selector on our demo site and see what styles it has applied and which of them are missing in your case.

2. The new theme is applied after a page reload and a change in a query string parameter. This can be seen in the telerik.examples.js file - pay attention to the first 100 lines.

Did you install the demo site locally, as advised? This will help you better understand how the skin selector works. Please note that this is a custom widget and really a product of ours. Let us know if you need more component-related information.

Regards,
Dimo
the Telerik team

[Reid]

Hello Dimo,


Thank you for clarifying the Render() topic.  I just replied to your post in another thread forgetting that the theme is appied using a query string.

Thanks again,

Reid