Put an AsyncPostBackTrigger on a control inside a dock content template

[Pierre-Antoine]

Hello everyone,

I have to put a asynchrone trigger on 2 RadToolbar that are located within 2 RadDock.

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <div class="main">
                <table border="1" cellpadding="1" cellspacing="1">
                    <tr>
                        <td>
                        </td>
                        <td>
                            <telerik:RadToolBar runat="server" ID="tbValidation" Skin="Office2007">
                                <Items>
                                    <telerik:RadToolBarButton ImageUrl="Images/submit.gif" ToolTip="OK" CommandName="ok" />
                                    <telerik:RadToolBarButton ImageUrl="Images/close.gif" ToolTip="Annuler" CommandName="cancel" />
                                </Items>
                            </telerik:RadToolBar>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="position:relative;">

                                <div style="position:absolute; z-index:1;">
                                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                        <ContentTemplate>
                                            <cc1:Map ID="Map1" runat="server" Height="600px" Width="800px">
                                            </cc1:Map>
                                        </ContentTemplate>
                                        <Triggers>
                                            <asp:AsyncPostBackTrigger ControlID="tbInfo" />
                                            <asp:AsyncPostBackTrigger ControlID="tbEdition" />
                                        </Triggers>
                                    </asp:UpdatePanel>
                                </div>

                                <div id="toolbar" style="position:absolute; left:75px; z-index:2; filter:Alpha(opacity=20); opacity: .20;" onmouseover="javascript:this.style.filter = 'Alpha(opacity=100)'; this.style.opacity = '1';" onmouseout="javascript:this.style.filter = 'Alpha(opacity=20)'; this.style.opacity = '.20';">
                                    <telerik:RadDockZone
                                        ID="dockTop"
                                        runat="server"
                                        CssClass="zone"
                                        Height="65px"
                                        Orientation="Horizontal"
                                        Width="425px">
                                    </telerik:RadDockZone>
                                </div>
                            </div>

                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Button ID="buttonEditShape" runat="server" Text="edit" ToolTip="Edit Shape"
                                OnClick="buttonEditShape_Click" />
                        </td>
                    </tr>
                </table>
            </div>

            <telerik:RadDock Left="450" Top="150" ID="RadDock1" runat="server" Height="63px"
                width="201px" OnClientDockPositionChanged="dockInfo"
                CssClass="dock" DefaultCommands="ExpandCollapse" Title="Information"
                Skin="Office2007" style="z-index:10;">
                <ContentTemplate>
                    <telerik:RadToolBar runat="server" ID="tbInfo" Skin="Office2007" OnButtonClick="test" OnClientButtonClicked="click_handler">
                        <Items>
                            <telerik:RadToolBarButton ImageUrl="Images/select.png" CheckOnClick="true" AllowSelfUnCheck="true"
                                ToolTip="Selection" CommandName="select" />
                            <telerik:RadToolBarButton ImageUrl="Images/overview_replacement.gif" CheckOnClick="true"
                                AllowSelfUnCheck="true" ToolTip="Zoom sur selection" CommandName="zoom" />
                            <telerik:RadToolBarButton ImageUrl="Images/measuring_stick_on.gif" CheckOnClick="true"
                                AllowSelfUnCheck="true" ToolTip="Mesure de distance" CommandName="measure" />
                            <telerik:RadToolBarButton ImageUrl="Images/surfaceMeasurement.png" CheckOnClick="true"
                                AllowSelfUnCheck="true" ToolTip="Mesure de surface" CommandName="surfaceMeasure" />
                            <telerik:RadToolBarButton ImageUrl="Images/btn_map_label.gif" CheckOnClick="true"
                                AllowSelfUnCheck="true" ToolTip="Informations" CommandName="info" />
                        </Items>
                    </telerik:RadToolBar>
                </ContentTemplate>
            </telerik:RadDock>

            <telerik:RadDock Left="500" Top="250" ID="RadDock2" runat="server" Height="63px"
                width="201px" OnClientDockPositionChanged="dockEdit"
                CssClass="dock" DefaultCommands="ExpandCollapse" Title="Edition"
                Skin="Office2007" style="z-index:10;">
                <ContentTemplate>
                    <telerik:RadToolBar runat="server" ID="tbEdition" Skin="Office2007" OnButtonClick="test" OnClientButtonClicked="click_handler">
                        <Items>
                            <telerik:RadToolBarButton ImageUrl="Images/btn_map_edit.gif" CheckOnClick="true"
                                AllowSelfUnCheck="true" ToolTip="Tracer un nouvel objet" CommandName="draw" />
                            <telerik:RadToolBarButton ImageUrl="Images/modifynode.png" CheckOnClick="true" AllowSelfUnCheck="true"
                                ToolTip="Sommets" CommandName="node" />
                            <telerik:RadToolBarButton ImageUrl="Images/Delete.gif" CheckOnClick="true" AllowSelfUnCheck="true"
                                ToolTip="Suppression" CommandName="del" />
                            <telerik:RadToolBarButton ImageUrl="Images/cut.png" CheckOnClick="true" AllowSelfUnCheck="true"
                                ToolTip="Découper" CommandName="cut" />
                            <telerik:RadToolBarButton ImageUrl="Images/fusionner.png" CheckOnClick="true" AllowSelfUnCheck="true"
                                ToolTip="Fusionner" CommandName="fuze" />
                        </Items>
                    </telerik:RadToolBar>
                </ContentTemplate>
            </telerik:RadDock>
        </telerik:RadDockLayout>

But when I launch the project, I've got an error on the triggers. The toolbars aren't find in the page.
I try with an other control (a button) but it's the same. The triggers can't find controls in the dock content template.

How I can put these triggers on controls ?

Thanks.

PS : Apologize me for my English, I'm a french guy.

[Vyrban]

Hi Pierre,

Did you try to remove the trigger form your ASPX code and add it in the code behind,using the UniqueID of the control:

AsyncPostBackTrigger trigger1 = new AsyncPostBackTrigger();
        trigger1.ControlID = tbInfo.UniqueID;
        UpdatePanel1.Triggers.Add(trigger1);

        AsyncPostBackTrigger trigger2 = new AsyncPostBackTrigger();
        trigger2.ControlID = tbEdition.UniqueID;
        UpdatePanel1.Triggers.Add(trigger2);

Also, i see that you didn,t set the property of RadToolBar  AutoPostBack = "true" , so the postback will not be triggered.
Greetings,
Vyrban!

[Vyrban]

Hi Pierre-Antoine ,

i tried to override the method OnInit and put my code there. After this i caused only callbacks , when clicked on the tabs. Don't you achieve the same?

[Pierre-Antoine]

Sorry but the problem came from an other mistake.

Your solution is the right thing to do.

Thanks again.