Hi!
I'm in need of using the RadOrgChart for showing some data and the point of the Tooltip is to show details of the Item I'm hovering over.
I did a demo just to try and see how it would look with some basic data on a Table.
I used this Demo as a reference...pretty much, I just copied and pasted it and modified it to see how it would look and then I would start doing some changes on it.
My problem: I don't know if its what I'm thinking, that the OnAjaxUpdate is not getting triggered, or if I messed up somewhere else.
I've never tried this before, so I'm pretty new at this and a little help would be useful ^^
OrgChartNew.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OrgChartNew.aspx.cs" Inherits="RadOrgChart3.OrgChartNew" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
link
href
=
"css/styles.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"RadScriptManager1"
/>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
ShowChooser
=
"true"
/>
<
div
class
=
"demo-container size-wide no-bg"
>
<
div
class
=
"qsf-demo-canvas"
>
<
h2
>
<
span
>Test</
span
>
</
h2
>
<
telerik:RadOrgChart
RenderMode
=
"Lightweight"
ID
=
"RadOrgChart1"
runat
=
"server"
Skin
=
"Default"
DataSourceID
=
"SqlDataSource1"
EnableDrillDown
=
"true"
DataFieldID
=
"hijo"
DataFieldParentID
=
"padre"
>
<
ItemTemplate
>
<
asp:Panel
runat
=
"server"
ID
=
"Panel1"
CssClass
=
"TemplateHolder"
>
<
div
class
=
"rocCustomTextWrap"
>
<
span
>
<%# Eval("nombre")%>
</
span
>
</
div
>
</
asp:Panel
>
</
ItemTemplate
>
</
telerik:RadOrgChart
>
</
div
>
</
div
>
<
telerik:RadToolTipManager
RenderMode
=
"Lightweight"
runat
=
"server"
ID
=
"RadToolTipManager1"
Skin
=
"Default"
OnAjaxUpdate
=
"OnAjaxUpdate"
Position
=
"BottomRight"
OffsetX
=
"16"
OffsetY
=
"16"
EnableShadow
=
"false"
Width
=
"195"
Height
=
"135"
/>
<
asp:SqlDataSource
runat
=
"server"
ID
=
"SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:masterConnectionString %>"
SelectCommand="SELECT [hijo], [padre], [nombre], [edad], [color] FROM [PADREHIJOTABLETEST]"></
asp:SqlDataSource
>
</
form
>
</
body
>
</
html
>
OrgChartNew.aspx.cs:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
Telerik.Web.UI;
namespace
RadOrgChart3
{
public
partial
class
OrgChartNew : System.Web.UI.Page
{
private
bool
isDrillDown =
false
;
protected
void
Page_Load(
object
sender, EventArgs e)
{
RadOrgChart1.GroupItemDataBound +=
new
Telerik.Web.UI.OrgChartGroupItemDataBoundEventHandler(RadOrgChart1_GroupItemDataBound);
RadOrgChart1.DrillDown += RadOrgChart1_DrillDown;
}
void
RadOrgChart1_DrillDown(
object
sender, OrgChartDrillDownEventArguments e)
{
isDrillDown =
true
;
}
void
RadOrgChart1_GroupItemDataBound(
object
sender, Telerik.Web.UI.OrgChartGroupItemDataBoundEventArguments e)
{
var panel = (Panel)e.Item.FindControl(
"Panel1"
);
RadToolTipManager1.TargetControls.Add(panel.ClientID, e.Item.Node.ID,
true
);
}
protected
override
void
OnPreRenderComplete(EventArgs e)
{
base
.OnPreRenderComplete(e);
if
(isDrillDown)
{
var nodes = RadOrgChart1.GetAllNodes();
foreach
(var node
in
nodes)
{
var panel = (Panel)node.GroupItems[0].FindControl(
"Panel1"
);
RadToolTipManager1.TargetControls.Add(panel.ClientID, node.ID,
true
);
}
}
}
public
void
OnAjaxUpdate(
object
sender, ToolTipUpdateEventArgs e)
{
Control ctrl = Page.LoadControl(
"OrgChartUC.ascx"
);
ctrl.ID =
"OrgChartUC"
;
e.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);
OrgChartUC details = (OrgChartUC)ctrl;
details.Hijo = e.Value;
}
}
}
OrgChartUC.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="OrgChartUC.ascx.cs" Inherits="RadOrgChart3.OrgChartUC" %>
<
asp:Repeater
runat
=
"server"
ID
=
"Repeater1"
>
<
ItemTemplate
>
<
div
class
=
"rtCustomTemplate"
>
<
h3
class
=
"title"
>
<
asp:Literal
runat
=
"server"
ID
=
"ltrEdad"
Text='<%# Eval("edad")%>' />
</
h3
>
<
p
class
=
"phone"
>
<
asp:Literal
runat
=
"server"
ID
=
"ltrColor"
Text='<%# Eval("color")%>' />
</
p
>
</
div
>
</
ItemTemplate
>
</
asp:Repeater
>
<
asp:SqlDataSource
ID
=
"EmployeesDataSource"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:masterConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [edad], [color] FROM [PADREHIJOTABLETEST] WHERE hijo = @hijo">
<
SelectParameters
>
<
asp:Parameter
Name
=
"hijo"
Type
=
"Int32"
/>
</
SelectParameters
>
</
asp:SqlDataSource
>
OrgChart.ascx.cs:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
namespace
RadOrgChart3
{
public
partial
class
OrgChartUC : System.Web.UI.UserControl
{
public
string
Hijo {
get
;
set
; }
protected
void
Page_Load(
object
sender, EventArgs e)
{
EmployeesDataSource.SelectParameters[
"hijo"
].DefaultValue = Hijo;
Repeater1.DataSource = EmployeesDataSource;
Repeater1.DataBind();
}
}
}
Thanks for your help ^^!!!