OrgChart binding with control template

[haitham]

Hi, I'm facing something strange with rad orgchart control.

I've an orgchart which i bind it with some data in the Page_PreInit, and within each node i created RadDockZone Template inside every node.

the problem is: At the last node in the orgchart it doesn't fire the InstantiateIn directly for the raddockzone template , while it's fire directly with the rest nodes except the last one,  it's fire but too late , it fire after orgchart_DataBound and Page_Init and Page_Load. so this problem doesn't allow me to save the dock state in the last zone in the last node.

UPDATE : WORKING CODE IS IN THE THIRD POST PLEASE TRY IT.

Thank you.

[Peter Filipov]

Hi Haitham,

We had a similar issue with templates and now everything is fixed. I wasn't able to recreate an example from the provided code due to missing references of some variables. Could you please try to run your project with the latest internal build of our controls ?

Kind regards,
Peter Filipov
the Telerik team

[haitham]

Hi Peter,

Thank you for your response,

I've downloaded the latest internal build, but it doesn't solve my problem, attached the code again without missing references

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div>



        <telerik:RadDockLayout ID="RadDockLayout1" Runat="server"
             onloaddocklayout="RadDockLayout1_LoadDockLayout"
             onsavedocklayout="RadDockLayout1_SaveDockLayout">
            <table id="table1" class="style1" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="200" valign="top">
                            <div style="height:500px; overflow:auto;" >
                        <div class="applemenu" style="height:300px;">
                        <div class="silverheader"><a>General Slide(s)</a></div>
                        <div class="submenu" style="height:300px;">
                            <telerik:RadDockZone ID="ZoneGeneralSlides" Height="300px" runat="server">

                            </telerik:RadDockZone>

                        </div>

                    </div>

                    </td>
                    <td>
                     <%--<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" AnimationDuration="2000" BackgroundPosition="Center"
                      Transparency="50" MinDisplayTime="1" />
                        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"
        OnAjaxRequest="RadAjaxPanel1_AjaxRequest" Width="640px">--%>
                        <asp:HiddenField runat="server" ID="SessionID" />
                        <telerik:RadOrgChart ID="PulsarChart" runat="server" BackColor="#FFCCFF"
                            EnableCollapsing="True" EnableDragAndDrop="True" DisableDefaultImage="True"
                                onnodedatabound="PulsarChart_NodeDataBound"
                                ongroupitemdrop="PulsarChart_GroupItemDrop"
                            onnodedrop="PulsarChart_NodeDrop"
                            ongroupitemdatabound="PulsarChart_GroupItemDataBound" ondatabound="PulsarChart_DataBound1"
                            >

                        </telerik:RadOrgChart>
                         <%-- </telerik:RadAjaxPanel>--%>
                    </td>
                </tr>
            </table>
        </telerik:RadDockLayout>


        <asp:Button Text="Save" ID="btnSave" runat="server"
            onclick="btnSave_Click1" />
    <asp:Button Text="make post" ID="Button1" runat="server" />
    </div>

CS code:

