Dockzone issue.....

[Geoff]

Hi there

We are creating a site which uses the Docks and Zones from Telerik.

So far we have based our testing on an example provided to use from you guys - 162243_savedockstatedbloadingpanel.vb

Initially we were only concerned with loading dock states from the db - which works very well.

We are now trying to use the 'Add Dock' functionality but have hit a couple of problems....

1> There is a function in the Telerik example:

 

 

Public Function GetZones() As ArrayList

 

 

 

Dim zones As New ArrayList()

 

zones.Add(RadDockZone1)

zones.Add(RadDockZone2)

 

 

Return zones

 

 

 

End Function

 

Although this works in the example when we try to replicate it in our tests this does not populate the drop down list??

2> The save function.....

Protected

 

 

Sub ButtonAddDock_Click(ByVal sender As Object, ByVal e As EventArgs)

 

 

 

Dim dock As RadDock = CreateRadDock()

 

 

 

'find the target zone and add the new dock there

 

 

 

Dim dz As RadDockZone = DirectCast(FindControl(DropDownZone.SelectedItem.Text), RadDockZone)

 

dz.Controls.Add(dock)

CreateSaveStateTrigger(dock)

 

 

'Load the selected widget in the RadDock control

 

dock.Tag = DroptDownWidget.SelectedValue

LoadWidget(dock)

 

 

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "MoveDock", String.Format("function _moveDock() {{" & vbCr & vbLf & vbTab & vbTab & vbTab & " " & vbTab & "Sys.Application.remove_load(_moveDock);" & vbCr & vbLf & vbTab & vbTab & vbTab & vbTab & " $find('{1}').dock($find('{0}'),{2});" & vbCr & vbLf & vbTab & vbTab & vbTab & " }};" & vbCr & vbLf & vbTab & vbTab & vbTab & " Sys.Application.add_load(_moveDock);", dock.ClientID, DropDownZone.SelectedValue, dz.Docks.Count), True)

 

 

 

End Sub

 

 ...throws an error on this line:

Dim dz As RadDockZone = DirectCast(FindControl(DropDownZone.SelectedItem.Text), RadDockZone)

 

 
saying it cant find the RadDockZone.

Again this works fine on your example but not in our tests.

If I hard code the above line. for example: Dim dz As RadDockZone = RadDockZone1

then it finds the zone but then throws an exception when '$find('{1}').dock($find('{0}'),{2});" ' is called.

It would appear the 2 issues are related and are not due to bad or wrong coding. I think its a page lifecycle issue but cant seem to get to the bottom of it.

Can you help please as we are 90% towards achieving the required functionality.

Shown below is the ASPX and ASPX.VB files...............

-------------------------------------------------------------------------------------------------------
TESTCONTROLPANEL.ASPX

<%

 

@ Page Title="" Language="vb" AutoEventWireup="true" MasterPageFile="~/App_Templates/IFM.Master" CodeBehind="Test Control Panel.aspx.vb" Inherits="IFM_Code_Testing.Test_Control_Panel" ClassName="Test_Control_Panel" %>

 

<%

 

@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

 

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<

 

 

asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

 

 

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 

 

 

<script type="text/javascript">

 

 

 

var currentLoadingPanel = null;

 

 

 

var currentUpdatedControl = null;

 

 

 

function RequestStart(sender, args) {

 

currentLoadingPanel = $find(

 

"LoadingPanel1");

 

currentUpdatedControl =

 

"TableLayout";

 

currentLoadingPanel.show(currentUpdatedControl);

}

 

 

function ResponseEnd() {

 

 

 

//hide the loading panel and clean up the global variables

 

 

 

if (currentLoadingPanel != null)

 

currentLoadingPanel.hide(currentUpdatedControl);

currentUpdatedControl =

 

null;

 

currentLoadingPanel =

 

null;

 

}

 

 

</script>

 

 

 

</telerik:RadCodeBlock>

 

</

 

 

asp:Content>

 

<

 

 

asp:Content ID="Content2" ContentPlaceHolderID="ControlPanelHolder" runat="server">

 

<

 

 

div id="ControlPanel">

 

 

 

<asp:Panel ID="TitlePanel" runat="server" >

 

 

 

<asp:Image ID="Image2" runat="server" ImageUrl="~/images/collapse_blue.jpg"/>&nbsp;&nbsp;

 

 

 

<asp:Label ID="Label1" runat="server">Show Control Panel</asp:Label>

 

 

 

</asp:Panel>

 

 

 

