New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

AutoPostBack

Drag a RadDock control to initiate AJAX request
Docking Zone 1

AutoPostBack enabled
  • Collapse
  • Close
This RadDock control will initiate postback when it is moved around the page. You could create AsyncPostbackTrigger to replace the postback with an AJAX call.
AutoPostBack disabled
  • Collapse
  • Close
This RadDock control will NOT initiate postback when it is moved around the page. However, if you post back the page using another control, the DockPositionChanged event will be fired.
Docking Zone 2
Event log

Initiating Postback

The RadDock control has an AutoPostBack property which will make the control initiate a postback when it is moved into another RadDockZone, or when its index in its current zone is changed using drag and drop.

Note: if you do not place the RadDock and RadDockZone controls in a RadDockLayout, the RadDock positions will not be changed automatically.

Another option for initiating a postback is by using client-side code:

<input type="button" value="DoPostBack" onclick="InitiatePostback()" />
<script type="text/javascript">
    function InitiatePostback() {
        $find('<%= RadDock1.ClientID %>').doPostBack();
    }
</script>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.AutoPostBack.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-custom">
        <strong style="padding-bottom: 10px; display: block;">Drag a RadDock control to initiate AJAX request</strong>
        <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
            <table>
                <tr>
                    <td style="vertical-align: top">Docking Zone 1<br />
                        <br />
                        <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="270px" MinHeight="360px">
                            <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock1" Title="AutoPostBack enabled" OnDockPositionChanged="RadDock1_DockPositionChanged"
                                EnableAnimation="true" EnableRoundedCorners="true" AutoPostBack="true" DockMode="Docked">
                                <ContentTemplate>
                                    This RadDock control will initiate postback when it is moved around the page. You
                                could create AsyncPostbackTrigger to replace the postback with an AJAX call.
                                </ContentTemplate>
                            </telerik:RadDock>
                            <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock2" Title="AutoPostBack disabled" OnDockPositionChanged="RadDock1_DockPositionChanged"
                                EnableAnimation="true" EnableRoundedCorners="true" DockMode="Docked">
                                <ContentTemplate>
                                    This RadDock control will NOT initiate postback when it is moved around the page.
                                However, if you post back the page using another control, the DockPositionChanged
                                event will be fired.
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td style="vertical-align: top">Docking Zone 2<br />
                        <br />
                        <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="270px" MinHeight="360px">
                        </telerik:RadDockZone>
                    </td>
                    <td style="vertical-align: top;"></td>
                </tr>
            </table>
        </telerik:RadDockLayout>
    </div>
    <asp:UpdatePanel runat="server" ID="UpdatePanel1">
        <ContentTemplate>
            <qsf:EventLogConsole ID="EventLogConsole1" runat="server" EnableViewState="false"></qsf:EventLogConsole>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="RadDock1" EventName="DockPositionChanged"></asp:AsyncPostBackTrigger>
        </Triggers>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance