Styling Nodes in RenderedFields Demo

[Sekhar]

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

[Sekhar]

I figured it out. Can close this post.

[Youri]

Can you share your solution?

[Boyan Dimitrov]

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