<asp:Panel ID="ContentPanel" runat="server" CssClass="ContentPanel" >

 

 

 

<div class="module">

 

Select Module:

 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

 

 

 

<asp:DropDownList runat="server" ID="DroptDownWidget" Width="150">

 

 

 

<asp:ListItem Text="ExchangeRates.ascx" Value="~/Controls/ExchangeRates.ascx" Selected="True"></asp:ListItem>

 

 

 

<asp:ListItem Text="Horoscopes.ascx" Value="~/Controls/Horoscopes.ascx"></asp:ListItem>

 

 

 

<asp:ListItem Text="News.ascx" Value="~/Controls/News.ascx"></asp:ListItem>

 

 

 

<asp:ListItem Text="Weather.ascx" Value="~/Controls/Weather.ascx"></asp:ListItem>

 

 

 

</asp:DropDownList>

 

 

 

<br />

 

Select Docking Zone:

 

 

<asp:DropDownList ID="DropDownZone" runat="server" >

 

 

 

<asp:ListItem Text="RadDockZone1" Value="RadDockZone1" Selected="True"></asp:ListItem>

 

 

 

<asp:ListItem Text="RadDockZone2" Value="RadDockZone2"></asp:ListItem>

 

 

 

<asp:ListItem Text="RadDockZone3" Value="RadDockZone3"></asp:ListItem>

 

 

 

 

</asp:DropDownList>

 

 

 

<br />

 

 

 

<br />

 

 

 

<asp:Button runat="server" CssClass="button" ID="ButtonAddDock" Text="Add Dock (AJAX)"

 

 

 

OnClick="ButtonAddDock_Click" />

 

 

 

</div>

 

 

 

</asp:Panel>

 

 

 

<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

 

 

 

TargetControlID="ContentPanel"

 

 

 

ExpandControlID="TitlePanel"

 

 

 

CollapseControlID="TitlePanel"

 

 

 

Collapsed="true"

 

 

 

AutoExpand="false" TextLabelID="Label1" ExpandedText="Hide Control Panel" CollapsedText="Show Control Panel" ImageControlID="Image2" CollapsedImage="~/images/collapse_blue.jpg" ExpandedImage="~/images/expand_blue.jpg">

 

 

 

</asp:CollapsiblePanelExtender>

 

　

 

 

</div>

 

</

 

 

asp:Content>

 

<

 

 

asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

 

</

 

 

asp:Content>

 

<

 

 

asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

 

<

 

 

asp:Panel ID="Panel1" runat="server">

 

 

 

<telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"

 

 

 

OnLoadDockLayout="RadDockLayout1_LoadDockLayout" EnableEmbeddedSkins="true">

 

 

 

<table id="TableLayout">

 

 

 

<tr>

 

 

 

<td>

 

 

 

<telerik:RadDockZone runat="server" ID="RadDockZone1" Width="280" MinHeight="600">

 

 

 

</telerik:RadDockZone>

 

 

 

</td>

 

 

 

<td>

 

 

 

<telerik:RadDockZone runat="server" ID="RadDockZone2" Width="280" MinHeight="600">

 

 

 

</telerik:RadDockZone>

 

 

 

</td>

 

 

 

<td>

 

 

 

<telerik:RadDockZone runat="server" ID="RadDockZone3" Width="280" MinHeight="600">

 

 

 

</telerik:RadDockZone>

 

 

 

</td>

 

 

 

</tr>

 

 

 

</table>

 

 

 

</telerik:RadDockLayout>

 

 

 

</asp:Panel>

 

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnRequestStart="RequestStart"

 

 

 

ClientEvents-OnResponseEnd="ResponseEnd">

 

<%

 

-- <AjaxSettings>

 

<telerik:AjaxSetting AjaxControlID="ButtonAddDock" EventName="Click">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Panel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>--

 

 

%>

 

 

 

</telerik:RadAjaxManager>

 

 

</

 

 

asp:Content>

 

--------------------------------------------------------------------------------------------------------

TESTCONTROLPANEL.ASPX.VB...........

Public

 

 

Class Test_Control_Panel

 

 

 

Inherits System.Web.UI.Page

 

 

 

Private _conn As New SqlConnection(ConfigurationManager.ConnectionStrings("CONNSTRING").ConnectionString)

 

 

 

Private _userID As Integer = 999999

 

　

 

 

Private ReadOnly Property CurrentDockStates() As List(Of DockState)

 

 

 

Get

 

 

 

