Dockzone issue.....

3 posts, 1 answers
  1. Geoff
    Geoff avatar
    28 posts
    Member since:
    Jul 2010

    Posted 13 Aug 2010 Link to this post

    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

     



  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 18 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Geoff
    Geoff avatar
    28 posts
    Member since:
    Jul 2010

    Posted 18 Aug 2010 Link to this post

    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

Back to Top