private DataTable PulsarLayout;

    private enum Levels

    {

        Home,

        Section,

        Branch,

        Message,

        Slide

    }

 

 

    protected override void OnInit(EventArgs e)

    {

        //added to prevent incorrect reorder (e.g if it is navigated to another page and returns with back button - IE issue)

        Response.Cache.SetCacheability(HttpCacheability.NoCache);

        base.OnInit(e);

    }

    protected void Page_PreInit(object sender, EventArgs e)

    {

 

        if (!IsPostBack)

        {

            PulsarLayout = new DataTable();

 

            DataColumn column = new DataColumn();

            column.DataType = System.Type.GetType("System.Int32");

            column.ColumnName = "PulsarLayoutID";

            column.AutoIncrement = true;

            column.AutoIncrementSeed = 1;

            column.AutoIncrementStep = 1;

            PulsarLayout.Columns.Add(column);

            PulsarLayout.Columns.Add("Level");

            PulsarLayout.Columns.Add("Name");

            PulsarLayout.Columns.Add("ParentID", System.Type.GetType("System.Int32"));

 

            //Empty Home Record

            PulsarLayout.Rows.Add(new string[] { null, Levels.Home.ToString(), "Home", null });

 

 

            //Empty Section Record

            PulsarLayout.Rows.Add(new string[] { null, Levels.Section.ToString(), "Empty", GetLastRowID(PulsarLayout).ToString() });

 

            //Empty Branch Record

            PulsarLayout.Rows.Add(new string[] { null, Levels.Branch.ToString(), "Empty", GetLastRowID(PulsarLayout).ToString() });

 

            //Empty Message Record

            PulsarLayout.Rows.Add(new string[] { null, Levels.Message.ToString(), "Empty", GetLastRowID(PulsarLayout).ToString() });

 

            //Empty Slide Record

            PulsarLayout.Rows.Add(new string[] { null, Levels.Slide.ToString(), "Empty", GetLastRowID(PulsarLayout).ToString() });

 

            Session["PulsarLayout"] = PulsarLayout;

        }

        PulsarChart.GroupEnabledBinding.NodeBindingSettings.DataFieldID = "PulsarLayoutID";

        PulsarChart.GroupEnabledBinding.NodeBindingSettings.DataFieldParentID = "ParentID";

        PulsarChart.RenderedFields.NodeFields.Add(new Telerik.Web.UI.OrgChartRenderedField() { DataField = "Level" });

        PulsarChart.GroupEnabledBinding.NodeBindingSettings.DataSource = Session["PulsarLayout"];

        PulsarChart.DataBind();

 

        if (!IsPostBack)

        {

            for (int i = 0; i < 5; i++)

            {

                RadDock _Newdock = CreateRadDock(i.ToString(), new string[] { "ZoneHome", "ZoneBranch", "ZoneSlide", "ZoneGeneralSlides" });

                ZoneGeneralSlides.Controls.Add(_Newdock);

            }

        }

 

    }

    int GetLastRowID(DataTable _DataTable)

    {

        return Convert.ToInt32(_DataTable.Rows[_DataTable.Rows.Count - 1][0]);

    }

    protected void Page_Init(object sender, EventArgs e)

    {

 

        if (!IsPostBack)

        {

            if (Session["CurrentDockStatesDynamicDocks"] != null)

            {

                ((List<DockState>)Session["CurrentDockStatesDynamicDocks"]).Clear();

            }

 

        }

 

        //Recreate the docks in order to ensure their proper operation

        for (int i = 0; i < CurrentDockStates.Count; i++)

        {

            RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);

            //We will just add the RadDock control to the RadDockLayout.

            // You could use any other control for that purpose, just ensure

            // that it is inside the RadDockLayout control.

            // The RadDockLayout control will automatically move the RadDock

            // controls to their corresponding zone in the LoadDockLayout

            // event (see below).

 

            RadDockLayout1.Controls.Add(dock);

            //We want to save the dock state every time a dock is moved.

            CreateSaveStateTrigger(dock);

        }

    }

 

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            //avoiding sharing Session variables between tabs in one browser

            SessionID.Value = Guid.NewGuid().ToString();

        }

        else

        {

            int Count = ((RadDockZone)PulsarChart.Nodes[0].GroupItems[0].FindControl("ZoneHome")).Docks.Count;

 

            if (Count == 1)

            {

                string HomeID = ((RadDockZone)PulsarChart.Nodes[0].GroupItems[0].FindControl("ZoneHome")).Docks[0].ID;

                ((RadDockZone)PulsarChart.Nodes[0].GroupItems[0].FindControl("ZoneHome")).AllowedDocks = new string[] { HomeID };

            }

            else

            {

                ((RadDockZone)PulsarChart.Nodes[0].GroupItems[0].FindControl("ZoneHome")).AllowedDocks = new string[] { };

            }

        }

    }

 

    private RadDock CreateRadDock(string ID, string[] Zones)

    {

        RadDock dock = new RadDock();

        dock.DockMode = DockMode.Docked;

        dock.UniqueName = ID + "_" + Guid.NewGuid().ToString().Replace("-", "a");

        dock.ID = ID;

        dock.EnableDrag = true;

        dock.AllowedZones = Zones;

        dock.AutoPostBack = true;

        dock.Title = ID;

        dock.DockHandle = DockHandle.TitleBar;

        dock.EnableRoundedCorners = true;

        dock.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.None;

        dock.Style["Padding"] = "5px 0px 0px 0px;";

        return dock;

    }

    protected void dock_DockPositionChanged(object sender, DockPositionChangedEventArgs e)

    {

       

    }

 

    protected void PulsarChart_NodeDataBound(object sender, OrgChartNodeDataBoundEventArguments e)

    {

 

        if (e.Node.Level == 0)

        {

            // If Home Node? Will create new DockZone to contain the Slide Dock.

            OrgChartGroupItem _GroupItem = new OrgChartGroupItem() { Template = new RadZoneTemplate() { ZoneName = "Home", ZoneID = "ZoneHome" } };

            e.Node.GroupItems.Add(_GroupItem);

 

        }

        else if (e.Node.Level == 1)

        {

            // If Section Node? Will create new DockZone to contain the Slide Dock.

            OrgChartGroupItem _GroupItem = new OrgChartGroupItem() { Template = new SectionTemplate() { ZoneName = "Branch(s)" } };

 

            e.Node.GroupItems.Add(_GroupItem);

 

        }

        else if (e.Node.Level == 2)

        {

            // If Branch Node? Will create new DockZone to contain the Slide Dock.

            OrgChartGroupItem _GroupItem = new OrgChartGroupItem() { Template = new RadZoneTemplate() { ZoneName = "Branch(s)", ZoneID = "ZoneBranch" } };

            e.Node.GroupItems.Add(_GroupItem);

        }

        else if (e.Node.Level == 3)

        {

            

        }

        else if (e.Node.Level >= 4)

        {

            // If Slide Node? Will create new DockZone to contain the Slide Dock.

            OrgChartGroupItem _GroupItem = new OrgChartGroupItem() { Template = new RadZoneTemplate() { ZoneName = "Slide(s)", ZoneID = "ZoneSlide" } };

            e.Node.GroupItems.Add(_GroupItem);

 

            // _GroupItem.OrgChart.GroupColumnCount = PulsarChart.Nodes[PulsarChart.Nodes.Count].Level;

        }

    }

    #region RadZoneTemplate

 

    class RadZoneTemplate : ITemplate

    {

        string _ZoneName;

 

        public string ZoneName

        {

            get { return _ZoneName; }

            set { _ZoneName = value; }

        }

 

        string _ZoneID;

 

        public string ZoneID

        {

            get { return _ZoneID; }

            set { _ZoneID = value; }

        }

 

        public void InstantiateIn(Control container)

        {

 

            RadDockZone Zone = new RadDockZone();

            Zone.UniqueName = ZoneID;

            Zone.ID = ZoneID;

            Zone.FitDocks = true;

            Zone.BorderStyle = BorderStyle.None;

            Zone.Style["Width"] = "100%;";

            Zone.Style["Height"] = "100%;";

            Zone.Style["padding"] = "0px 0px 0px 0px;";

            Zone.Style["margin"] = "0px 0px 0px 0px;";

            Zone.BackColor = Color.Aqua;

            container.Controls.Add(Zone);

        }

 

        private void label1_DataBinding(object sender, EventArgs e)

        {

           

        }

    }

 

    #endregion

 

    #region RadTitleBarTemplate

 

    class RadTitleBarTemplate : ITemplate

    {

        string _ZoneName;

 

        public string ZoneName

        {

            get { return _ZoneName; }

            set { _ZoneName = value; }

        }

        public void InstantiateIn(Control container)

        {

            PlaceHolder _ph = new PlaceHolder();

            _ph.Controls.Add(new LiteralControl("<table align=\"right\">"));

            _ph.Controls.Add(new LiteralControl("<tr>"));

            _ph.Controls.Add(new LiteralControl("<td>"));

            _ph.Controls.Add(new LiteralControl("test"));

            _ph.Controls.Add(new LiteralControl("</td>"));

            _ph.Controls.Add(new LiteralControl("</tr>"));

            _ph.Controls.Add(new LiteralControl("</table>"));

            container.Controls.Add(_ph);

        }

 

        private void label1_DataBinding(object sender, EventArgs e)

        {

        }

    }

 

    #endregion

 

    #region RadTitleBarTemplate

 

    class SectionTemplate : ITemplate

    {

        string _ZoneName;

 

        public string ZoneName

        {

            get { return _ZoneName; }

            set { _ZoneName = value; }

        }

        public void InstantiateIn(Control container)

        {

            PlaceHolder _ph = new PlaceHolder();

            _ph.Controls.Add(new LiteralControl("<table style=\"height:100%; width:100%; vertical-align:top; background-color:Black;\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" background-color: \"green\" align=\"right\">"));

            _ph.Controls.Add(new LiteralControl("<tr>"));

            _ph.Controls.Add(new LiteralControl("<td valign=\"top\" align=\"right\">"));

            Button _AddSection = new Button();

            _AddSection.ID = "btnAddSection";

            _AddSection.Text = "Add Section";

 

            _AddSection.Click += new EventHandler(btnAddSection_Click);

            _ph.Controls.Add(_AddSection);

            _ph.Controls.Add(new LiteralControl("</td>"));

            _ph.Controls.Add(new LiteralControl("</tr>"));

            _ph.Controls.Add(new LiteralControl("</table>"));

            container.Controls.Add(_ph);

        }

 

        private void btnAddSection_Click(object sender, EventArgs e)

        {

 

            Button _btn = (Button)sender;

 

            RadOrgChart _PulsarChart = (RadOrgChart)_btn.NamingContainer.Page.FindControl("PulsarChart");

 

            DataTable PulsarLayout = (DataTable)HttpContext.Current.Session["PulsarLayout"];

 

            //Empty Section Record

            PulsarLayout.Rows.Add(new string[] { null, Levels.Section.ToString(), "Empty", "1" });

 

            //Empty Branch Record

            PulsarLayout.Rows.Add(new string[] { null, Levels.Branch.ToString(), "Empty", GetLastRowID(PulsarLayout).ToString() });

 

            //Empty Message Record

            PulsarLayout.Rows.Add(new string[] { null, Levels.Message.ToString(), "Empty", GetLastRowID(PulsarLayout).ToString() });

 

            //Empty Slide Record

            PulsarLayout.Rows.Add(new string[] { null, Levels.Slide.ToString(), "Empty", GetLastRowID(PulsarLayout).ToString() });

 

            HttpContext.Current.Session["PulsarLayout"] = PulsarLayout;

 

            _PulsarChart.DataBind();

        }

        int GetLastRowID(DataTable _DataTable)

        {

            return Convert.ToInt32(_DataTable.Rows[_DataTable.Rows.Count - 1][0]);

        }

    }

 

    #endregion

 

    protected void PulsarChart_GroupItemDrop(object sender, OrgChartGroupItemDropEventArguments e)

    {

       

    }

    protected void PulsarChart_NodeDrop(object sender, OrgChartNodeDropEventArguments e)

    {

       

    }

 

    protected void btnSave_Click(object sender, EventArgs e)

    {

       

    }

    #region Save Dock State

 

    private List<DockState> CurrentDockStates

    {

        get

        {

            //Store the info about the added docks in the session. For real life

            // applications we recommend using database or other storage medium

            // for persisting this information.

            List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesDynamicDocks"];

            if (Object.Equals(_currentDockStates, null))

            {

                _currentDockStates = new List<DockState>();

                Session["CurrentDockStatesDynamicDocks"] = _currentDockStates;

            }

            return _currentDockStates;

        }

        set

        {

            Session["CurrentDockStatesDynamicDocks"] = value;

        }

    }

 

 

 

    private RadDock CreateRadDockFromState(DockState state)

    {

        RadDock dock = new RadDock();

        dock.ApplyState(state);

        dock.DockMode = DockMode.Docked;

        dock.AutoPostBack = true;

        dock.Width = Unit.Pixel(300);

        dock.ID = state.UniqueName;

        dock.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.None;

        dock.DockHandle = DockHandle.TitleBar;

        return dock;

    }

 

    private void CreateSaveStateTrigger(RadDock dock)

    {

        //Ensure that the RadDock control will initiate postback

        // when its position changes on the client or any of the commands is clicked.

        //Using the trigger we will "ajaxify" that postback.

        dock.AutoPostBack = true;

        dock.CommandsAutoPostBack = true;

    }

    protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)

    {

        //Populate the event args with the state information. The RadDockLayout control

        // will automatically move the docks according that information.

        foreach (DockState state in CurrentDockStates)

        {

            e.Positions[state.UniqueName] = state.DockZoneID;

            e.Indices[state.UniqueName] = state.Index;

        }

    }

 

    protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)

    {

        //Save the dock state in the page Session. This will enable us

        // to recreate the dock in the next Page_Init.

        CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();

    }

    #endregion

 

 

 

    protected void PulsarChart_DataBound(object sender, EventArgs e)

    {

 

    }

    protected void PulsarChart_GroupItemDataBound(object sender, OrgChartGroupItemDataBoundEventArguments e)

    {

       

    }

    protected void PulsarChart_DataBinding(object sender, EventArgs e)

    {

 

    }

    protected void btnSave_Click1(object sender, EventArgs e)

    {

        string dd = ((RadDockZone)PulsarChart.Nodes[0].GroupItems[0].FindControl("ZoneHome")).Docks[0].ID.ToString();

    }

    protected void PulsarChart_DataBound1(object sender, EventArgs e)

    {

    }

