Telerik Forums
UI for ASP.NET AJAX Forum
1 answer
185 views

Dear all,

I have an scenario where there is a radtreeview on left and raddockzone on right.

user can drag node from treeview and drop it on raddockzone at particular place.

i done some work and for vertical orientation it is working fine,  but i want horizontal layout and let user drop two docks on a row, but this i couldnt acheive.

my aspx and code are below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DockAndTreeView.aspx.cs" Inherits="testRAD.DockAndTreeView" %> 
 
<%@ 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;     
                    }     
                }      
            }     
            parentNodeparentNode = parentNode.parentNode;     
        }     
    
        if(previousZone != null)     
        {     
            previousZone._hidePlaceholder();     
            previousZone= null;     
        }     
        if(zone != null)     
        {     
            zone._showPlaceholder(args._node);     
            previousZone = zone;     
            currentZone = zone;     
        }          
    }  
    function onClientNodeDropping(sender, eventArgs)  
    {                 
        var command = {};  
        htmlElement = eventArgs.get_htmlElement();            
                                      
        if(eventArgs.destinationNode && (eventArgs.destinationNode.get_allowDrop() || sender._draggingPosition != "over") && eventArgs.destinationNode.get_isEnabled())  
        {             
            if(eventArgs.destinationNode._getControl() == this)  
            {                 
                command.commandName = "NodeDrop";  
            }  
            else  
            {  
                command.commandName = "NodeDropOnTree";          
            }  
        }             
        else if(htmlElement.id && htmlElement.id != "")  
        {  
            command.commandName = "NodeDropOnHtmlElement";  
        }   
        if(!command.commandName)  
        {         
            if (currentZone!=null)  
            {             
                currentZone._hidePlaceholder();  
            }  
        }  
    }  
     
    function onNodeDropped(obj, args)     
    {     
        if (currentZone!=null)  
        {  
            $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"    
             OnClientNodeDropping="onClientNodeDropping" 
             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="800px" MinHeight="300px" style="float:left" Orientation="Horizontal">     
                </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, location)     
        {       
            if(Object.getTypeName(obj) == "Telerik.Web.UI.RadTreeNode")     
            {     
                isNodeDragged = true;     
                var node = obj;     
                this._repositionPlaceholder(node.get_element(), location);     
                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(), location);     
                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";     
            }     
        }    
           
    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;        
            }     
        }     
        //end Get   
    }           
        
        </script>    
    </form>    
</body>    
</html>    
    
 
using System;  
using System.Collections;  
using System.Configuration;  
using System.Data;  
using System.Linq;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.HtmlControls;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using System.Xml.Linq;  
using Telerik.Web.UI;  
using System.Collections.Generic;  
 
namespace testRAD  
{  
    public partial class DockAndTreeView : 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)  
        {  
 
        }  
 
 
        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)  
        {  
            if (!string.IsNullOrEmpty(e.HtmlElementID))  
            {  
                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.DockMode = DockMode.Docked;  
                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);  
            }  
        }     
    }  
}  
 


Kindly help me acheive this scenario...
Obi-Wan Kenobi
Top achievements
Rank 1
 answered on 07 Apr 2009
5 answers
178 views
Hi All

I've just added a RadAjaxManager to a masterpage and a Proxy to a control which is in the content pane. The RadAjaxManager had a server-side event called AjaxRequest. The Proxy doesn't. I have no idea how to do the things I was doing in the AjaxRequest in the Proxy.

Any ideas?

Cheers
Jon
Iana Tsolova
Telerik team
 answered on 07 Apr 2009
1 answer
95 views
Hello,

I am using a master page, and a child page.

The master page contains the navigation menu and some Inline CSS for various things. One is the CSS styles for the radsheduler.

The child page contains the radscheduler control, and when viewed in IE 6.0 the todays date cell is properly displayed and styled.

however when viewed with IE 7.0 the Todays Date Cell styles are not visible.

I have even added the !important tag to the styles.

please help

G
Atanas Korchev
Telerik team
 answered on 07 Apr 2009
3 answers
230 views
Hi just a simple one...

I have a TextBox and I want to put a ajaxtoolkit:TextBoxWatermarkExtender on it. It works, however when I put the TextBox ID in the RadAjaxManager the watermark does not work anymore.

Anyone know how to fix??
Iana Tsolova
Telerik team
 answered on 07 Apr 2009
0 answers
57 views
Hi All,

I want my radScheduler to be look like as RadCalender.
Actually I am using RadScheduler for dropping appointments.
And I want it to look same as Calender object just like in outlook or general ASP Calender.

How can I achieve that?

Can anyone help me out in this?

Best Regards,
Hrushikesh.
Hrushikesh Mokashi
Top achievements
Rank 1
 asked on 07 Apr 2009
1 answer
130 views
Hi,

I have been trying to find a full example without any success! I have created a demo application using the sample which preserves the docks in session state. I have been trying to take this further but not getting very far.

All I want to do is:

- Have the user click a button to create a dock (which I have done).
- Have the user click save to write out to an xml file the complete dock details for all the docks i.e. the layout, title and dock text.
- Reload the whole dock structure, content, layout when the page loads.

I would have thought that this was quite a common requirement but I cannot find an example and I am really struggling to put something together like this.

Can anyone help? Does anyone have an example?

Regards,

Mark
Obi-Wan Kenobi
Top achievements
Rank 1
 answered on 07 Apr 2009
1 answer
184 views
hi,
i used Radpane.style("display")="none"
the reason fro not using visible=false is that it creates an error as i used the radpane in the radajaxmanager
I also tried with visibility="Hidden"

But its also not working
Please help me...
Thanks
Svetlina Anati
Telerik team
 answered on 07 Apr 2009
3 answers
193 views
I am looking to implement a personalized portal. Initially I was looking at the ASP.NET Web Part Framework but I just discovered Telerik RadDock. I would appreciare any comments/suggestions on why I would use one over the other. My core requirements are:

Server Side Controls will be responsible for content of 'widgets'
Consistent look and feel (styling) in title bar
Expand, Collapse, Add, Delete docks
Drag and Drop on IE, Firefox and Safari
Catch drag and drop events to notify user
Reset to default view
State will be saved to a database using userid as the key

Thanks.
Obi-Wan Kenobi
Top achievements
Rank 1
 answered on 07 Apr 2009
1 answer
90 views
Hi,

Paging with RadGrid Works Fine when I Select either the Next or Previous hyperlinks created using this syntax : <PagerStyle NextPageText="next" PrevPageText="Prev" /> .  But it does nothing when the right / left Arrow beside the Text is clicked.
Please send me a Solution ASAP. 

Thanks.
Princy
Top achievements
Rank 2
 answered on 07 Apr 2009
1 answer
113 views
Hi,

paging works for me if I use <PagerStyle NextPageText="next" PrevPageText="Prev" /> however if I click on the image to either side , doesn't respond.Please help ??


Thanking you in advavnce.
Shinu
Top achievements
Rank 2
 answered on 07 Apr 2009
Narrow your results
Selected tags
Tags
+? more
Top users last month
Tien
Top achievements
Rank 1
Iron
Krasimir
Top achievements
Rank 3
Bronze
Iron
Iron
Cedar
Top achievements
Rank 1
Iron
Emil
Top achievements
Rank 1
Iron
Kyle Watson
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Tien
Top achievements
Rank 1
Iron
Krasimir
Top achievements
Rank 3
Bronze
Iron
Iron
Cedar
Top achievements
Rank 1
Iron
Emil
Top achievements
Rank 1
Iron
Kyle Watson
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?