cloudscribe/cloudscribe.Web.Navigation

Can add new properties on navigation.xml ?

Closed this issue · 5 comments

Hi, actually i need to set a new properties on navigation for get him on my SideBar.cshtml but is it possible ?

an exemple :

<NavNode key="Saisie" parentKey="RootNode" controller="Home" action="Saisie" text="Saisie"> <Children> <NavNode key="TableauDeBord" parentKey="Saisie" controller="Home" action="TableauDeBord" text="Tableau de bord" icon="fa fa-tachometer"> <Children /> </NavNode> </Children> </NavNode>

have an idea ? Thanx for answer.

I'm working on a solution for this, I'll post here again soon when I've completed the work
specifically I am working on support for custom optional css class per node, custom optional icon css class per node and custom data-* attributes per node

I've completed the work and shipped a new nuget, and I've also updated the demo project to show an icon next to the About node. I've added some new dedicated properties that can be added from xml such as cssClass and iconCssClass
I updated a few views in the demo with helper methods to render the icon, my example uses glyphicons but you can use fontawesome the same way

I also added support for custom data-* attributes but actually nothing constrains the attribute name so it could be used for any attributes you want to add. if you view the source of the demo app you will see a couple of custom data- attributes on the Contact page node, see the navigation.xml file to see how I added that and also study the BootstrapTopNavWithDropdowns.cshtml and NavigationNodeChildDropdownPartial.cshtml to see how there is a helper to render the icon and a taghelper that can be used to bind a List (which is now a property on NavigationNode) which can render the custom attributes

I added the following properties on NavigationNode:

    public bool IsClickable { get; set; } = true;

    public string IconCssClass { get; set; } = string.Empty;

    public string CssClass { get; set; } = string.Empty;

    public string MenuDescription { get; set; } = string.Empty;

    public string Target { get; set; } = string.Empty;

    public List<DataAttribute> DataAttributes { get; set; }

all of which can be expressed from the xml file. note however that I did not illustrate use of all of them in the included views, but you could use them in custom views

Note that I have not updated the JsonTreeBuilder as I'm not using it myself but if there is demand for it I will do it or if someone wants to submit a pull request to update it to support the new properties that would be great

Hi and thanx for you're great work.

I've tried to get the properties then I put on navigation.xml " IconCssClass='fa fa-users' " and get this value like you but is didn't get anything on my NodeSideNavPartial.cshtml,

look : http://image.noelshack.com/fichiers/2016/30/1469440298-sans-titre.png

For a long time i think is my get method bad but i have seen the value is never field ... have an idea ?

xml is case sensitive, it should be camel case iconCssClass
I recommend compare to the demo project navigation.xml and also study the changes I made in the included views. I added some extension methods for NavigationViewModel to make it easy to resolve the class for active nodes and also to generate the needed html for icons which is the same for glyphicons or fontawesome, only the class names are different. If you are making custom views it might be better to start by copying the updated included views

Oh.. yes, my bad, don"t have see the "I" is on lowercase.. ! Thanx for your help and good continuation :) 👍