As for example: 1) the skinchooser in this demo -http://demos.telerik.com/aspnet-ajax/navigation/mobile-and-touch-support/responsive-behavior/defaultcs.aspx?product=navigation 2) the top left corner menu in this demo: http://demos.telerik.com/aspnet-ajax/mobile.aspx 3) http://mobify.github.io/pikabu/
A Vertical Orientation option would make the control usable as a side bar / sub navigation menu. Currently, we're using a PanelBar to achieve this functionality, but it lacks the Adaptive behavior of the Navigation control.
I need to specify the Target as well as the NavigateUrl and Text when programmaticlly data binding. Thanks.
Please add "AppendDataBound" property to the RadNavigation control.
When building Responsive webpages the Telerik navigation control to use is RadNavigation because it properly resizes when the screen is rotated unlike the RadMenu. However RadNavigation doesn't seem to have a way to see my current location within a website which is where the breadcrumb come is. The addition of breadcrumb integration with RadNavigation would benefit Responsive web designer using the Telerik controls.
I'd like to see the following enhancements of the RadNavigation control: 1. Ability to make some nodes stick to the top menu even in collapsed mode.. That way you can have e.g. a logo in the top-left of the navigator. 2. Ability to right-align items. Both features can be seen in the bootstrap NavBar..
RadNavigation can be setup to expand on hover (see demo - http://demos.telerik.com/aspnet-ajax/navigation/functionality/expand-on-hover/defaultcs.aspx). However, when the menu is collapsed to the More (hamburger) menu this functionality is lost. If the nodes don't have a navigate url they can be clicked to open the sub menu, but if they are set to navigate then clicking will navigate instead of opening the submenu.
1. Click the ComboBox
2. Select an item in its dropdown
3. Expected: no exception on selection, actual: A "Selection out of range" exception is thrown.
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
public partial class ComboBoxNavigation : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
private DataTable CreateTestTable()
{
DataTable table = new DataTable();
table.Columns.Add("Text");
table.Columns.Add("Value");
table.Columns.Add("test");
table.Rows.Add("Item1", "1", "aaa");
table.Rows.Add("Item1", "1", "aaa");
table.Rows.Add("Item1", "1", "aaa");
return table;
}
protected void rcbStaff_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
RadComboBox rcbUser = sender as RadComboBox;
rcbUser.DataSource = CreateTestTable();
rcbUser.DataTextField = "Text";
rcbUser.DataValueField = "Value";
rcbUser.DataBind();
}
protected void rcbStaff_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
}
}
<telerik:RadNavigation ID="RadNavigation1" runat="server">
<Nodes>
<telerik:NavigationNode Text="Home" />
<telerik:NavigationNode Text="Candidate" />
<telerik:NavigationNode Text="Preliminary Candidate" />
<telerik:NavigationNode Text="StaffSearch" CssClass="staffSearchWrapper rootTemplate">
<NodeTemplate>
<telerik:RadComboBox ID="rcbStaff"
AutoPostBack="true"
runat="server"
EnableLoadOnDemand="True"
OnItemsRequested="rcbStaff_ItemsRequested"
OnSelectedIndexChanged="rcbStaff_SelectedIndexChanged"
>
</telerik:RadComboBox>
</NodeTemplate>
</telerik:NavigationNode>
</Nodes>
</telerik:RadNavigation>
One workaround is to remove nodes that are not visible, e.g., in the Page_Load event: RadNavigation1.Nodes.RemoveAll(x => !x.Visible); Another workaround is to remove the HTML of hidden nodes. Note that this will not affect the nodes collections and they will still be present. Invoking operations or methods on such removed nodes can cause errors. <telerik:RadNavigation runat="server" ID="RadNavigation1" OnClientLoad="OnClientLoad"> <Nodes> <telerik:NavigationNode Text="first"></telerik:NavigationNode> <telerik:NavigationNode Text="second" Visible="false"></telerik:NavigationNode> <telerik:NavigationNode Text="third"></telerik:NavigationNode> </Nodes> </telerik:RadNavigation> <script> function OnClientLoad(sender, args) { var nodes = sender.get_allNodes(); var indicesToRemove = []; for (var i = 0; i < nodes.length; i++) { if (nodes[i].get_element().style.display == "none") { $telerik.$(nodes[i].get_element()).remove(); } } } </script>
For a Radmenu, when the current URL matches the site node url in the SiteMapDataSource, the corresponding menu items are highlighted (marked as selected). This allows the user to see on the menu, where they are in the menu. RadNavigation does not support this functionality. I've added the functionality myself, however it's not elegant as the NavigationNode does not contain it's parent value. Here is how I resolved it. private void RadNavigation1_NodeDataBound(object sender, Telerik.Web.UI.NavigationNodeEventArguments e) { System.Web.SiteMapNode node = ((System.Web.SiteMapNode)e.Node.DataItem); e.Node.Attributes.Add("Key", node.Key); if (e.Node.NavigateUrl == Page.Request.CurrentExecutionFilePath.ToString()) { HighLightMenu(node); } } void HighLightMenu(System.Web.SiteMapNode node) { List<NavigationNode> nodes = (List<NavigationNode>)RadNavigation1.GetAllNodes(); // find navigation node based on site node Telerik.Web.UI.NavigationNode navNode = nodes.Find(n => n.Attributes["Key"] != null && n.Attributes["Key"] == node.Key); // Control ctrl = RadNavigation1.FindControl(navNode.ID); if (navNode != null) navNode.Selected = true; if (node.ParentNode != null) HighLightMenu(node.ParentNode); }