This is a migrated thread and some comments may be shown as answers.

Having trouble updating Dock and not entire DockZone.

1 Answer 54 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 01 Dec 2010, 10:12 PM
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? 

1 Answer, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 03 Dec 2010, 02:21 PM
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.
Tags
Dock
Asked by
Sean
Top achievements
Rank 2
Answers by
Pero
Telerik team
Share this question
or