Hello,
I'm trying to use drag and drop to transfer a row from list box to chart as the demo example (Transfer Employees) but with single binding, i handle the server function AjaxRequest and bind the new data to chart ,, but on screen it doesn't show new data !!!
I'm trying to use drag and drop to transfer a row from list box to chart as the demo example (Transfer Employees) but with single binding, i handle the server function AjaxRequest and bind the new data to chart ,, but on screen it doesn't show new data !!!
Protected
Sub
GeneralManeger_AjaxRequest(sender
As
Object
, e
As
Telerik.Web.UI.AjaxRequestEventArgs)
Dim
seps
As
Char
() = {
"-"
c}
Dim
textAndIds
As
String
() = e.Argument.Split(seps, StringSplitOptions.None)
Dim
sep
As
Char
() = {
":"
c}
Dim
stringIds
As
String
() = textAndIds(2).Split(sep, StringSplitOptions.RemoveEmptyEntries)
Dim
ids
As
Integer
() =
New
Integer
(stringIds.Length - 1) {}
For
i
As
Integer
= 0
To
stringIds.Length - 1
ids(i) = Int32.Parse(stringIds(i))
Next
If
textAndIds(0) =
"drop"
Then
Dim
newText
As
String
= textAndIds(1)
Dim
node
As
OrgChartNode = AdminOccupationsChart.GetNodeByHierarchicalIndex(ids)
Dim
row = (From myRow
In
Occupations_List.AsEnumerable() Where myRow.RecordName = newText
Select
myRow).SingleOrDefault
ChartList.Add(
New
Entities.Extensions.AnonymousTypes.HirarchicalClass
With
{.ClusterCode = row.ClusterCode, .PropertyCode = row.PropertyCode, .RecordCode = row.RecordCode, .ParentRecordCode = node.ID, .OriginalRecordCode = row.OriginalRecordCode, .RecordName = row.RecordName, .RecordNameAlternate = row.RecordNameAlternate})
AdminOccupationsChart.DataFieldID=
"RecordCode"
AdminOccupationsChart.DataFieldParentID=
"PArentRecordCode"
AdminOccupationsChart.DataSource = ChartList
AdminOccupationsChart.DataBind()
OccupationsList.DataSource = Occupations_List
OccupationsList.DataBind()
End
Sub
7 Answers, 1 is accepted
0
Hello Alaa,
I have tested the demo scenario in case of single binding and it worked correctly at my side. The only different is to add correctly the dropped item in your datasource with parentId equal to id of the node dropped on and id of the current node.
Unfortunately the provided code is not sufficient to find out what exactly is not working correctly at your side.
Regards,
Plamen
Telerik
I have tested the demo scenario in case of single binding and it worked correctly at my side. The only different is to add correctly the dropped item in your datasource with parentId equal to id of the node dropped on and id of the current node.
Unfortunately the provided code is not sufficient to find out what exactly is not working correctly at your side.
Regards,
Plamen
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.
0

Alaa'
Top achievements
Rank 1
answered on 11 Apr 2014, 09:30 PM
thank plamen for your replay , every thing is ok with drag and drop in my project .
now i try to apply remove person as the example transfer employees , in script function remove person
and i don't have grouping its a single binding .. how i can get the real hierarchical ? it doesn't return a hierarchical just the index on the level not hierarchical
now i try to apply remove person as the example transfer employees , in script function remove person
function removePerson(e) {
var orgChart = $find(
"<%= RadOrgChart1.ClientID %>"
);
var index = orgChart._extractGroupItemFromDomElement(e.target).get_index();
var hierarchicalIndex = orgChart._extractNodeFromDomElement(e.target)._getHierarchicalIndex();
hierarchicalIndex = orgChart._getRealHierarchicalIndex(hierarchicalIndex); //gets the right index if drill down is on
$find(
"<%= RadAjaxManager1.ClientID %>"
).ajaxRequest(
"remove-"
+ index +
"-"
+ hierarchicalIndex);
}
0

Alaa'
Top achievements
Rank 1
answered on 12 Apr 2014, 04:46 PM
every thing is run ok .. thank you
0

