How to set color for nodes in ORG CHART

[Duy]

Hi guys!

I have a problem. I create a family tree, and i use ORG CHART. And now, i need to show nodes by gender, the man with green and the woman with pink. And I bind data to ORG CHART form SQL/SERVER. I hope my problem will resolve. Thanks :))))))

 

 

[Duy]

Please, help me

[Duy]

Can anyone help me,please! :'(

[Ivan Danchev]

Hello Duy,

In order to achieve that you should have a column in the database (for example "Gender"), which will hold the value "male" or "female" for each record. You can then access that value in the OrgChart's NodeDataBound event and use it to set a CSS class to the node:

protected void RadOrgChart1_NodeDataBound(object sender, OrgChartNodeDataBoundEventArguments e)
{
    DataRowView dataSourceRow = (DataRowView)e.Node.DataItem;

    if (dataSourceRow.Row["Gender"].ToString() == "male")
    {
        e.Node.CssClass = "nodeMale";
    }
    else
    {
        e.Node.CssClass = "nodeFemale";
    }
}

Since the event fires for each node, every node will have one of the these two classes set after the event finishes executing. You can then add two CSS rules, applying different background color to the corresponding elements.

Here are the two CSS rules, which set the background color of the nodes with classes "nodeMale" and "nodeFemale":

.nodeFemale .rocItem .rocItemContent {
    background-color: pink;
}

.nodeMale .rocItem .rocItemContent {
    background-color: green;
}

Regards,
Ivan Danchev
Telerik

[Teja]

May i know how to achieve changing node color at client side ?

[Peter Milchev]

Hello Teja,

You can use the client-side API of the OrgChart to access the nodes:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/orgchart/client-side-programming/radorgchart-object

Then, with the client-side API of the OrgChartNode, you can access the node's DOM element and style it as required, either via direct styling or by adding a CSS class to it.

• https://docs.telerik.com/devtools/aspnet-ajax/controls/orgchart/client-side-programming/orgchartnode-object

Regards,
Peter Milchev
Progress Telerik

[Teja]

Thank you Peter for the reply.

I had gone through client side API's before and implemented the code but however i couldn't highlight the node which i am interested in. Let say, i have implemented client side search for finding the node by name on the node, i was able to find the node by name scroll into the view but however i couldn't highlight the node with some color / style. Please help me with some sample code.

[Peter Milchev]

Hello Teja,

You can use JavaScript to apply styles to the HTML elements:

• https://www.w3schools.com/jquery/jquery_css.asp

Also, you can find child elements inside the node that also need styling:

• https://api.jquery.com/find/
• https://api.jquery.com/closest/
• https://api.jquery.com/category/traversing/tree-traversal/

Another option is to set a CSS class to the element and use regular CSS for styling:

• https://api.jquery.com/addClass/

To get a better understanding on the HTML structure of the node, 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. 

• Inspect the Generated HTML of a Control;
• See the Applied Styles;

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: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

 

Regards,
Peter Milchev
Progress Telerik