Styling Nodes in RenderedFields Demo

4 posts, 0 answers
  1. Sekhar
    Sekhar avatar
    22 posts
    Member since:
    Dec 2013

    Posted 04 Feb 2014 Link to this post

    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
  2. Sekhar
    Sekhar avatar
    22 posts
    Member since:
    Dec 2013

    Posted 04 Feb 2014 Link to this post

    I figured it out. Can close this post.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Youri
    Youri avatar
    1 posts
    Member since:
    May 2014

    Posted 19 May 2014 in reply to Sekhar Link to this post

    Can you share your solution?
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 22 May 2014 Link to this post

    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.

     
Back to Top