Alaa'
Top achievements
Rank 1
answered on 12 Apr 2014, 06:42 PM
now it get the right hierarchical index and go to server to ajaxrequest event correctly
but by one click on remove it go to the event twice !! and remove two nodes at once !
help me please why it happen ??
but by one click on remove it go to the event twice !! and remove two nodes at once !
help me please why it happen ??
0
Hello Alaa,
I have tested the described scenario and it worked correctly at my side once again. It sound like it is caused by command that you use when you delete the nodes in your custom binding scenario. If you still can't figure it out please share the exact code that you use when you bind and remove nodes so we could be more helpful with a possible solution.
Regards,
Plamen
Telerik
I have tested the described scenario and it worked correctly at my side once again. It sound like it is caused by command that you use when you delete the nodes in your custom binding scenario. If you still can't figure it out please share the exact code that you use when you bind and remove nodes so we could be more helpful with a possible solution.
Regards,
Plamen
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.
0

Alaa'
Top achievements
Rank 1
answered on 17 Apr 2014, 07:20 AM
thanks plamen ,
this a sample of my code , the main different between the original code that i bind the data from Database.
this a sample of my code , the main different between the original code that i bind the data from Database.
Imports
Telerik.Web.UI
Public
Class
test1
Inherits
System.Web.UI.Page
Private
Occupations_List
As
New
List(Of OrgChartData)
Private
ChartList
As
New
List(Of OrgChartData)
Protected
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
FillOccupationsList()
If
Session(
"ORGList"
)
Is
Nothing
Then
FillAdminOccupationChart()
Else
GetDataFromSession()
End
If
End
Sub
Private
Sub
FillOccupationsList()
Dim
Item
As
New
OrgChartData
Item.ClusterCode =
"1"
Item.PropertyCode =
"1"
Item.RecordCode =
"001"
Item.ParentRecordCode =
Nothing
Item.OriginalRecordCode =
"001"
Item.RecordName =
"Occupation1"
Item.RecordNameAlternate =
"Oocupation1"
Occupations_List.Add(Item)
Item.ClusterCode =
"1"
Item.PropertyCode =
"1"
Item.RecordCode =
"002"
Item.ParentRecordCode =
Nothing
Item.OriginalRecordCode =
"002"
Item.RecordName =
"Occupation2"
Item.RecordNameAlternate =
"Oocupation2"
Occupations_List.Add(Item)
Item.ClusterCode =
"1"
Item.PropertyCode =
"1"
Item.RecordCode =
"003"
Item.ParentRecordCode =
Nothing
Item.OriginalRecordCode =
"003"
Item.RecordName =
"Occupation3"
Item.RecordNameAlternate =
"Oocupation3"
Occupations_List.Add(Item)
If
False
Then
OccupationsList.DataTextField =
"RecordNameAlternate"
Else
OccupationsList.DataTextField =
"RecordName"
End
If
OccupationsList.DataKeyField =
"RecordCode"
OccupationsList.DataSource = Occupations_List
OccupationsList.DataBind()
End
Sub
Private
Sub
FillAdminOccupationChart()
Dim
item
As
New
OrgChartData
item.ClusterCode =
"1"
item.PropertyCode =
"1"
item.RecordCode =
"1|1"
item.ParentRecordCode =
Nothing
item.RecordName =
"Propery1"
item.RecordNameAlternate =
"Propery1"
item.OriginalRecordCode =
"1"
ChartList.Add(item)
item.ClusterCode =
"1"
item.PropertyCode =
"1"
item.RecordCode =
"1|1|1"
item.ParentRecordCode =
"1|1"
item.RecordName =
"Unit1"
item.RecordNameAlternate =
"Unit1"
item.OriginalRecordCode =
"1"
ChartList.Add(item)
item.ClusterCode =
"1"
item.PropertyCode =
"1"
item.RecordCode =
"1|1|2"
item.ParentRecordCode =
"1|1"
item.RecordName =
"Unit2"
item.RecordNameAlternate =
"Unit2"
item.OriginalRecordCode =
"2"
ChartList.Add(item)
item.ClusterCode =
"1"
item.PropertyCode =
"1"
item.RecordCode =
"1|1|3"
item.ParentRecordCode =
"1|1|1"
item.RecordName =
"Unit3"
item.RecordNameAlternate =
"Unit3"
item.OriginalRecordCode =
"3"
ChartList.Add(item)
item.ClusterCode =
"1"
item.PropertyCode =
"1"
item.RecordCode =
"1|1|4"
item.ParentRecordCode =
"1|1|1"
item.RecordName =
"Unit4"
item.RecordNameAlternate =
"Unit4"
item.OriginalRecordCode =
"4"
ChartList.Add(item)
item.ClusterCode =
"1"
item.PropertyCode =
"1"
item.RecordCode =
"1|1|1|005"
item.ParentRecordCode =
"1|1|3"
item.RecordName =
"Occupation5"
item.RecordNameAlternate =
"Occupation5"
item.OriginalRecordCode =
"005"
ChartList.Add(item)
AdminOccupationsChart.DataFieldID =
"RecordCode"
AdminOccupationsChart.DataFieldParentID =
"ParentRecordCode"
AdminOccupationsChart.DataTextField =
"RecordNameAlternate"
AdminOccupationsChart.DataSource = ChartList
AdminOccupationsChart.DataBind()
AdminOccupationsChart.EnableDrillDown =
True
AdminOccupationsChart.EnableGroupCollapsing =
True
Session(
"ORGList"
) = ChartList
End
Sub
Private
Sub
GetDataFromSession()
ChartList =
New
List(Of OrgChartData)
ChartList = Session(
"ORGList"
)
For
Each
item
In
ChartList
ChartList.Add(item)
Next
End
Sub
Protected
Sub
GeneralManeger_AjaxRequest1(sender
As
Object
, e
As
Telerik.Web.UI.AjaxRequestEventArgs)
Dim
seps
As
Char
() = {
"-"
c}
Dim
textAndIds
As
String
() = e.Argument.Split(seps, StringSplitOptions.None)
Dim
sep
As
Char
() = {
":"
c}
Dim
stringIds
As
String
() = textAndIds(2).Split(sep, StringSplitOptions.RemoveEmptyEntries)
Dim
ids
As
Integer
() =
New
Integer
(stringIds.Length - 1) {}
For
i
As
Integer
= 0
To
stringIds.Length - 1
ids(i) = Int32.Parse(stringIds(i))
Next
If
textAndIds(0) =
"drop"
Then
Dim
newText
As
String
= textAndIds(1)
Dim
node
As
OrgChartNode = AdminOccupationsChart.GetNodeByHierarchicalIndex(ids)
Dim
rows = (From myRow
In
Occupations_List.AsEnumerable() Where myRow.RecordName = newText
Select
myRow).SingleOrDefault
Dim
imageUrl
As
String
=
""
Dim
emloyeeId
As
String
=
""
Dim
recordcode = rows.RecordCode
Dim
ParentCode = node.ID
ChartList.Add(
New
OrgChartData
With
{.ClusterCode = rows.ClusterCode, .PropertyCode = rows.PropertyCode, .RecordCode = recordcode, .ParentRecordCode = ParentCode, .OriginalRecordCode = rows.OriginalRecordCode, .RecordName = rows.RecordName, .RecordNameAlternate = rows.RecordNameAlternate})
ElseIf
textAndIds(0) =
"remove"
Then
Dim
node
As
OrgChartNode = AdminOccupationsChart.GetNodeByHierarchicalIndex(ids)
Dim
nodeid = node.ID
Dim
item = (From i
In
ChartList Where i.RecordCode = nodeid).SingleOrDefault
ChartList.RemoveAt(ChartList.IndexOf(item))
End
If
AdminOccupationsChart.DataSource = ChartList
AdminOccupationsChart.DataBind()
Session(
"ORGList"
) = ChartList
End
Sub
End
Class
Public
Class
OrgChartData
Public
Property
RecordCode
Public
Property
ParentRecordCode
Public
Property
RecordName
Public
Property
RecordNameAlternate
Public
Property
OriginalRecordCode
Public
Property
PropertyCode
Public
Property
ClusterCode
End
Class
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test1.aspx.vb" Inherits="WebApplication1.test1" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
style
>
.qsf-demo-canvas {
background-position: -50px 35px;
position: relative;
}
.qsf-demo-canvas .occupationlist {
}
.rocRemoveItemButton {
margin:0;
padding:0;
height:14px;
overflow:hidden;
position:absolute;
left:auto;
right:6px;
}
</
style
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptBlock
ID
=
"Script1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
var $ = $telerik.$;
function OnClientDropping(sender, args) {
var orgChart = $find("<%= AdminOccupationsChart.ClientID%>");
var itemText = args.get_sourceItem().get_text().trim();
if (args.get_htmlElement().className.indexOf("rocItem") != -1 || $(args.get_htmlElement()).parents(".rocItem").length > 0) {
var id = orgChart._extractNodeFromDomElement(args.get_htmlElement())._nodeData.Id
var NodesforDrop = DropsNode.Get("Value").split(';');
for (i = 0 ; i <= NodesforDrop.length; i++) {
if (NodesforDrop[i] == id) {
var hierarchicalIndex = orgChart._extractNodeFromDomElement(args.get_htmlElement())._getHierarchicalIndex();
hierarchicalIndex = orgChart._getRealHierarchicalIndex(hierarchicalIndex); //gets right index if drill down is on
$find("<%= GeneralManeger.ClientID%>").ajaxRequest("drop-" + itemText + "-" + hierarchicalIndex);
}
}
}
}
function OnClientDragging(sender, args) {
}
function pageLoad() {
$(".rocRemoveItemButton").click(function myfunction(e) {
removeoccupation(e);
})
}
function removeoccupation(e) {
var orgChart = $find("<%= AdminOccupationsChart.ClientID%>");
var index = orgChart._extractGroupItemFromDomElement(e.target).get_index();
var hierarchicalIndex = orgChart._extractNodeFromDomElement(e.target)._getHierarchicalIndex()
hierarchicalIndex = orgChart._getRealHierarchicalIndex(hierarchicalIndex);
$find("<%= GeneralManeger.ClientID%>").ajaxRequest("remove-" + index + "-" + hierarchicalIndex);
}
</
script
>
<
div
>
<
telerik:RadAjaxManager
ID
=
"GeneralManeger"
runat
=
"server"
OnAjaxRequest
=
"GeneralManeger_AjaxRequest1"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"GeneralManeger"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"OccupationsList"
LoadingPanelID
=
"ORGChartLoadingPanel"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"AdminOccupationsChart"
LoadingPanelID
=
"ORGChartLoadingPanel"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"AdminOccupationsChart"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"AdminOccupationsChart"
LoadingPanelID
=
"ORGChartLoadingPanel"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
runat
=
"server"
ID
=
"ORGChartLoadingPanel"
Visible
=
"true"
/>
<
div
class
=
"occupationlist"
>
<
telerik:RadListBox
ID
=
"OccupationsList"
runat
=
"server"
EnableDragAndDrop
=
"false"
Width
=
"200px"
Height
=
"400px"
OnClientDragging
=
"OnClientDragging"
OnClientDropping
=
"OnClientDropping"
>
</
telerik:RadListBox
>
</
div
>
<
div
class
=
"orgchart"
>
<
telerik:RadOrgChart
ID
=
"AdminOccupationsChart"
runat
=
"server"
LoadOnDemand
=
"NodesAndGroups"
EnableCollapsing
=
"true"
EnableDragAndDrop
=
"false"
GroupColumnCount
=
"2"
>
<
ItemTemplate
>
<
strong
id
=
"Name"
> <%# DataBinder.Eval(Container.DataItem, "RecordName")%></
strong
>
<
button
id
=
"DeleteBtn"
title
=
"Remove"
class
=
"rocRemoveItemButton"
/>
</
ItemTemplate
>
</
telerik:RadOrgChart
>
<
asp:Label
ID
=
"label1"
runat
=
"server"
/>
</
div
>
</
div
>
</
form
>
</
body
>
</
html
>
0
Hi,
I have tested the code provided but there was a server side error when I ran it. I have inspected the code and it looks like the issue is caused by the way you load your data. In such case I would recommend you to keep the exact a structure that is suggested in the demo and just remove the code that is needed for the group enabled binding.
Hope this information will be helpful.
Regards,
Plamen
Telerik
I have tested the code provided but there was a server side error when I ran it. I have inspected the code and it looks like the issue is caused by the way you load your data. In such case I would recommend you to keep the exact a structure that is suggested in the demo and just remove the code that is needed for the group enabled binding.
Hope this information will be helpful.
Regards,
Plamen
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.