RadOrgChart with Radtooltip z-index problem

4 posts, 0 answers
  1. Thiyagu
    Thiyagu avatar
    7 posts
    Member since:
    Nov 2011

    Posted 01 Aug 2012 Link to this post

    Hi team, 
    I am dynamically creating a radtooltip within the orgchart template . Everything works fine except if there are any controls inside radtooltip, it is cascading behind the radorgchart node. I have pasted the code below ..  

    Issue No 2 : Also is there any way to move the template so that it will attach to the connecting line ?? .. I have attached the image for both the issues ..

    C# Code:
    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
    using Telerik.Web.UI;
     
    namespace Telerik_Tests
    {
        public partial class telerikRadOrgTest : System.Web.UI.Page
        {
     
            OrgChartNode objOrgNode;
            OrgChartGroupItem objOrgGroupItem;
     
            protected void Page_Load(object sender, EventArgs e)
            {
                ChartBuilder();
            }
     
            protected DataTable Binddata()
            {
                DataTable dtTbl = new DataTable();
                dtTbl.Columns.Add("Name");
                dtTbl.Columns.Add("Id");
                dtTbl.Columns.Add("ParentId");
     
                DataRow _dr = dtTbl.NewRow();
                _dr["Name"] = "Test1";
                _dr["Id"] = "1";
                _dr["ParentId"] = DBNull.Value;
                dtTbl.Rows.Add(_dr);
     
                _dr = dtTbl.NewRow();
                _dr["Name"] = "Test2";
                _dr["Id"] = "2";
                _dr["ParentId"] = "1";
                dtTbl.Rows.Add(_dr);
     
                _dr = dtTbl.NewRow();
                _dr["Name"] = "Test3";
                _dr["Id"] = "3";
                _dr["ParentId"] = "1";
                dtTbl.Rows.Add(_dr);
     
                _dr = dtTbl.NewRow();
                _dr["Name"] = "Test4";
                _dr["Id"] = "4";
                _dr["ParentId"] = "1";
                dtTbl.Rows.Add(_dr);
     
                return dtTbl;
     
            }
     
     
            protected void ChartBuilder()
            {
     
                DataTable _tbl = Binddata();
     
                foreach (DataRow drObj in _tbl.Rows)
                {
                    objOrgNode = new OrgChartNode();
                    objOrgGroupItem = new OrgChartGroupItem() { Template = new SampleTemplate() };
                    objOrgNode.GroupItems.Add(objOrgGroupItem);               
                    RadOrgChart1.Nodes.Add(objOrgNode);
                }
     
     
            }
     
            class SampleTemplate : ITemplate
            {
                public void InstantiateIn(Control container)
                {
                    HyperLink hypInitiative = new HyperLink();
                    hypInitiative.ID = "Link";
                    hypInitiative.Text = "Some Name";
                    hypInitiative.NavigateUrl = "#"
     
                    RadToolTip rdTooltip = new RadToolTip();
                    rdTooltip.HideEvent = ToolTipHideEvent.ManualClose;
                    rdTooltip.ShowEvent = ToolTipShowEvent.OnClick;
                    rdTooltip.TargetControlID = "Link";
                    //rdTooltip.Text = "Some text .. Some text .. Some text .. Some text .. Some text .. Some text .. Some text .. Some text .. Some text .. Some text .. ";             
                    rdTooltip.Controls.Add(BindActionsToToolTip());             
                    rdTooltip.Width = Unit.Pixel(600);
     
                    Table _tbl = new Table();
                    TableRow _tblRow = new TableRow();
                    TableCell _tblCell = new TableCell();
     
                    _tblCell.Controls.Add(hypInitiative);
                    _tblCell.Controls.Add(rdTooltip);
                    _tblRow.Cells.Add(_tblCell);
                    _tbl.Rows.Add(_tblRow);
     
                    container.Controls.Add(_tbl);
                }
     
                protected Table BindActionsToToolTip()
                {
                    Table tooltipTbl = new Table();
                    tooltipTbl.Style.Add("border", "1px solid black");
                    TableRow tooltipTr;
                    TableCell tooltipTd;
     
                    tooltipTr = new TableRow();               
                    tooltipTd = new TableCell();
                    tooltipTd.Text = "Sample1";
                    tooltipTr.Cells.Add(tooltipTd);
                    tooltipTd = new TableCell();
                    tooltipTd.Text = "Sample2";
                    tooltipTr.Cells.Add(tooltipTd);
     
                    tooltipTbl.Rows.Add(tooltipTr);
     
                    return tooltipTbl;
                }
     
            }
     
        }
    }


    ASPX Code: 
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="telerikRadOrgTest.aspx.cs"
        Inherits="Telerik_Tests.telerikRadOrgTest" %>
     
    <%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>  
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager runat="server" ID="ScriptManager1">
            </asp:ScriptManager>
            <div>
            </div>
            <div>
                <telerik:RadOrgChart runat="server" ID="RadOrgChart1" DataFieldParentID="ParentId" DataFieldID="Id" DataTextField="Name" EnableCollapsing="true"
                    Skin="Office2010Blue">
                </telerik:RadOrgChart>
            </div>
        </div>
        </form>
    </body>
    </html>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Aug 2012 Link to this post

    Hello,

    Try setting the following CSS.
    CSS:
    <style type="text/css">
       .RadOrgChart .rocItemWrap,.RadOrgChart .rocNode,.RadOrgChart .rocItemList
        {
           position:static !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thiyagu
    Thiyagu avatar
    7 posts
    Member since:
    Nov 2011

    Posted 01 Aug 2012 Link to this post

    Hi Shinu ,

    Thanks for your reply .. your reply seems to work well, in case of the sample i provided .. but in my project there are lot of levels and setting the position static displaces the nodes and the layout becomes awry .. connecting lines are displaced totally .. I hope this may not be the best solution for my current situation. Thanks once again ..
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 02 Aug 2012 Link to this post

    Hi Thiyagu,

    In order to resolve the issue with the appearance, could you try to apply the approach from the following demo in your project. My recommendation is to use RadToolTipManager because it is placed out of the RadOrgChart.

    Kind regards,
    Peter Filipov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top