<%
@ Register TagPrefix="dnn" TagName="RADMENU" Src="~/DesktopModules/r.a.d.menu/RadMenu.ascx" %>
Part 2, Add RADMENUAJAX to your skin
You cannot get the results you want without seeing the link to the skinning whitepaper below. Basically, you will add this info to where you call in your RADMENU into your skin. With the classic version, you used to add these into the skin.xml, but not with ASP.NET AJAX version of RADMENU. Below is a link to the Telerik whitepaper with all the good little things you can do in DNN with radmenu. Everything from animations, separators, etc, etc.
Now this is important: I read that DotNetNuke wont parse this info properly. So, you'll have to add it directly to your .ascx manually as I did. Parse your skin out, go up and grab the ascx and edit this in. Basically, it's better to just skin that way anyway. Take a look at how mine looks seen below.
Telerik Skinning API whitepaper: http://www.telerik.com/help/aspnet/menu/menu_apireference.html
<dnn:RADMENUAJAX runat="server" EnableEmbeddedSkins="false" id="dnnRADMENU" Skin="Vista" ExpandAnimationType="InOutElastic" ExpandAnimationDuration="300" CollapseAnimationType="none" childGroupSeparator="*SkinPath*/Menu/dnn/img/child_sep.gif" childGroupSeparatorCssClass="childseparator" HeaderSeparator ="*SkinPath*/Menu/dnn/img/nav-sep.gif" HeaderSeparatorCssClass="headerseparator" />
Save the document and upload it back, refresh your site. Should be working.
Part 3) Let RADMENU AJAX FOR DNN see your style
In order for your solution to work, Telerik says you'd need to link to a properly named css file with the skin name. Except, that isn't a good solution in DNN. See, you cannot just go linking to external resources in your ascx skin because it will render outside of the header and your skin won't validate according to w3c standards.
Instead, just include (combine) the CSS entries from your menu style document into your skin.css and comment the section so you can find it easily later.
VERY IMPORTANT, the classes are SUFFIXED with the skin name. Suffix means FOLLOWING. You can use the internal styles that are hidden away in the telerik UI DLL or make your own. It can be named whatever you like, but you must suffix your classes with that name and that name must match what is set when you reference RADMENU (see step 2 below)
ex: .RadMenu_Vista .
.Radmenu goes before the underscore. Now, RADMENU is using psudo classes, which are a little different than what you might be used to. Have a look at my CSS below and you will see what I mean.
Here is a link describing all the styles that will absolutely work for you in DNN as they did for me:
http://www.telerik.com/help/aspnet-ajax/menu_appearancecssselectors.html
Here is the complete CSS code behind my menu, and yes, it sits in my skin.css.
/* <RadMenu / Vista> */.RadMenu_Vista .headerseparator {background-image:url(Menu/dnn/img/nav-sep.gif);width:1px;height:50px;}
.RadMenu_Vista .rmLink {font-family:Tahoma;font-size:14px;font-weight:lighter;}
/* <Root items> */
.RadMenu_Vista .rmVertical {width:248px;}/* </Root items> */
/* <Submenu items> */
.RadMenu_Vista .rmVertical .rmSeparator {height: 1px; line-height: 1px; background-image:url(Menu/dnn/img/child_sep.gif);height:2px;background-repeat:no-repeat;margin-left:20px; }If you pasted my code above and got this far and yet nothing, then you probably forgot to put up images for your menu or change the css above to refect background colors instead of images. Get it done.
Now, time to make the sprite for this menu... ;-)
<
telerik:RadScriptManager ID="RadScriptManager1" runat="server"/>
<div id="RadTabDiv">
<telerik:RadTabStrip Style="position: absolute; top: 84px;" ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1" Height="100%" Width="100%">
<Tabs>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage Style="position: absolute; top: 134px;" ID="RadMultiPage1" runat="server" SelectedIndex="0">
<telerik:RadTextBox Runat="server">
</telerik:RadTextBox>
</telerik:RadMultiPage>
</div>
<div id="Next" style="padding: 20px; float:right">
<asp:Button ID="btnNext" runat="server" Text="Next" CssClass="Button" />
</div>
One of the user controls I am adding:
<%
@ Control Language="vb" AutoEventWireup="false" CodeBehind="QuestionTextbox.ascx.vb" Inherits="CSS.QuestionTextbox" %>
<%
@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<div style="height:50px">
<asp:Label ID="lblQuestion" runat="server" Text="Question:"/>
<asp:Label ID="lblQuestionText" runat="server" Text="??????"/>
<br />
<telerik:RadTextBox ID="txtAnswer2" runat="server" Width="200"/>
<telerik:RadComboBox Runat="server"></telerik:RadComboBox>
</
div>
My Code behind (if it helps). In this example I am hardcoding the Tabs and usercontrols but in the final app these will be dynamically generated via a list held in external data.
Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
AddTab(
"General")
AddTab(
"Check Nearby SCNs")
End If
AddControls()
End Sub
Private Sub AddTab(ByVal tabName As String)
Dim tab As New RadTab()
tab.Text = tabName
RadTabStrip1.Tabs.Add(tab)
Dim pageView As New RadPageView()
pageView.ID = tabName
RadMultiPage1.PageViews.Add(pageView)
End Sub
Private Sub AddControls()
Dim ProcessID As Integer = 20
Dim TaskID As Integer = 10
Dim Pageview As RadPageView = FindControl("ctl00$ContentPlaceHolder1$General")
Dim ucQuestion As UserControl = Page.LoadControl("UserControls/QuestionTextbox.ascx")
ucQuestion.ID =
"uc" & ProcessID & TaskID
Dim lblQuestionText As Label = ucQuestion.FindControl("lblQuestionText")
lblQuestionText.Text =
"What is your name?"
Pageview.Controls.Add(ucQuestion)
TaskID = 20
Dim ucQuestion2 As UserControl = Page.LoadControl("UserControls/Statement.ascx")
ucQuestion2.ID =
"uc" & ProcessID & TaskID
Pageview.Controls.Add(ucQuestion2)
TaskID = 30
Dim ucQuestion3 As UserControl = Page.LoadControl("UserControls/QuestionDropdown.ascx")
ucQuestion3.ID =
"uc" & ProcessID & TaskID
Pageview.Controls.Add(ucQuestion3)
TaskID = 50
Dim txt1 As New TextBox
txt1.Text =
"THIS IS THE TEXT"
Pageview.Controls.Add(txt1)
Dim Pageview2 As RadPageView = FindControl("ctl00$ContentPlaceHolder1$Check Nearby SCNs")
TaskID = 40
Dim ucQuestion4 As UserControl = Page.LoadControl("UserControls/QuestionTextbox.ascx")
ucQuestion4.ID =
"uc" & ProcessID & TaskID
lblQuestionText = ucQuestion4.FindControl(
"lblQuestionText")
lblQuestionText.Text =
"What is your name?"
Pageview2.Controls.Add(ucQuestion4)
Dim btnNext As Button = FindControl("ctl00$ContentPlaceHolder1$btnNext")
btnNext.Enabled =
True
End Sub
Protected Sub btnNext_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnNext.Click
Dim Pageview As RadPageView = FindControl("ctl00$ContentPlaceHolder1$General")
Dim ucQuestion As New UserControl
ucQuestion = Page.LoadControl(
"UserControls/QuestionTextbox.ascx")
ucQuestion.ID =
"uc" & Now
Dim lblQuestionText As Label = ucQuestion.FindControl("lblQuestionText")
lblQuestionText.Text =
"Time is: " & Now
Pageview.Controls.Add(ucQuestion)
End Sub
var comboBox = $telerik.findControl(parentElement, "RadComboBox1");
| <script type="text/javascript"> |
| function RowDblClick(sender, eventArgs) { |
| sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical()); |
| } |
| function nodeClicking(sender, args) { |
| if (sender.get_id().indexOf("tvAdjCategory") != -1) { |
| var comboBox = $find("<%= cboAdjCategory.ClientID %>"); |
| } |
| else { |
| var radGrid = $find('<%= gvWalletTransactions.ClientID %>'); |
| var comboBox = $telerik.findControl(radGrid.get_element(), "cboCategory"); |
| } |
| var node = args.get_node() |
| comboBox.set_text(node.get_text()); |
| comboBox.trackChanges(); |
| comboBox.get_items().getItem(0).set_value(node.get_text()); |
| comboBox.commitChanges(); |
| comboBox.hideDropDown(); |
| } |
| function StopPropagation(e) |
| { |
| if(!e) |
| { |
| e = window.event; |
| } |
| e.cancelBubble = true; |
| } |
| function OnClientDropDownOpenedHandler(sender, eventArgs) { |
| if (sender.get_id().indexOf("cboAdjCategory") != -1) { |
| var treeName = "tvAdjCategory"; |
| } |
| else { |
| var treeName = "tvCategory"; |
| } |
| var tree = sender.get_items().getItem(0).findControl(treeName) |
| var selectedNode = tree.get_selectedNode(); |
| if (selectedNode) |
| { |
| selectedNode.scrollIntoView(); |
| } |
| } |
| function OnLoad(sender, args) { |
| var combo = sender; |
| var input = combo.get_inputDomElement(); |
| input.onkeydown = onKeyDownHandler; |
| } |
| function onKeyDownHandler(e) { |
| if (!e) |
| e = window.event; |
| // handle all keys except tab (keycode 9) other keys can be captured |
| if (e.keyCode != '9') { |
| e.returnValue = false; |
| if (e.preventDefault) { |
| e.preventDefault(); |
| } |
| } |
| } |
| </script> |
Here's a sample of my grid:
| <telerik:RadGrid ID="gvWalletTransactions" runat="server" AllowSorting="True" meta:resourcekey="gvTransactions" |
| AutoGenerateColumns="False" skin="Vista" font-size="X-Small" GridLines="None" |
| AllowPaging="True"> |
| <MasterTableView DataKeyNames="TransactionID" GridLines="Both"> |
| <Columns> |
| <telerik:GridBoundColumn DataField="TransactionID" Display="False" |
| HeaderText="TransactionID" UniqueName="TransactionID" Visible="False"> |
| </telerik:GridBoundColumn> |
| <telerik:GridTemplateColumn DataField="TransactionDate" HeaderText="Date" |
| UniqueName="TransactionDate"> |
| <ItemTemplate> |
| <telerik:RadDatePicker ID="dtDate" runat="server" AutoPostBack="True" Skin="Vista" |
| Culture="English (United States)" ShowPopupOnFocus="True" Width="60px" |
| SelectedDate='<%# Bind("TransactionDate", "{0:d}") %>' EnableEmbeddedBaseStylesheet="False" CssClass="TextBoxAsLabel" > |
| <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" |
| ShowRowHeaders="false" FirstDayOfWeek="Sunday" /> |
| <DatePopupButton visible="False" HoverImageUrl="" ImageUrl="" /> |
| <DateInput DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" |
| EnableEmbeddedBaseStylesheet="False" CssClass="TextBoxAsLabel" AutoPostBack="True" SelectionOnFocus="SelectAll"> |
| </DateInput> |
| </telerik:RadDatePicker> |
| </ItemTemplate> |
| <ItemStyle HorizontalAlign="Center"/> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn DataField="Description" HeaderText="Description" |
| UniqueName="Description"> |
| <ItemTemplate> |
| <Telerik:RadTextBox ID="txtDescription" runat="server" width="250px" |
| Text='<%# Bind("Description") %>' CssClass="TextBoxAsLabel" Skin="Vista" |
| EnableEmbeddedBaseStylesheet="False" SelectionOnFocus="SelectAll" /> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn DataField="Amount" |
| HeaderText="Amount" UniqueName="Amount" SortExpression="Amount"> |
| <ItemTemplate> |
| <telerik:RadNumericTextBox ID="txtAmount" Runat="server" Skin="Vista" |
| Culture="English (United States)" Type="Currency" SelectionOnFocus="SelectAll" |
| Value='<%# Bind("Amount", "{0:C}") %>' CssClass="TextBoxAsLabel" Width="50px"> |
| </telerik:RadNumericTextBox> |
| </ItemTemplate> |
| <ItemStyle HorizontalAlign="Center"/> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn HeaderText="Category" UniqueName="Category" > |
| <ItemTemplate> |
| <telerik:RadComboBox ID="cboCategory" runat="server" Skin="Vista" |
| OnClientDropDownOpened="OnClientDropDownOpenedHandler" |
| meta:resourcekey="cboCategory" Width="110px" DropDownWidth="200px"> |
| <ItemTemplate> |
| <telerik:RadTreeView ID="tvCategory" runat="server" Skin="Vista" |
| OnClientNodeClicking="nodeClicking" > |
| </telerik:RadTreeView> |
| </ItemTemplate> |
| <Items> |
| <telerik:RadComboBoxItem Value="0"/> |
| </Items> |
| </telerik:RadComboBox> |
| </ItemTemplate> |
| <ItemStyle Wrap="False" HorizontalAlign="Center"/> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn HeaderText="Project" UniqueName="Project" |
| DataField="Project"> |
| <ItemTemplate> |
| <telerik:RadComboBox runat="server" ID="cboProject" Skin="Vista" DropDownWidth="200px" |
| meta:resourcekey="cboProject" AppendDataBoundItems="true" Width="100px"> |
| <Items> |
| <telerik:RadComboBoxItem Value="0" /> |
| </Items> |
| </telerik:RadComboBox> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="Account" HeaderText="Account" |
| DataField="ToFromAccount"> |
| <ItemTemplate> |
| <telerik:RadComboBox runat="server" ID="cboAccount" Skin="Vista" Width="100px" |
| DropDownWidth="200px" meta:resourcekey="cboAccount" AppendDataBoundItems="true" > |
| <Items> |
| <telerik:RadComboBoxItem Value="0" /> |
| </Items> |
| </telerik:RadComboBox> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn DataField="Flagged" UniqueName="Flagged"> |
| <ItemTemplate> |
| <asp:ImageButton ID="btnFlagged" runat="server" meta:resourcekey="btnFlagged" onclick="imgFlagged_Click" /> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| </Columns> |
| <EditFormSettings UserControlName="~/TransactionPages/UserControls/TransactionDetail.ascx" EditFormType="WebUserControl"/> |
| <HeaderStyle Font-Bold="True" HorizontalAlign="Center" Font-Italic="False" Font-Overline="False" Font-Size="Medium" Font-Strikeout="False" Font-Underline="False" /> |
| </MasterTableView> |
| <ClientSettings EnableRowHoverStyle="True"> |
| <Selecting AllowRowSelect="True" /> |
| <ClientEvents OnRowDblClick="RowDblClick" /> |
| </ClientSettings> |
| </telerik:RadGrid> |