Create dropzone from dragged treeview node

38 posts, 1 answers
  1. Jay
    Jay avatar
    5 posts
    Member since:
    Oct 2007

    Posted 29 May 2008 Link to this post

    Hi,
    I'm trying to figure out how to create something like the way you can add controls to pages in Sitefinity, by dragging a treeview node to DropZones.
    I know how to just drag and drop a node to a DropZone and then create a RadDock in the controller that has the same ID as the "e.HtmlElementID".

    But doing it this way doesn't work very well because I'm not dragging a RadDock so I can't choose where in the zone to put it because there is no interaction between the dragged node and the DropZone, like there is between a dragged RadDock and the DropZone.

    Has anyone tried this and can point me in the right direction?

    Edit: Should be RadDock in the title for this thread, not DropZone...
  2. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 30 May 2008 Link to this post

    Hi Jay,

    Could you please describe in more details your exact scenario and the result you want to achieve? When do you create the RadDock object and what you expect to happen when you drop the treeview node? Having more information about your scenario we will be able to think of a possible solution to the issue.

    Best regards,
    Sophy
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jay
    Jay avatar
    5 posts
    Member since:
    Oct 2007

    Posted 30 May 2008 Link to this post

    Hi thanks for your reply,
    Basically what happens in sitefinitys edit mode. I want to be able to drag a node and make it interact with the dropzones as if the node were a dragged RadDock.

    At the moment I have the option for the user to:
    1. select a control in a dropdownlist
    2. select the RadDockZone where the control should be added from a dropdownlist
    3. Press the button and the control (RadDock with the controller inside) gets created and assigned to the selected RadDockZone.

    The user can then move the RadDocks as he/she wishes and save the layout.

    I would just want to also offer the ability to list the controls in a RadTreeView and let the user select a control, drag it over a RadDockZone to add the control. But if you just drag a regular RadTreeNode the DropZone obviously don't highlight and let you position the control/node between existing RadDocks in the zone, and that's my problem that I would like to solve.

    I've tried to add a RadDock as a control to a TreeNode and thought that it might act is if I were dragging the RadDock and not the node, but that didn't work.

    Is it possible to activate the RadDockZone with client side code so that it "activates" when a TreeNode hovers it?

    Thanks for taking you time
  5. Answer
    Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 02 Jun 2008 Link to this post

    Hi Jay,

    I prepared a sample page demonstrating how you can use RadDocks as TreeView nodes and drag and drop them to a given zone. Please, find the example attached and let me know whether it answers your requirements. You can feel free to modify and style the sample page according to your scenario.
    In case the enclosed example cannot help you achieve the desired result, send us a simple running application which demonstrates your scenario so that we can take a closer look at it. You will need to open a support ticket in order to have the right to attach files. Please, download a trial version of the RadControls for ASP.NET AJAX suite and you will have the right to open a support ticket. For your convenience I have attached a screenshot with instructions how to open a support ticket.

    Best regards,
    Sophy
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Denny
    Denny avatar
    13 posts
    Member since:
    May 2008

    Posted 06 Jun 2008 Link to this post

    Hi, I'm in exactly same situation, is it possible that instead of 'MOVE' but 'COPY' the dock object from tree node into the zone area?
  7. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 10 Jun 2008 Link to this post

    You should create another RadDock via AJAX on the server, when the RadDock is dropped into the zone.
    For this goal you should set RadDock property AutoPostback to True and handle RadDock server side event OnDockPositionChanged. In the handler you should dynamically create the same RadDock as the docked one.
  8. horsted
    horsted avatar
    17 posts
    Member since:
    Sep 2004

    Posted 12 Jun 2008 Link to this post

    Hi, Obi-Wan Kenobi,

    You wouldn't ahppen to have any code, that does what you describe, that you are willing to share?

    I would be very interested - thanks in advance!

    /Horsted
  9. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 25 Jun 2008 Link to this post

    I didn't have a code, which illustrates my words. I changed a lot the MyPortal example to achieve the desired goals.
    The example below demonstrates how to add dynamically RadDocks to a treeview. Once you drop a RadDock(TreeNode) from a treeView to a DropZone the dock is COPIED via AJAX.
    ASPX:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
    <%@ register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
        .rtIn  
        {  
            vertical-align: baseline !important;  
            display: block !important;  
        }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
         <asp:scriptmanager id="ScriptManager" runat="server" /> 
            <div> 
                 
                <br/>Select Docking Zone:  
                <asp:dropdownlist id="DropDownZone" runat="server" datasource="<%#GetZones() %>" 
                    datatextfield="ID" datavaluefield="ClientID" width="150">  
                </asp:dropdownlist> 
                <asp:button runat="server" CssClass="button" id="ButtonAddDock" text="Add Dock" onclick="ButtonAddDock_Click" /> 
            </div> 
            <br/> 
               
            <telerik:raddocklayout runat="server" id="RadDockLayout1"   
                onsavedocklayout="RadDockLayout1_SaveDockLayout" 
                onloaddocklayout="RadDockLayout1_LoadDockLayout">  
            <div style="width:400px;background-color:Red;float:left">  
                <telerik:RadTreeView ID="RadTreeView1" runat="server">  
                    <nodes> 
                         <telerik:RadTreeNode text="Dock1">  
                            <NodeTemplate> 
                                 <telerik:raddockzone id="TreeZone1" runat="server">  
                                   
                                 </telerik:raddockzone> 
                            </NodeTemplate>                                 
                        </telerik:RadTreeNode> 
                        <telerik:RadTreeNode text="Dock2">  
                         <NodeTemplate> 
                                 <telerik:raddockzone id="TreeZone2" runat="server">  
                                   
                                 </telerik:raddockzone> 
                            </NodeTemplate> 
                        </telerik:RadTreeNode> 
                            <telerik:RadTreeNode text="Dock3">   
                             <NodeTemplate> 
                                 <telerik:raddockzone id="TreeZone3" runat="server">  
                                   
                                 </telerik:raddockzone> 
                            </NodeTemplate> 
                        </telerik:RadTreeNode> 
                    </nodes> 
                </telerik:RadTreeView> 
                </div> 
                <div style="width:300px;background-color:Aqua">  
                <asp:Label ID="Label1" runat="server" Text="Drop the dock here:"></asp:Label> 
                      <telerik:raddockzone id="DropZone" runat="server">  
                                   
                    </telerik:raddockzone> 
                </div> 
                <div style="display:none">  
                    Hidden UpdatePanel, which is used to receive the new dock controls.   
                    We will move them with script to the desired initial dock zone.  
                    <asp:updatepanel runat="server" id="UpdatePanel1">  
                        <triggers> 
                            <asp:asyncpostbacktrigger controlid="ButtonAddDock" eventname="Click" /> 
                        </triggers> 
                    </asp:updatepanel> 
                </div> 
            </telerik:raddocklayout> 
        </form> 
    </body> 
    </html> 
     
    CODE Behind:
    using System;  
    using System.Collections;  
    using System.Collections.Generic;  
    using System.ComponentModel;  
    using System.Data;  
    using System.Drawing;  
    using System.Web;  
    using System.Web.SessionState;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.HtmlControls;  
    using Telerik.Web.UI;  
     
    public partial class Default2 : System.Web.UI.Page  
    {  
       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["CurrentDockStatesMyPortal"];  
                    if (Object.Equals(_currentDockStates, null))  
                    {  
                        _currentDockStates = new List<DockState>();  
                        Session["CurrentDockStatesMyPortal"] = _currentDockStates;  
                    }  
                    return _currentDockStates;  
                }  
                set 
                {  
                    Session["CurrentDockStatesMyPortal"] = value;  
                }  
            }  
     
            protected void Page_Load(object sender, EventArgs e)  
            {  
                if (!IsPostBack)  
                {  
                    DropDownZone.DataBind();  
                }  
            }  
     
            public ArrayList GetZones()  
            {  
                ArrayList zones = new ArrayList();  
                zones.Add(RadTreeView1.Nodes[0].FindControl("TreeZone1"));  
                zones.Add(RadTreeView1.Nodes[1].FindControl("TreeZone2"));  
                zones.Add(RadTreeView1.Nodes[2].FindControl("TreeZone3"));  
     
                return zones;  
            }  
     
            protected void Page_Init(object sender, EventArgs e)  
            {  
                //Recreate the docks in order to ensure their proper operation  
                for (int i = 0; i < CurrentDockStates.Count; i++)  
                {  
                    if (CurrentDockStates[i].Closed == false)  
                    {  
                        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 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 session. This will enable us   
                // to recreate the dock in the next Page_Init.   
                CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();  
            }  
     
            private RadDock CreateRadDockFromState(DockState state)  
            {  
                RadDock dock = new RadDock();  
                dock.ID = string.Format("RadDock{0}", state.UniqueName);  
                dock.ApplyState(state);  
                dock.DockPositionChanged += new DockPositionChangedEventHandler(dock_DockPositionChanged);  
                dock.Command += new DockCommandEventHandler(dock_Command);  
                dock.Commands.Add(new DockCloseCommand());  
                dock.Commands.Add(new DockExpandCollapseCommand());  
     
                return dock;  
            }  
     
            void dock_DockPositionChanged(object sender, DockPositionChangedEventArgs e)  
            {  
                RadDock currentDock = (RadDock)sender;  
                //Dock should come from TreeViewZones otherwise it will not have a duplicate   
                if (e.DockZoneID == DropZone.ClientID && currentDock.DockZoneID != DropZone.ClientID && currentDock.DockZoneID != "")  
                {  
                    int docksCount = CurrentDockStates.Count;  
                    //Create a copy of the dropped Dock  
                    RadDock dock = new RadDock();  
                    dock.UniqueName = Guid.NewGuid().ToString();  
                    dock.ID = string.Format("RadDock{0}", dock.UniqueName);  
                    dock.Title ="COPY OF:"+ currentDock.Title;  
                    dock.Text = currentDock.Text;  
                    dock.Width = Unit.Pixel(300);  
     
                    dock.Commands.Add(new DockCloseCommand());  
                    dock.Commands.Add(new DockExpandCollapseCommand());  
                    dock.Command += new DockCommandEventHandler(dock_Command);  
                    UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);  
     
                    ScriptManager.RegisterStartupScript(  
                    dock,  
                    this.GetType(),  
                    "AddDock",  
                    string.Format(@"function _addDock() {{
        Sys.Application.remove_load(_addDock);
        $find('{1}').dock($find('{0}'));
        $find('{0}').doPostBack('DockPositionChanged');
    }};
    Sys.Application.add_load(_addDock);", dock.ClientID, DropZone.ClientID),  
                    true);  
     
                    //Right now the RadDock control is not docked. When we try to save its state  
                    // later, the DockZoneID will be empty. To workaround this problem we will   
                    // set the AutoPostBack property of the RadDock control to true and will   
                    // attach an AsyncPostBackTrigger for the DockPositionChanged client-side  
                    // event. This will initiate second AJAX request in order to save the state  
                    // AFTER the dock was docked in RadDockZone1.  
                    CreateSaveStateTrigger(dock);  
                }  
            }  
     
            private RadDock CreateRadDock()  
            {  
                int docksCount = CurrentDockStates.Count;  
     
                RadDock dock = new RadDock();  
                dock.UniqueName = Guid.NewGuid().ToString();  
                dock.ID = string.Format("RadDock{0}", dock.UniqueName);  
                dock.Title = "Dock" + docksCount.ToString();  
                dock.Text = string.Format("Added at {0}", DateTime.Now);  
                dock.Width = Unit.Pixel(300);  
     
                dock.Commands.Add(new DockCloseCommand());  
                dock.Commands.Add(new DockExpandCollapseCommand());  
                dock.Command += new DockCommandEventHandler(dock_Command);  
     
                return dock;  
            }  
     
            void dock_Command(object sender, DockCommandEventArgs e)  
            {  
                if (e.Command.Name == "Close")  
                {  
                    ScriptManager.RegisterStartupScript(  
                    UpdatePanel1,  
                    this.GetType(),  
                    "RemoveDock",  
                    string.Format(@"function _removeDock() {{
        Sys.Application.remove_load(_removeDock);
        $find('{0}').undock();
        $get('{1}').appendChild($get('{0}'));
        $find('{0}').doPostBack('DockPositionChanged');
    }};
    Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),  
                    true);  
     
                }  
            }  
     
            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;  
     
                AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();  
                saveStateTrigger.ControlID = dock.ID;  
                saveStateTrigger.EventName = "DockPositionChanged";  
                UpdatePanel1.Triggers.Add(saveStateTrigger);  
     
                saveStateTrigger = new AsyncPostBackTrigger();  
                saveStateTrigger.ControlID = dock.ID;  
                saveStateTrigger.EventName = "Command";  
                UpdatePanel1.Triggers.Add(saveStateTrigger);  
            }  
     
            protected void ButtonAddDock_Click(object sender, EventArgs e)  
            {  
                RadDock dock = CreateRadDock();  
                 UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);  
     
                ScriptManager.RegisterStartupScript(  
                dock,  
                this.GetType(),  
                "AddDock",  
                string.Format(@"function _addDock() {{
        Sys.Application.remove_load(_addDock);
        $find('{1}').dock($find('{0}'));
        $find('{0}').doPostBack('DockPositionChanged');
    }};
    Sys.Application.add_load(_addDock);", dock.ClientID, DropDownZone.SelectedValue),  
                true);  
     
                CreateSaveStateTrigger(dock);  
                  
                
            }  
        }  
     
     
     
    Good luck!
  10. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 27 Jun 2008 Link to this post

    Hi All,

    I have the same requirement, to be able to add items into a DockZone-type area by dragging items from a tree view (or even better a PanelBar but we won't go there)

    I have run Obi-Wan Kenobi's demo code but the item that is dragged stays in the destination zone as well as a copy being created, not really what I was after.

    What I, and I guess the original poster, am after is the same functionality as the Sitefinity page edit mode, where you can drag a "control" item from the tree-view in the sidebar into an area on the page which acts similarly to a DockZone in that it allows you to place the new item either above, below or between existing items.  Dropping the tree-view item then causes a postback allowing the page to draw in a new item of the correct type into the page.

    Can you tell us which controls are being used to do this, or even provide a simplistic example?

    Many thanks in advance.

    Nick
  11. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 04 Jul 2008 Link to this post

    I got your point!
    I looked at the dock implementation in SiteFinity and it seems that this is not a RadDock for asp.net ajax. However I think that I'll be able to achieve such a functionality with RadDock, but I should override some RadDockZone client methods. I'll try it soon -when I have a time for fun:) -  and I'll post the solution.
    Wish me luck!:)
  12. horsted
    horsted avatar
    17 posts
    Member since:
    Sep 2004

    Posted 04 Jul 2008 Link to this post

    Hi Obi-Wan Kenobi,

    Just want to let you know, that it's very kind of you to help out - really appriciate it... 

    And the best of luck to you :-)

    Thanks, horsted
  13. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 04 Jul 2008 Link to this post

    Ooh, good luck!  :D 

    I had a nose through the Sitefinity product and came to the same conclusion....it's not a standard RadControl that they have used for this.  Unfortunately I have very little knowledge of the Telerik controls and so had to put this to one side while I develop the rest of the application.

    Any help you can give will be most appreciated.

    Cheers,
    Nick
  14. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 09 Jul 2008 Link to this post

    Finally I'm done!!!!:)
    When RadTreeNode is dropped over the zone,a new dock is created via AJAX.
    ASPX:
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head> 
        <title>Untitled Page</title> 
        <script type="text/javascript">  
        var currentTreeView;  
        var previousZone;  
        var currentZone;  
        function onNodeDragging(sender, args)  
                    {  
                        currentTreeView = sender;  
                        var target = args.get_htmlElement();  
                         
                        var zone = null;  
                        var parentNode = target;  
                        while (parentNode != null)  
                        {  
                            if(parentNode.id)  
                            {  
                                if($find(parentNode.id))  
                                {  
                                    if(Object.getTypeName($find(parentNode.id)) =="Telerik.Web.UI.RadDockZone")                  
                                    {  
                                        zone = $find(parentNode.id);  
                                        break;  
                                    }  
                                }   
                            }  
                            parentNode = parentNode.parentNode;  
                        }  
                        if(previousZone != null)  
                        {  
                            previousZone._hidePlaceholder();  
                            previousZonenull;  
                        }  
                        if(zone != null)  
                        {  
                                target.style.cursor = "hand";  
                                zone._showPlaceholder(args._node);  
                                previousZone = zone;  
                                currentZone = zone;  
                        }  
                        else  
                        {    
                            try  
                            {  
                                zone._hidePlaceholder();  
                            }   
                            catch(e)  
                            {  
                              
                            }  
                        }   
                    }  
            function onNodeDropped(obj,args)  
            {  
                $get("currentZoneTB").value = currentZone.get_id();  
                currentZone._hidePlaceholder();  
            }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server" style="overflow:scroll">  
            <asp:ScriptManager ID="ScriptManager1" runat="server">  
            </asp:ScriptManager> 
            <%--hidden inputs used to exchange data with server: Place holder position and currentZone--%> 
            <input type="text" id="currentPlaceholderPosition" runat="server" style="display:none"/>  
            <input type="text" id="currentZoneTB" runat="server" style="display:none" /> 
              
            <telerik:RadTreeView ID="RadTreeView1" runat="server" 
                      
                 EnableDragAndDrop="True" 
                 OnNodeDrop="RadTreeView1_HandleDrop" 
                 OnClientNodeDropped="onNodeDropped"   
                 OnClientNodeDragging="onNodeDragging" 
                        > 
                            <Nodes> 
                                <telerik:RadTreeNode Text="Node1" PostBack="true"></telerik:RadTreeNode> 
                                <telerik:RadTreeNode Text="Node2" PostBack="true"></telerik:RadTreeNode> 
                                <telerik:RadTreeNode Text="Node3" PostBack="true"></telerik:RadTreeNode> 
                                <telerik:RadTreeNode Text="Node4" PostBack="true"></telerik:RadTreeNode> 
                                <telerik:RadTreeNode Text="Node5" PostBack="true"></telerik:RadTreeNode> 
                                <telerik:RadTreeNode Text="Node6" PostBack="true"></telerik:RadTreeNode> 
                                <telerik:RadTreeNode Text="Node7" PostBack="true"></telerik:RadTreeNode> 
                            </Nodes> 
                    </telerik:RadTreeView> 
                  
                <telerik:RadDockLayout runat="server" ID="RadDockLayout1" 
                 onsavedocklayout="RadDockLayout1_SaveDockLayout" 
                onloaddocklayout="RadDockLayout1_LoadDockLayout" > 
                    <telerik:RadDockZone runat="server" ID="RadDockZone1"   
                    Width="400px" MinHeight="300px" style="float:left">  
                    </telerik:RadDockZone>                                  
                    <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="400px" MinHeight="300px">  
                            
                    </telerik:RadDockZone>    
                 
                         <div style="display:none">  
                            Hidden UpdatePanel, which is used to receive the new dock controls.   
                            We will move them with script to the desired initial dock zone.  
                            <asp:updatepanel runat="server" id="UpdatePanel1">  
                                <triggers> 
                                    <asp:asyncpostbacktrigger controlid="RadTreeView1" eventname="NodeDrop" /> 
                                </triggers> 
                    </asp:updatepanel> 
                </div> 
                
            </telerik:RadDockLayout> 
            <script type="text/javascript">  
           var isNodeDragged = false;  
           //parameter can be dock or treeNode  
           function Telerik.Web.UI.RadDockZone.prototype._showPlaceholder(obj)  
            {    
                if(Object.getTypeName(obj) =="Telerik.Web.UI.RadTreeNode")  
                {  
                    isNodeDragged = true;  
                    var node = obj;  
                    this._repositionPlaceholder(node.get_element());  
                    var placeholderStyle = this._placeholder.style;  
                    placeholderStyle.height = "30px";  
                    placeholderStyle.width = "100%";  
                    placeholderStyle.display = "block";  
                    isNodeDragged = false;  
                }  
                else  
                {     
                    var dock = obj;  
                    this._repositionPlaceholder(dock.get_element());  
                    var dockdockBounds = dock._getBoundsWithBorderAndMargin();  
                    var placeholderMargin = dock._getMarginBox(this._placeholder);  
                    var placeholderBorder = dock._getBorderBox(this._placeholder);  
                    var horizontal = this.get_isHorizontal();  
                    var placeholderStyle = this._placeholder.style;  
                    placeholderStyle.height = dockBounds.height - (placeholderMargin.vertical + placeholderBorder.vertical) + "px";  
                    placeholderStyle.width = this.get_fitDocks() && !horizontal ? "100%" : dockBounds.width - (placeholderMargin.horizontal + placeholderBorder.horizontal) + "px";  
                    placeholderStyle.display = "block";  
                }  
            }  
          function Telerik.Web.UI.RadDockZone.prototype._repositionPlaceholder(dock_element)        
          {   
            var ddm = Telerik.Web.DragDropManager._getInstance();  
            var scrollOffset = ddm.getScrollOffset(dock_element, /* recursive */ true);  
            var location;  
            //fix TreeNode drag  
            if(isNodeDragged == true)  
            {     
                location = new Sys.UI.Point(currentTreeView._mousePos.x, currentTreeView._mousePos.y);        
            }  
            else  
            {  
                location = new Sys.UI.Point(window._event.clientX, window._event.clientY);  
            }  
            //end fix  
            location = ddm.addPoints(location, scrollOffset);  
            var nearestChild = this._findItemAt(location, dock_element);  
            var zone_element = this.get_element();  
            if (null == nearestChild)  
            {  
                zone_element.insertBefore(this._placeholder, this._clearElement);  
            }  
            else  
            {  
                if(nearestChild.previousSibling != this._placeholder)  
                {     
                    zone_element.insertBefore(this._placeholder, nearestChild);  
                }  
            }  
            //GET placeholder position  
            for(var i=0;i<zone_element.childNodes.length;i++)  
            {  
                if(zone_element.childNodes[i] == this._placeholder)  
                {  
                    var currentPos = i;  
                    $get('currentPlaceholderPosition').value =currentPos-2;     
                }  
            }  
            //end Get  
        }  
            </script> 
        </form> 
    </body> 
    </html> 
     
    CodeBehind:
    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["CurrentDockStatesMyPortal"];  
                if (Object.Equals(_currentDockStates, null))  
                {  
                    _currentDockStates = new List<DockState>();  
                    Session["CurrentDockStatesMyPortal"] = _currentDockStates;  
                }  
                return _currentDockStates;  
            }  
            set 
            {  
                Session["CurrentDockStatesMyPortal"] = value;  
            }  
        }  
     
        protected void Page_Load(object sender, EventArgs e)  
        {  
              
        }  
     
        //public ArrayList GetZones()  
        //{  
        //    ArrayList zones = new ArrayList();  
        //    zones.Add(RadDockZone1);  
        //    //zones.Add(RadDockZone2);  
     
        //    return zones;  
        //}  
     
        protected void Page_Init(object sender, EventArgs e)  
        {  
            //Recreate the docks in order to ensure their proper operation  
            for (int i = 0; i < CurrentDockStates.Count; i++)  
            {  
                if (CurrentDockStates[i].Closed == false)  
                {  
                    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 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 session. This will enable us   
            // to recreate the dock in the next Page_Init.   
            CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();  
        }  
     
        private RadDock CreateRadDockFromState(DockState state)  
        {  
            RadDock dock = new RadDock();  
            dock.ID = string.Format("RadDock{0}", state.UniqueName);  
            dock.ApplyState(state);  
            dock.Command += new DockCommandEventHandler(dock_Command);  
            dock.Commands.Add(new DockCloseCommand());  
            dock.Commands.Add(new DockExpandCollapseCommand());  
     
            return dock;  
        }  
     
        
        void dock_Command(object sender, DockCommandEventArgs e)  
        {  
            if (e.Command.Name == "Close")  
            {  
                ScriptManager.RegisterStartupScript(  
                UpdatePanel1,  
                this.GetType(),  
                "RemoveDock",  
                string.Format(@"function _removeDock() {{
        Sys.Application.remove_load(_removeDock);
        $find('{0}').undock();
        $get('{1}').appendChild($get('{0}'));
        $find('{0}').doPostBack('DockPositionChanged');
    }};
    Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),  
                true);  
     
            }  
        }  
     
        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;  
     
            AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();  
            saveStateTrigger.ControlID = dock.ID;  
            saveStateTrigger.EventName = "DockPositionChanged";  
            UpdatePanel1.Triggers.Add(saveStateTrigger);  
     
            saveStateTrigger = new AsyncPostBackTrigger();  
            saveStateTrigger.ControlID = dock.ID;  
            saveStateTrigger.EventName = "Command";  
            UpdatePanel1.Triggers.Add(saveStateTrigger);  
        }  
     
     
        protected void ButtonAddDock_Click(object sender, EventArgs e)  
        {  
             
        }  
     
        protected void RadTreeView1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)  
        {  
            RadTreeNode sourceNode = e.SourceDragNode;  
            int currentPos = int.Parse(currentPlaceholderPosition.Value);  
              
     
            int docksCount = CurrentDockStates.Count;  
     
            RadDock dock = new RadDock();  
            dock.UniqueName = Guid.NewGuid().ToString();  
            dock.ID = string.Format("RadDock{0}", dock.UniqueName);  
            dock.Title = "Dock" + docksCount.ToString();  
            dock.Text = sourceNode.Text;  
            dock.Width = Unit.Pixel(300);  
     
            dock.Commands.Add(new DockCloseCommand());  
            dock.Commands.Add(new DockExpandCollapseCommand());  
            dock.Command += new DockCommandEventHandler(dock_Command);  
     
            UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);  
             
     
            ScriptManager.RegisterStartupScript(  
            dock,  
            this.GetType(),  
            "AddDock",  
            string.Format(@"function _addDock() {{
        Sys.Application.remove_load(_addDock);
        $find('{1}').dock($find('{0}'),{2}); 
        $find('{0}').doPostBack('DockPositionChanged');
    }};
    Sys.Application.add_load(_addDock);", dock.ClientID, currentZoneTB.Value,currentPos),  
            true);  
     
            CreateSaveStateTrigger(dock);  
        }  
     


  15. Happy
    Happy avatar
    63 posts
    Member since:
    Aug 2008

    Posted 27 Aug 2008 Link to this post

    Thanks! I'm trying to make this work but as soon as I start dragging I'm getting an error in the javascript that Telerik.Web.DragDropManager is undefined. What is this? I can't find it in any documentation.

    I wish Telerik would provide a sample app that tries to duplicate SiteFinity like editting.
  16. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 28 Aug 2008 Link to this post

    Hi Happy,

    The error you experience is due to a modification in the drag/drop functionality of the RadDock for ASP.NET AJAX in the latest updates of the control. The previous versions of the RadDock control used the drag and drop functionality which is provided by the ASP.Net Ajax framework  but in the latest version of the control the drag/drop functionality has been replaced by our own improved implementation which also addresses some previously existing problems.

    In the provided example some of the methods of the RadDock control which concern its dragging behavior are overridden and therefore using the latest Telerik.Web.UI dll these methods throw the error you observe. Please, find attached a modified version of this example which works with the latest update of the control. However, note that the example does not demonstrate an intended behavior of the RadDock control and that is why it is not an official example as it is possible to lead to some side effects.

    Please, describe in more details what kind of an example similar to that in Sitefinity you are requesting for. We need more information about the exact scenario you want to achieve in order to help you.

    Kind regards,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  17. Happy
    Happy avatar
    63 posts
    Member since:
    Aug 2008

    Posted 28 Aug 2008 Link to this post

    Thanks! Works great! Almost.... I can drag new nodes onto my layout and even rearrange any preexisting nodes. But every so often, any newly dropped nodes all of a sudden disappear, like some background timer or something cleared them out. What am I missing?

    What do you mean by "not intended behaviour"? What part is not intended? Don't you want users to be able to add new zones to a page? All your samples involve clicking a button, then looking for where it appeared, and then dragging it. This sample is so much nicer. I did see the other post where there were actual docks in the tree itself that could be dragged but that was not very nice and wasted a lot of space. It would be nice if you found a way to be able to say that this sample is a supported usage. This is one aspect of SiteFinity that I was trying to duplicate and it seems mostly solved (although unsupported?). I've read other posts from users wanting SiteFinity like behaviour.

    It looks like they allow one to just upload a master page (css layout) and then manipulate it through the web. I've built my own processer to take my master pages (css or tables or whatever) and I can rebuild the page for editting by injecting RadDock's where necessary. This mostly works but the RadDocks don't seem to properly constrain themselves to the areas (div, td, etc) that they are in. Minor issue.

    The other remaining functionality that I like in SiteFinity is it's really nice the way the page mostly looks the way it's suppose to. There are no big extra headers or controls on the various zones that are all visible at the same time.  They do highlight the actual drop zones so that users can see which areas are editable. But when one hovers over an editable item, then the content of that zone fades out some and the zone interface becomes visible ontop. Then the user can drag or click edit to manipulate that zone.

    Can I do this with RadDock? Have the RadDock's main content visible without anything else not even any borders (I believe you support this) but then the standard RadDock interface becomes visible when I hover over it. Then I could grab it to drag or click one of my custom buttons to edit that zone.

    Thanks!
  18. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 29 Aug 2008 Link to this post

    Hi,

    I am not sure what exactly you mean under "newly dropped nodes all of a sudden disappear". We are not able to reproduce such a behavior. Could you please send us some screenshots or a video which demonstrates how this behavior could be reproduced. You will need to open a support ticket in order to have the right to attach files. You could also send us a list of steps we need to follow to reproduce the problem. The only thing which comes into my mind is the case in which no dock is created when you drop the TreeView node to an inappropriate place - over another RadDock for example. For your convenience I have attached a screenshot which demonstrates this case.

    Under "not an intended behavior" I meant that the RadDock is not designed to support such a behavior. That is why, we cannot guarantee that it will work as expected in all possible scenarios. You see that some of the RadDock's methods are overridden in the provided example and therefore it is possible that this causes some side effects in specific cases. Nevertheless, if the example answers the requirements of your scenario you can feel free to use it accordingly.

    It is possible to achieve a similar functionality to the one in Sitefinity you describe using RadDock for ASP.NET AJAX but you will need to play with the RadDock's DockHandle and its css styles. You can use the Set Drag Handle online example for reference. I have attached an example which provides general idea how to achieve the desired functionality.

    If you have any other questions, do contact us again.

    All the best,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  19. Happy
    Happy avatar
    63 posts
    Member since:
    Aug 2008

    Posted 29 Aug 2008 Link to this post

    I've submitted a ticket that demonstrates the disappearing nodes. Thanks for the sample!!! I've been playing around with it and I've mostly got it working now. I switched it from using the custom dock handle div you had to using the built in handle with the title and commands. I just hide that immediately at startup. There is quite a bit of flickering while dragging it. Any way to get the default handle to not show initially? If I turn it off in the properties, then the get_handle returns null.

    I was trying to get the original dock contents to be faded out instead of completely off while hovering but filter alpha opaque doesn't seem to work right within the dock. Doesn't seem to have any effect.

    This is what I've got so far:

    <%@ page language="C#" autoeventwireup="true"  %> 
     
    <%@ register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head id="Head1" runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
        .dockHoverStyle  
        {  
            background-color: gray !important;  
        }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:scriptmanager id="manager1" runat="server">  
        </asp:scriptmanager> 
     
        <script type="text/javascript">  
            function SetHandleDock(dock, args) {  
                var defaultHandle = dock.get_handle();  
                defaultHandle.style.display = "none";  
                //  
                var dockContent = document.getElementById("Content_" + dock.get_id());  
                //  
                $addHandler(dock.get_element(),"mouseover", onMouseOverHandler);  
                $addHandler(dock.get_element(),"mouseout", onMouseOutHandler);  
            }  
            function onMouseOverHandler()  
            {     
                var dock = $find(this.id);  
                this.className += "dockHoverStyle";  
     
                var defaultHandle = dock.get_handle();  
                defaultHandle.style.display = "block";  
     
                var dockProperties = document.getElementById("Properties_" + dock.get_id());  
                var dockContent = document.getElementById("Content_" + dock.get_id());  
                if (dockProperties != null) {  
                    dockContent.style.display = "none";  
                    dockProperties.style.display = "block";  
                }  
     
                  
            }  
            function onMouseOutHandler()  
            {  
                var dock = $find(this.id);  
     
                var defaultHandle = dock.get_handle();  
                defaultHandle.style.display = "none";  
     
                var dockProperties = document.getElementById("Properties_" + dock.get_id());  
                var dockContent = document.getElementById("Content_" + dock.get_id());  
                if (dockProperties != null) {  
                    dockContent.style.display = "block";  
                    dockProperties.style.display = "none";  
                }  
                 
                var cssClasses = this.className.split(' ');  
                this.className = "";  
                for(var i = 0; i < cssClasses.length - 1; i++)  
                {  
                    this.className += cssClasses[i] + ' ';  
                }  
                document.title = this.className;  
            }  
        </script> 
     
        <telerik:raddocklayout id="layout1" runat="server">  
            <table> 
                <tr> 
                    <td> 
                        <telerik:RadDockZone id="zone1" runat="server" width="300px" Height="400px">  
                            <telerik:RadDock id="dock1" runat="server" onclientinitialize="SetHandleDock" height="150px" Title="Custom Control">  
                                <contenttemplate>      
                                    <div id="Properties_dock1" style="display:none; filter:alpha(opacity=10);    " > 
                                        Instead of showing content let's show some settings for this control:<br /><br /> 
                                        Setting1=1<br /> 
                                        Setting2=2<br /> 
                                        Setting2=2<br /> 
                                    </div> 
                                    <div id="Content_dock1">  
                                        <b>Custom Control</b><br /> 
                                        Sample custom control output html or maybe even the actual output that reflects the settings above  
                                    </div> 
                                </contenttemplate> 
                            </telerik:RadDock> 
                            <telerik:RadDock id="dock2" runat="server" onclientinitialize="SetHandleDock" height="100px" Title="Generic Content">    
                            <contenttemplate> 
                                    <div id="Content_dock2" > 
                                        <b>Generic Content</b><br /> 
                                        <br /> 
                                        dggju dfsyh rt et j yk r earg y tyj erg qer grt hyt tu r tgqer ger t hrt gqer ge r th rg qerg erg rtj yt rt hrt ve g  
                                    </div> 
                            </contenttemplate>   
                            </telerik:RadDock> 
                        </telerik:RadDockZone> 
                    </td> 
                    <td> 
                        <telerik:RadDockZone id="RadDockZone1" runat="server" width="300px" Height="400px">  
                        </telerik:RadDockZone> 
                    </td> 
                    <td> 
                        <telerik:RadDockZone id="RadDockZone2" runat="server" width="300px" Height="400px">  
                        </telerik:RadDockZone> 
                    </td> 
                </tr> 
            </table> 
        </telerik:raddocklayout> 
        </form> 
    </body> 
    </html> 
     
  20. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 02 Sep 2008 Link to this post

    Hi,

    I have attached a modified version of the code you have sent us which demonstrates how to add some transparency to the style applied to the RadDock control and how to avoid the quick initial appearance of the dock handle using a trick. The titlebar initially appears because the RadDock control is rendered server-side and you make the titlebar invisible at a later stage. The flickering problem you mention appears when dragging the RadDock very quickly but unfortunately it could not be resolved. I could not understand completely what you meant under  "dock contents to be faded out instead of completely off". In case the attached page cannot help you achieve the desired behavior, please, describe in more details what is the exact result you expect so that we can get a better idea of the problem. It would be best if you could also send us some screenshots which demonstrate what you want to achieve.

    Best wishes,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  21. Happy
    Happy avatar
    63 posts
    Member since:
    Aug 2008

    Posted 08 Sep 2008 Link to this post

    Thanks, I looked it over but that's not what I was after. That effect is causing the ENTIRE dock to ALWAYS be faded out.

    In my sample, I have two divs within the dock area. The grab handle is not visible unless I hover. I was trying to get it so that normally the dock would just fully display what is in the content div (opacity=100) . As soon as the user hovered over that dock, the content div would dim out (opacity=10?) and the grab handle would appear (opacity=100). Optionally, if a properties div was present, it would also appear (opacity=100).

    For some reason, when I try to set the opacity of the nested div, it has no effect. It's seems to always show 100%. But I do see that I can change it for the whole raddock but that's not what I was after. I wanted reduced opacity for something within the dock.
  22. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 10 Sep 2008 Link to this post

    Hello,

    Thank you for clarifying the issue. Please, find attached a modified version of the previously attached sample page which demonstrates how you could achieve the desired behavior. Note that you need to handle the OnClientDragStart and the OnClientDragEnd events of each RadDock in order to add and remove correspondingly the hover css styles which are applied to the docks.
    Let us know if you need further assistance.

    Best regards,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  23. Happy
    Happy avatar
    63 posts
    Member since:
    Aug 2008

    Posted 18 Sep 2008 Link to this post

    Thanks, that's a bit better!

    My newest issue with this drag drop treenode into a dock is that I'm trying to introduce an iframe to let me better display the source page being editted as close as possible to WYSIWYG. Orginally, I was doing everything in one page so drag-drop worked nicely, but depending on the source page, it would just not render right. So now I'm trying to make a page with the tree that hosts an iframe with the source page and docks. I can't seem to get drag drop to work into the child iframe. The tree is in the parent and the docks are in the iframe.

    Is this something that could be made to work or is this a dead end?

    thanks for all the help!
  24. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 23 Sep 2008 Link to this post

    Hello Happy,

    Unfortunately, it is not possible to achieve the scenario you describe if the treeview is in the parent page and the RadDockZones are in the Iframe. The Iframe is a separate page and it is not possible to drop a treeview node over it and create a RadDock in the iframe. You can add the TreeView and the RadDockZones in an Iframe but they cannot be on separate pages. You will need to choose a different approach in achieving your exact scenario.
    If you have other questions, do contact us again.

    Best regards,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  25. fahad
    fahad avatar
    5 posts
    Member since:
    Jan 2009

    Posted 02 Feb 2009 Link to this post

    Hello Sophy,

    i am using your example DockAndTreeView.zip, i can drag from tree view and drop to RaddockZone, only one problem is when i am dropping to raddockzone the position , sometimes it position exactly where i want to drop or sometimes 2 places above where i drop it.

    My findings are problem with this function :

    Telerik.Web.UI.RadDockZone.prototype._repositionPlaceholder = function(dock_element, location)//TEKI: Add location
     {
          //fix TreeNode drag  
            if(isNodeDragged == true)  
            {     
                location = new Sys.UI.Point(currentTreeView._mousePos.x, currentTreeView._mousePos.y);        
            }     
            //end fix  

      var nearestChild = this._findItemAt(location, dock_element);

      var zone_element = this.get_element();

      if (null == nearestChild)
      {
          //Bug fix: ID 9516
          // _clearElement must be after all docks and _placeholder
       zone_element.insertBefore(this._placeholder, this._clearElement);
      }
      else
      {
       if(nearestChild.previousSibling != this._placeholder)
       {
        zone_element.insertBefore(this._placeholder, nearestChild);
       }
      }
      //GET placeholder position  
            for(var i = 0;i < zone_element.childNodes.length; i++)  
            {  
                if(zone_element.childNodes[i] == this._placeholder)  
                {  
                    var currentPos = i;
                    document.title = currentPos - 2;  
                    $get('currentPlaceholderPosition').value = currentPos - 2;    //// this line is causes problem   
                }  
            }  
            //end Get
     }        

    this line  $get('currentPlaceholderPosition').value = currentPos - 2; is causing the problem when i set it to  $get('currentPlaceholderPosition').value = currentPos; it again works fine and suddenly it causes the node to drop 2 dock below in raddock zone.

    Please help me.

  26. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 04 Feb 2009 Link to this post

    I couldn't reproduce the problem you have. I tested with IE7 . Could you please write here step by step scenario to reproduce the problem.
  27. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 04 Feb 2009 Link to this post

    I couldn't reproduce the problem you have. I tested with IE7 . Could you please write here step by step scenario to reproduce the problem.
  28. fahad
    fahad avatar
    5 posts
    Member since:
    Jan 2009

    Posted 05 Feb 2009 Link to this post

    Dear Obi-Wan Kenobi ,

    I will clear my situation: TreeView is in a UserControl, RaddockLayout and Zones are another usercontrol and both these controls are in a usercontrol, my problem is that when ever i try to add the asyncpostbacktrigger(trigger for nodedrop event of treeview) from codebehind my code give me those errors, means not inserting docks in the desired position.

    Is there is any way i will add asyncpostbacktrigger at runtime and still get the same functionality.

    Regards,

    Syed Fahad Anwar
  29. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 10 Feb 2009 Link to this post

    Hi Syed,

    Please open a new support ticket and send us a running project, where we can observe these errors. Once we receive it and reproduce the problem, we will do our best to help you.

    Best regards,
    Petio Petkov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  30. Toby
    Toby avatar
    59 posts
    Member since:
    Jul 2009

    Posted 16 Sep 2009 Link to this post

    Hi,

    I have just tried your demo http://www.telerik.com/ClientsFiles/097935_DockAndTreeView.zip which works fine in IE - but it does not work properly in Firefox - when you try and drag it the node just gets stuck on the page before you get to the zone.

    any ideas?

    thanks

    Toby
  31. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 21 Sep 2009 Link to this post

    Hi Toby,

    I examined the source code of the project and found an error in the definitions of some of the JavaScript methods. I have corrected the code and attached the project to the thread. There shouldn't be any problems now.

    Please test it out and let me know if you still experience any of the problems.

    Kind regards,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017