Dim dockStatesFromDB As String = ""

 

_conn.Open()

 

 

Dim command As New SqlCommand("select state from IFM_User_Page_Layout where UserID='" + _userID.ToString() + "'", _conn)

 

dockStatesFromDB = command.ExecuteScalar().ToString()

_conn.Close()

 

 

Dim _currentDockStates As New List(Of DockState)()

 

 

 

Dim stringStates As String() = dockStatesFromDB.Split("|"c)

 

 

 

For Each stringState As String In stringStates

 

 

 

If stringState.Trim() <> String.Empty Then

 

_currentDockStates.Add(

 

DockState.Deserialize(stringState))

 

 

 

End If

 

 

 

Next

 

 

 

Return _currentDockStates

 

 

 

End Get

 

 

 

End Property

 

 

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

 

 

 

If Not IsPostBack Then

 

 

 

End If

 

 

 

End Sub

 

 

 

Public Function GetZones() As ArrayList

 

 

 

Dim zones As New ArrayList()

 

zones.Add(RadDockZone1)

zones.Add(RadDockZone2)

 

 

Return zones

 

 

 

End Function

 

 

 

Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)

 

 

 

Dim i As Integer = 0

 

 

 

While i < CurrentDockStates.Count

 

 

 

If CurrentDockStates(i).Closed = False Then

 

 

 

Dim dock As RadDock = CreateRadDockFromState(CurrentDockStates(i))

 

CreateSaveStateTrigger(dock)

 

 

'Load the selected widget

 

LoadWidget(dock)

RadDockLayout1.Controls.Add(dock)

 

 

End If

 

System.

 

Math.Max(System.Threading.Interlocked.Increment(i), i - 1)

 

 

 

End While

 

 

 

End Sub

 

 

 

Protected Sub RadDockLayout1_LoadDockLayout(ByVal sender As Object, ByVal e As DockLayoutEventArgs)

 

 

 

For Each state As DockState In CurrentDockStates

 

e.Positions(state.UniqueName) = state.DockZoneID

e.Indices(state.UniqueName) = state.Index

 

 

Next

 

 

 

End Sub

 

 

 

Protected Sub RadDockLayout1_SaveDockLayout(ByVal sender As Object, ByVal e As DockLayoutEventArgs)

 

 

 

Dim stateList As List(Of DockState) = RadDockLayout1.GetRegisteredDocksState()

 

 

 

Dim serializedList As New StringBuilder()

 

 

 

Dim i As Integer = 0

 

 

 

While i < stateList.Count

 

serializedList.Append(stateList(i).ToString())

serializedList.Append(

 

"|")

 

System.

 

Math.Max(System.Threading.Interlocked.Increment(i), i - 1)

 

 

 

End While

 

 

 

Dim dockState As String = serializedList.ToString()

 

 

 

If dockState.Trim() <> [String].Empty Then

 

_conn.Open()

 

 

Dim command As New SqlCommand([String].Format("update IFM_User_Page_Layout set state='{0}' where UserID='" + _userID.ToString() + "'", dockState), _conn)

 

command.ExecuteNonQuery()

_conn.Close()

 

 

End If

 

 

 

End Sub

 

 

 

Private Function CreateRadDockFromState(ByVal state As DockState) As RadDock

 

 

 

Dim dock As New RadDock()

 

dock.DockMode =

 

DockMode.Docked

 

dock.ID =

 

String.Format("RadDock{0}", state.UniqueName)

 

dock.ApplyState(state)

dock.Commands.Add(

 

New DockCloseCommand())

 

dock.Commands.Add(

 

New DockExpandCollapseCommand())

 

 

 

Return dock

 

 

 

End Function

 

 

 

Private Function CreateRadDock() As RadDock

 

 

 

Dim docksCount As Integer = CurrentDockStates.Count

 

 

 

Dim dock As New RadDock()

 

dock.DockMode =

 

DockMode.Docked

 

dock.UniqueName =

 

Guid.NewGuid().ToString()

 

dock.ID =

 

String.Format("RadDock{0}", dock.UniqueName)

 

dock.Title =

 

"Dock"

 

dock.Text =

 

String.Format("Added at {0}", DateTime.Now)

 

dock.Width =

 

Unit.Pixel(300)

 

dock.Commands.Add(

 

New DockCloseCommand())

 

dock.Commands.Add(

 

New DockExpandCollapseCommand())

 

 

 

Return dock

 

 

 

End Function

 

 

 

Private Sub CreateSaveStateTrigger(ByVal dock As RadDock)

 

dock.AutoPostBack =

 

True

 

dock.CommandsAutoPostBack =

 

True

 

 

 

Dim updatedControl As New AjaxUpdatedControl()

 

updatedControl.ControlID =

 

"Panel1"

 

 

 

Dim setting1 As New AjaxSetting(dock.ID)

 

setting1.EventName =

 

"DockPositionChanged"

 

setting1.UpdatedControls.Add(updatedControl)

 

 

Dim setting2 As New AjaxSetting(dock.ID)

 

setting2.EventName =

 

"Command"

 

setting2.UpdatedControls.Add(updatedControl)

RadAjaxManager1.AjaxSettings.Add(setting1)

RadAjaxManager1.AjaxSettings.Add(setting2)

 

 

End Sub

 

　

 

 

Protected Sub ButtonAddDock_Click(ByVal sender As Object, ByVal e As EventArgs)

 

 

 

Dim dock As RadDock = CreateRadDock()

 

 

 

'find the target zone and add the new dock there

 

 

 

Dim dz As RadDockZone = DirectCast(FindControl(DropDownZone.SelectedItem.Text), RadDockZone)

 

dz.Controls.Add(dock)

CreateSaveStateTrigger(dock)

 

 

'Load the selected widget in the RadDock control

 

dock.Tag = DroptDownWidget.SelectedValue

LoadWidget(dock)

 

 

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "MoveDock", String.Format("function _moveDock() {{" & vbCr & vbLf & vbTab & vbTab & vbTab & " " & vbTab & "Sys.Application.remove_load(_moveDock);" & vbCr & vbLf & vbTab & vbTab & vbTab & vbTab & " $find('{1}').dock($find('{0}'),{2});" & vbCr & vbLf & vbTab & vbTab & vbTab & " }};" & vbCr & vbLf & vbTab & vbTab & vbTab & " Sys.Application.add_load(_moveDock);", dock.ClientID, DropDownZone.SelectedValue, dz.Docks.Count), True)

 

 

 

End Sub

 

 

 

Private Sub LoadWidget(ByVal dock As RadDock)

 

 

 

If String.IsNullOrEmpty(dock.Tag) Then

 

 

 

Return

 

 

 

End If

 

 

 

Dim widget As Control = LoadControl(dock.Tag)

 

dock.ContentContainer.Controls.Add(widget)

 

 

End Sub

 

　

　

　

　

End

 

 

Class

 

[Pero]

Hi Geoff,

Straight to your questions:

1. Please examine the VB code from the MyPortal demo. You will notice in the Page_Load that the DropDownZone DropDownList control calls its DataBind method. Please call this method in your Page_Load and see if it resolves the issue.

Protected Sub Page_Load(sender As Object, e As EventArgs)
    If Not IsPostBack Then
        DropDownZone.DataBind()
    End If
End Sub

2. Instead of using the DropDownZone.SelectedValue in the following code, that registers client script from the server, please use dz.ClientID:
Old code:

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "MoveDock", String.Format("function _moveDock() {{" & vbCr & vbLf & vbTab & vbTab & vbTab & " " & vbTab & "Sys.Application.remove_load(_moveDock);" & vbCr & vbLf & vbTab & vbTab & vbTab & vbTab & " $find('{1}').dock($find('{0}'),{2});" & vbCr & vbLf & vbTab & vbTab & vbTab & " }};" & vbCr & vbLf & vbTab & vbTab & vbTab & " Sys.Application.add_load(_moveDock);", dock.ClientID, DropDownZone.SelectedValue, dz.Docks.Count), True)

New, modified code:

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "MoveDock", String.Format("function _moveDock() {{" & vbCr & vbLf & vbTab & vbTab & vbTab & " " & vbTab & "Sys.Application.remove_load(_moveDock);" & vbCr & vbLf & vbTab & vbTab & vbTab & vbTab & " $find('{1}').dock($find('{0}'),{2});" & vbCr & vbLf & vbTab & vbTab & vbTab & " }};" & vbCr & vbLf & vbTab & vbTab & vbTab & " Sys.Application.add_load(_moveDock);", dock.ClientID, dz.ClientID, dz.Docks.Count), True)

All the best,
Pero
the Telerik team

[Geoff]

Hey Pero....

Point 1: Ooops, sorry. Really cant believe I missed that :( Apologies for wasting your time.

Point 2: Excellent - thats sorted it out.

As usual top draw support - thanks very much

All the best