Navigation Content Template Width

1 Answer 10 Views
Navigation
Alfred
Top achievements
Rank 1
Alfred asked on 07 Sep 2021, 05:31 AM

I want to have nodes in multi columns.

It seems to me that there is no such settings.  So I use the Content Template.  However, I found that the content template width cannot be set.

How can I set the content template width in code behind? and in aspx?

BTW, it is great if the nodes can be set in multi columns.  It will be nice if it is included in next release.

Thanks.

Alfred

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 09 Sep 2021, 10:46 AM

Hi Alfred,

I am afraid there is no multi columns option for the Navigation control. By default, it has items (Nodes) next to each other, but you can create Templates and build a structure of your choice. However, if you have a good idea for a new feature, you can create a Feature Request in our Feedback portal and share the details of your idea. 

 

As for the width of the Templated node, yes you can change it. Every HTML element can be styled differently. You just need to override the built-in styles.

Here is an example:

html body .radPopup.rnvPopup.rnvContentTemplate {
    width: 300px !important;
}

 

Result

For more details, I would suggest inspecting the HTML elements and the styles applied to them. You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

 

Creating Templates server-side is not specific to Telerik, you will need to follow the generic ASP.NET approach. You can create a class that inherits the ITemplate interface

public class MyContentTemplate : ITemplate
{
    public void InstantiateIn(Control container)
    {
        var txtBox = new TextBox() { ID = "TextBox", Text = "Some Text" };

        container.Controls.Add(txtBox);
    }
}

 

In the Page_Init event, you can then assign this to a Node.

protected void Page_Init(object sender, EventArgs e)
{
    RadNavigation1.Nodes[1].ContentTemplate = new MyContentTemplate();
}

 

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Navigation
Asked by
Alfred
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or