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

RadOrgChart with Radtooltip z-index problem

3 Answers 111 Views
OrgChart
This is a migrated thread and some comments may be shown as answers.
Thiyagu
Top achievements
Rank 1
Thiyagu asked on 01 Aug 2012, 12:17 PM
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>

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 01 Aug 2012, 01:21 PM
Hello,

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

Thanks,
Shinu.
0
Thiyagu
Top achievements
Rank 1
answered on 01 Aug 2012, 01:46 PM
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 ..
0
Peter Filipov
Telerik team
answered on 02 Aug 2012, 07:45 AM
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.
Tags
OrgChart
Asked by
Thiyagu
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Thiyagu
Top achievements
Rank 1
Peter Filipov
Telerik team
Share this question
or