Transfer data between ORG Chart and List box

[Alaa']

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 !!! 

    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

[Plamen]

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

 

 

[Alaa']

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

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

             }

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 

[Alaa']

every thing is run ok .. thank you 

[Alaa']

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 ?? 

[Plamen]

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

 

 

[Alaa']

thanks plamen ,
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>

[Plamen]

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