This is a migrated thread and some comments may be shown as answers.

Styling Nodes in RenderedFields Demo

3 Answers 90 Views
OrgChart
This is a migrated thread and some comments may be shown as answers.
Sekhar
Top achievements
Rank 1
Sekhar asked on 04 Feb 2014, 03:03 PM
Hi,

I created an orgchart based on the rendered fields demo @ http://demos.telerik.com/aspnet-ajax/orgchart/examples/renderedfields/defaultcs.aspx.

How can i change the style of the node based on a rendered filed value? For example an employee node  must have green background while a non employee must have a blue background

3 Answers, 1 is accepted

Sort by
0
Sekhar
Top achievements
Rank 1
answered on 04 Feb 2014, 03:46 PM
I figured it out. Can close this post.
0
Youri
Top achievements
Rank 1
answered on 19 May 2014, 01:54 PM
Can you share your solution?
0
Boyan Dimitrov
Telerik team
answered on 22 May 2014, 12:01 PM
Hello,

An easy and convenient way of achieving this functionality would be to use the RadOrgChart NodeDataBound event handler as shown in the code snippet below:
//markup code
<telerik:RadOrgChart ID="RadOrgChart1" runat="server" OnNodeDataBound="RadOrgChart1_NodeDataBound">
               <RenderedFields>
                    <NodeFields>
                         <telerik:OrgChartRenderedField DataField="TeamName" Label="Team" />
                    </NodeFields>
                    <ItemFields>
                         <telerik:OrgChartRenderedField DataField="Certificates" Label="Certificates" />
                    </ItemFields>
               </RenderedFields>
          </telerik:RadOrgChart>
//code behind
protected void RadOrgChart1_NodeDataBound(object sender, OrgChartNodeDataBoundEventArguments e)
    {
        if (e.Node.RenderedFields[0].Text == "Dev")
        {
            e.Node.CssClass = "customClass";
        }
    }
//css
html .RadOrgChart  .customClass .rocItemContent {
            background-color:red;
        }

This will color in red if the node field is Dev team.

Regards,
Boyan Dimitrov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
OrgChart
Asked by
Sekhar
Top achievements
Rank 1
Answers by
Sekhar
Top achievements
Rank 1
Youri
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or