How to set color for nodes in ORG CHART

4 posts, 0 answers
  1. Duy
    Duy avatar
    3 posts
    Member since:
    May 2015

    Posted 20 Apr Link to this post

    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 :))))))

     

     

  2. Duy
    Duy avatar
    3 posts
    Member since:
    May 2015

    Posted 20 Apr in reply to Duy Link to this post

    Please, help me
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Duy
    Duy avatar
    3 posts
    Member since:
    May 2015

    Posted 21 Apr Link to this post

    Can anyone help me,please! :'(
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 22 Apr Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top