Scenario : try to fill first two aqua zones by any docks, and then try to fill the last aqua zone , it will not fit in the last zone !!

and another problem is that the dock state doesn't saved in the first postback.
Thank you.

[haitham]

Any Updates ? Pleaase i need an answer urgently.

Thank you.

[Peter Filipov]

Hi Haitham,

I was able to reproduce the issue. The problematic behavior will be fixed for the next internal build (next Tuesday).

Regards,
Peter Filipov
the Telerik team

[Peter Filipov]

Hi Haitham,

The fix is ready and it will be available in our internal build today. I reviewed your project and refactored it. Please review the attachment. Keep in mind that when you bind the RadOrgChart control twice in a roll e.g. with the same data, the templates will have different IDs after the second binding. For that reason I removed the click handler of the button (AddSection) and implemented a custom logic in PreInit stage of the page life cycle.

In order to avoid duplication of the threads, please let us continue our discussion in only one of the threads.

Regards,
Peter Filipov
the Telerik team

[haitham]

Hello Sir,

first of all i'm sorry for my delay in replay.

i've tested your attached code and it worked perfect in adding the new section button, but i'm facing another problem here that is i want to move the generated docks into OrgChart that contains on RadDockZone Templates but i don't know why Raddockzones doesn't accept those docks.

