Transfer data between ORG Chart and List box

8 posts, 0 answers
  1. Alaa'
    Alaa' avatar
    20 posts
    Member since:
    Apr 2014

    Posted 09 Apr 2014 Link to this post

    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

















  2. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 11 Apr 2014 Link to this post

    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
     

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alaa'
    Alaa' avatar
    20 posts
    Member since:
    Apr 2014

    Posted 11 Apr 2014 in reply to Plamen Link to this post

    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 

  5. Alaa'
    Alaa' avatar
    20 posts
    Member since:
    Apr 2014

    Posted 12 Apr 2014 in reply to Alaa' Link to this post

    every thing is run ok .. thank you 
  6. Alaa'
    Alaa' avatar
    20 posts
    Member since:
    Apr 2014

    Posted 12 Apr 2014 in reply to Alaa' Link to this post

    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 ?? 
  7. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 16 Apr 2014 Link to this post

    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
     

    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.

     
  8. Alaa'
    Alaa' avatar
    20 posts
    Member since:
    Apr 2014

    Posted 17 Apr 2014 in reply to Plamen Link to this post

    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>
     
    <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>
  9. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 21 Apr 2014 Link to this post

    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
     

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017