Having trouble updating Dock and not entire DockZone.

2 posts, 0 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 01 Dec 2010 Link to this post

    Hi all,

    Relatively simple question to check my understand of what is/is not possible.

    I have one DockZone with two Docks inside of it. Each of these docks is hosting an interactive chart.
    I would like to AJAXify both of these, but have the updated controls be limited to the Dock which initiated the AJAX request.

    I read that using RadAjaxManager to do this is not recommended. Indeed, when I set up a RadAjaxManager such that it attempted to update individual docks (as opposed to waiting for an AJAX request from the DockZone and then updating the DockZone) I receive the error: Telerik.Web.UI.RadDockZone can contain only controls of type Telerik.Web.UI.RadDock. I believe that this is occurring because of the 'imaginary' update panel which is being wrapped around the respective dock.

    I read that the more accepted means of doing this is to use the standard UpdatePanel. I attempted to do so using the following snippit of HTML;

    <telerik:RadDock ID="RadDock3" Runat="server" DockMode="Docked" Skin="Web20" Width="33.3%">
        <ContentTemplate>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <uc1:PowerUsage ID="PowerUsage1" runat="server" />
                </ContentTemplate>
            </asp:UpdatePanel>
        <ContentTemplate>
     </telerik:RadDock>

    In addition, I moved the UpdatePanel outside of RadDock3 so that it wrapped the entire RadDock. Neither of these options proved fruitful, though. I continue to receive the above error message.

    What am I doing wrong here? Is it not possible to update individual docks within a DockZone? 
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 03 Dec 2010 Link to this post

    Hello Sean,

    Yes it is possible. You should make the RadDock1 AsyncPostbackTrigger for the update panel placed inside the dock if you want some of the dock's commands to update the content, and set its UpdateMode property to Conditional. For your convenience I have created a simple project that updates a Label inside the dock when custom command is clicked. Here is the full source code:

    <%@ Page Language="C#" AutoEventWireup="true" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <script runat="server">
            protected void DockCommand(object sender, Telerik.Web.UI.DockCommandEventArgs e)
            {
                Label1.Text = e.Command.Name + "  " + DateTime.Now.ToString();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                        OnCommand="DockCommand" CommandsAutoPostBack="true">
                        <Commands>
                            <telerik:DockCloseCommand />
                            <telerik:DockCommand Name="CustomCommand" />
                        </Commands>
                        <ContentTemplate>
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                <ContentTemplate>
                                    <asp:Label ID="Label1" runat="server" />
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="RadDock1" />
                                </Triggers>
                            </asp:UpdatePanel>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    PS. The CommandsAutoPostBack property must be set to true in order for the ajax request to occur.

    All the best,
    Pero
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top