i'm using the latest Telerik version 2012.2.607.35

Thank you.

[haitham]

Any response ??

[Peter Filipov]

Hi Haitham,

We were able to reproduce the issue and we need more time to investigate and fix it. As soon as we resolve the issue I will inform you.

Regards,
Peter Filipov
the Telerik team

[Peter Filipov]

Hi Haitham,

We were able to found out what is causing the unwanted behavior. We did some improvements on the RadOrgChart control with the idea to keep to all recommendations for a databound control. The microsoft's documentation points as a best practice to bind all databind controls in Page_Init event handler.
The wrong behavior can be avoided by binding the RadOrgChart in the Init stage of the page life cycle. Please review the attachment.

All the best,
Peter Filipov
the Telerik team

[haitham]

Hi Peter,

Thank you for your answer.

I've tested your code sample and it's worked but still has one problem, when i drag one RadDock control into any RadDockZone i found it's not fit into the zone from the first time or first postpack, but when i drag it again for the second time it's fit into the zone, i hope you can help me with this issue.

Thank you.

[haitham]

Hi Peter,

Any updates ?

[Peter Filipov]

Hello Haitham,

I was able to reproduce the issue and resolve it. Please stay tuned for our upcoming service pack. The fix will be available in it.
In a way of gratitude for pointing this out I updated your Telerik points.

Regards,
Peter Filipov
the Telerik team

[haitham]

Hi Peter,

Could you please tell me how to work around this problem to proceed in my project, untill you release the next version. And when the next version will be available ?

Thank you.

[Peter Filipov]

Hello Haitham,

I am afraid that is not possible to workaround the issue. The next release will be at the end of the month 22-26 July.

Regards,
Peter Filipov
the Telerik team

[haitham]

Hello Peter,

Any new about the new release ?

Thank you.

[Kate]

Hi Haitham,

We released SP1 this week. Please download it and check if still get the same issue with the control.

Regards,
Kate
the Telerik team