I want to implement a feature similar to the telerik theme feature available on their demo site. (I have a fully licenced copy of their controls), but I cant find any info on how to do this.
I have an MVC application, and in the _Layout.cshtml (which has no controller that I know of (i hope I am wrong)) I am trying to add a combo box populated with a list of available styles like this:
<section id="Login">
@if (Request.IsAuthenticated)
{
<section id="loginImage">
<img src="../../Content/Images/BlankPerson.jpg" />
</section>
<section id="loginText">
[ @Html.ActionLink("Log Off", "LogOff", "Account") ]
<br />
@User.Identity.Name!
@(
/* TELERIK COMBOBOX */
Html.Telerik().ComboBox()
.Name("cbxTheme")
.Placeholder("Select Theme...")
.SelectedIndex(0)
.ClientEvents(events => events.OnChange("cbxTheme_onChange"))
//.BindTo((IEnumerable<DropDownItem>)ViewData["Files"])
.Items(item =>
{
item.Add().Text("black");
item.Add().Text("common");
item.Add().Text("default");
item.Add().Text("forest");
item.Add().Text("hay");
item.Add().Text("metro");
item.Add().Text("office2007");
item.Add().Text("office2010black");
item.Add().Text("office2010blue");
item.Add().Text("office2010silver");
item.Add().Text("outlook");
item.Add().Text("rtl");
item.Add().Text("simple");
item.Add().Text("sitefinity");
item.Add().Text("sunset");
item.Add().Text("telerik");
item.Add().Text("transparent");
item.Add().Text("vista");
item.Add().Text("web20");
item.Add().Text("webblue");
item.Add().Text("windows7");
})
)
</section>
}
</section>
As directed by Telerik. We must include the following lines at the start and end of our view as follows:
<head>
@(
Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.css")
.Add("telerik.black.css").Combined(true).Compress(true)
.Add("telerik." + + ".css", ).Combined(true).Compress(true)
//.Add("telerik." + Html.GetCurrentTheme() + ".css").Combined(true).Compress(true)
//"javascript:cbxTheme_onChange()"
))
</head>
.
.
.
.
<body>
@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)))
</body>
Also I have a little bit of JQuery which works but I cant access it the way I need to and this is where my problem is:
<script>
function cbxTheme_onChange()
{
var selectedItemText = $("#cbxTheme").data("tComboBox").text();
var selectedItemValue = $("#cbxTheme").data("tComboBox").value();
alert(selectedItemValue);
return selectedItemText;
}
</script>
The function above actually does work and pops a message up with the selected item. No problem there.
The problem I am having is with this line of code in the head section as shown above:
@(
Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.css")
.Add("telerik.black.css").Combined(true).Compress(true)
.Add("telerik." + "SELECTED ITEM FROM COMBOBOX.TEXT HERE" + ".css", ).Combined(true).Compress(true)
//.Add("telerik." + Html.GetCurrentTheme() + ".css").Combined(true).Compress(true)
//"javascript:cbxTheme_onChange()"
))
Where it says “Selected Item from combobox.text here” the javascript function should be placing a string (which contains the name of the telerik style sheet to use. It should be working but it is not.
I even tried to address the combo box directly by saying:
.Add("telerik." + cbxTheme.SelectedItem.text + ".css", ).Combined(true).Compress(true)
which is how it is done on their site. But again it doesnt work.
Any help with this would be much appreicated. Thanks in advance.
The way Telerik does this on the demo site is by reloading the page and getting the theme from the querystring. Selecting a theme in the dropdown causes the page to be loaded with a url like this:
For example, in the tab strip examples, choosing the theme forest has this url.
The _Layout.cshtml file has this line (like you mentioned).
The Html.GetCurrentTheme() calls an extension method that gets the theme name from the querystring.
If you wanted to use your javascript cbxTheme_onChange() function, you could do something similar to the Telerik demo page by reloading the page with a url that has a querystring with the name of the theme and then using that to set the style.
Add the window.location.href to your javascript function cbxTheme_onChange().