[Solved] Trigger UpdatePanel from button in ItemTemplate

[Thomas Kopp]

Hi;

I'd found this thread (admittedly rather old), and tried what you'd suggested, but it did not work. 

I have a RadGrid with an image button in a GridTemplateColumn.  I am directing the click event for that button to an onClick event (see below).  I need to update another RadGrid within the onClick event for that button.  I tried changing from a template column to a button column and using the ItemCommand event as an AsyncPostBackTrigger to fire the update panel, but that didn't work either.  I've tried setting a PostBackTrigger also.

Thanks!

Here's the code:

Grid containing the GridTemplateColumn:

                <rad:RadGrid ID="Page3_DisplayPayables_rgPayables" runat="server"
                    AlternatingRowStyle-BackColor="#ddeeee" AutoGenerateColumns="false"
                    EnableAJAX="True" GridLines="None" HeaderStyle-HorizontalAlign="Left"
                    Height="150" onitemcommand="Page3_DisplayPayables_rgPayables_ItemCommand"
                                                                    onitemdatabound="Page3_DisplayPayables_rgPayables_ItemDataBound" >
                    <HeaderStyle BackColor="Black" ForeColor="White" Height="15px" />
                    <ClientSettings>
                        <Scrolling AllowScroll="True" SaveScrollPosition="True"
                            UseStaticHeaders="True" />
                    </ClientSettings>
                    <MasterTableView AlternatingItemStyle-BackColor="#ddeeee" Width="100%">
                        <RowIndicatorColumn>
                            <HeaderStyle Width="20px" />
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn>
                            <HeaderStyle Width="20px" />
                        </ExpandCollapseColumn>
                        <Columns>
                            <rad:GridBoundColumn DataField="FileNumber" HeaderText="File Number"
                                ItemStyle-Width="70">
                                <ItemStyle Width="70" />
                            </rad:GridBoundColumn>
                            <rad:GridBoundColumn DataField="VendorNumber" HeaderText="Vendor"
                                ItemStyle-Width="40px">
                                <ItemStyle Width="40px" />
                            </rad:GridBoundColumn>
                            <rad:GridBoundColumn DataField="InvoiceDate" HeaderText="Date"
                                ItemStyle-Width="50px">
                                <ItemStyle Width="50px" />
                            </rad:GridBoundColumn>
                            <rad:GridBoundColumn DataField="BillOfLading" HeaderText="B/L"
                                ItemStyle-Width="80px">
                                <ItemStyle Width="80px" />
                            </rad:GridBoundColumn>
                            <rad:GridBoundColumn DataField="AmountUSD"
                                DataFormatString="{0:###,###,###.00}" HeaderText="Amount USD"
                                ItemStyle-HorizontalAlign="Right" ItemStyle-Width="80px">
                                <ItemStyle HorizontalAlign="Right" Width="80px" />
                            </rad:GridBoundColumn>
                            <rad:GridBoundColumn DataField="ProratedUSD"
                                DataFormatString="{0:###,###,###.00}" HeaderText="Prorated Amount USD"
                                ItemStyle-HorizontalAlign="Right" ItemStyle-Width="100px">
                                <ItemStyle HorizontalAlign="Right" Width="100px" />
                            </rad:GridBoundColumn>
                            <rad:GridBoundColumn DataField="DifferenceUSD"
                                DataFormatString="{0:###,###,###.00}" HeaderText="Difference USD"
                                ItemStyle-HorizontalAlign="Right" ItemStyle-Width="100px">
                                <ItemStyle HorizontalAlign="Right" Width="100px" />
                            </rad:GridBoundColumn>
                            <rad:GridTemplateColumn>
                                <ItemTemplate>
                                    <asp:ImageButton ID="ibtnDelete" runat="server"
                                        CommandArgument='<%#Container.DataItem("VendorPayableID")%>'
                                        ImageUrl="~/images/delete.png"
                                        OnClick="Page3_DisplayPayables_ibtnDeletePayable_Click" />
                                </ItemTemplate>
                            </rad:GridTemplateColumn>
                        </Columns>
                        <AlternatingItemStyle BackColor="#DDEEEE" />
                    </MasterTableView>
                </rad:RadGrid>

Update panel with grid and other controls that need to be updated (there are no trigger entries for the grid that needs to cause the update; I've taken out all the various attempts that I'd made):

 

                                                <asp:UpdatePanel ID="Page3_SearchPayables_upnlControls" runat="server" ChildrenAsTriggers="true"
                                                    UpdateMode="conditional" OnInit="Page3_SearchPayables_upnlControls_Init">
                                                    <Triggers>
                                                    <asp:AsyncPostBackTrigger ControlID="Page3_EnterInvoice_btnAddInvoice" EventName="Click" />
                                                    <asp:AsyncPostBackTrigger ControlID="Page3_EnterInvoice_btnUpdateInvoice" EventName="Click" />
                                                        <asp:AsyncPostBackTrigger ControlID="Page3_EnterInvoice_btnClearForNewInvoice" EventName="Click" />
                                                        <asp:AsyncPostBackTrigger ControlID="Page3_EnterInvoice_btnDeleteInvoice" EventName="Click" />
                                                        <asp:AsyncPostBackTrigger ControlID="Page3_SearchPayables_btnCheckAll" EventName="Click" />
                                                        <asp:AsyncPostBackTrigger ControlID="Page3_SearchPayables_btnUncheckAll" EventName="Click" />
                                                        <asp:AsyncPostBackTrigger ControlID="Page3_SearchPayables_btnAddExistingPayable"
                                                            EventName="Click" />
                                                    </Triggers>
                                                    <ContentTemplate>
                                                        <hr />
                                                        <table width="800px">
                                                            <tr>
                                                                <td colspan="2" valign="top" align="left" style="font-size: large; font-weight: bold;
                                                                    height: 30px;">
                                                                    Search/Select Existing Payables &nbsp;
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td align="right" colspan="2">
                                                                    File #:&nbsp;<asp:TextBox ID="Page3_SearchPayables_txtFileNumber" Width="75px" runat="server"
                                                                        OnInit="Page3_SearchPayables_txtFileNumber_Init"></asp:TextBox>
                                                                    &nbsp; Date from&nbsp;
                                                                    <rad:RadDatePicker ID="Page3_SearchPayable_rdpStartDate" runat="server" Width="75px"
                                                                        OnInit="Page3_SearchPayable_rdpStartDate_Init">
                                                                        <DateInput Skin="">
                                                                        </DateInput>
                                                                    </rad:RadDatePicker>
                                                                    &nbsp;to&nbsp;<rad:RadDatePicker ID="Page3_SearchPayable_rdpEndDate" runat="server"
                                                                        Width="75px" OnInit="Page3_SearchPayable_rdpEndDate_Init">
                                                                        <DateInput Skin="">
                                                                        </DateInput>
                                                                    </rad:RadDatePicker>
                                                                    &nbsp;&nbsp; B/L:&nbsp;<asp:TextBox ID="Page3_SearchPayables_txtBL" Width="75px"
                                                                        runat="server" OnInit="Page3_SearchPayables_txtBL_Init"></asp:TextBox>
                                                                    &nbsp; Amount:&nbsp;<rad:RadNumericTextBox ID="Page3_SearchPayables_rntAmount" runat="server"
                                                                        MaxValue="999999999.99" MinValue="0" Skin="WebBlue" Type="Number" NumberFormat-DecimalDigits="2"
                                                                        Width="75px" OnInit="Page3_SearchPayables_rntAmount_Init">
                                                                        <NumberFormat DecimalDigits="2" />
                                                                    </rad:RadNumericTextBox>
                                                                    &nbsp;
                                                                    <asp:Button ID="Page3_SearchPayables_btnSearch" CssClass="ButtonImageStyle" runat="server"
                                                                        Text="Search" OnClick="Page3_SearchPayables_btnSearch_Click" OnInit="Page3_SearchPayables_btnSearch_Init" />
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2">
                                                                        <rad:RadGrid ID="Page3_SearchPayables_rgSearchPayables" runat="server"
                                                                            HeaderStyle-HorizontalAlign="Left" Height="150"
                                                                            AlternatingRowStyle-BackColor="#ddeeee" AutoGenerateColumns="false" Width="800px" GridLines="None">
                                                                      <HeaderStyle BackColor="Black" ForeColor="White" Height="15px" />
                                                                    <ClientSettings>
                                                                        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />
                                                                    </ClientSettings>
                                                                      <MasterTableView Width="100%" AlternatingItemStyle-BackColor="#ddeeee"
                                                                      DataKeyNames="FileNumber,Vendor,PayableDate,BL,InvoiceUSD">
                                                                      <Columns>
                                                                            <rad:GridTemplateColumn>
                                                                                <ItemTemplate>
                                                                                        <asp:CheckBox ID="Page3_SearchPayables_chkAddPayable" runat="server" AutoPostBack="true"
                                                                                            OnCheckedChanged="Page3_SearchPayables_chkAddPayable_CheckChanged" />
                                                                                    </ItemTemplate>
                                                                                </rad:GridTemplateColumn>
                                                                                <rad:GridBoundColumn DataField="FileNumber" HeaderText="File #" ItemStyle-Width="100" />
                                                                                <rad:GridBoundColumn DataField="Vendor" HeaderText="Vendor" ItemStyle-Width="100" />
                                                                                <rad:GridBoundColumn DataField="PayableDate" HeaderText="Date" ItemStyle-Width="100" />
                                                                                <rad:GridBoundColumn DataField="BL" HeaderText="B/L" ItemStyle-Width="125" />
                                                                                <rad:GridBoundColumn DataField="InvoiceUSD" HeaderText="Amount USD" ItemStyle-Width="90"
                                                                                    ItemStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,###.00}" />
<%--            taken out because of divide by zero error (see stored proc for more info)
                                                                                  <rad:GridBoundColumn DataField="ProratedUSD" HeaderText="Prorated USD" ItemStyle-Width="90"
                                                                                    ItemStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,###.00}" />
                                                                                <rad:GridBoundColumn DataField="DifferenceUSD" HeaderText="Difference USD" ItemStyle-Width="90"
                                                                                    ItemStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,###.00}" />
--%>                                                                      </Columns>
                                                                      </MasterTableView>
                                                                      </rad:RadGrid>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td align="left">
                                                                    <asp:Button ID="Page3_SearchPayables_btnCheckAll" CssClass="ButtonImageStyle" runat="server"
                                                                        Text="Check All" OnClick="Page3_SearchPayables_btnCheckAll_Click" OnInit="Page3_SearchPayables_btnCheckAll_Init" />
                                                                    &nbsp; &nbsp;
                                                                    <asp:Button ID="Page3_SearchPayables_btnUncheckAll" CssClass="ButtonImageStyle" runat="server"
                                                                        Text="Uncheck All" OnClick="Page3_SearchPayables_btnUncheckAll_Click" OnInit="Page3_SearchPayables_btnUncheckAll_Init" />
                                                                </td>
                                                                <td align="right">
                                                                    <asp:Button ID="Page3_SearchPayables_btnAddExistingPayable" CssClass="ButtonImageStyle"
                                                                        runat="server" Text="Add Checked Payables" OnClick="Page3_SearchPayables_btnAddExistingPayable_Click"
                                                                        OnInit="Page3_SearchPayables_btnAddExistingPayable_Init" />
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </ContentTemplate>
                                                </asp:UpdatePanel>

 

The code fired by the image button click:

 

    Protected Sub Page3_DisplayPayables_ibtnDeletePayable_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs)

        Dim ibtnDelete As ImageButton = CType(sender, ImageButton)
        Dim intVendorInvoiceID As Integer = CType(Page3_DisplayInvoice_hdnInvoiceID.Value, Integer)
        Dim intVendorPayableID As Integer = ibtnDelete.CommandArgument

        Dim taPayable As New xsdVendorPayablesTableAdapters.QueriesTableAdapter()
        taPayable.mar_spDeleteVendorPayable(intVendorPayableID, clsGlobalClass.strSessionUser)

        Page3_DisplayInvoicePayables_FillControls(intVendorInvoiceID)
        Page3_SearchPayables_FillPayablesGrid(intVendorInvoiceID)
        Page3_SearchPayables_upnlControls.Update()

    End Sub

 

and the code recommended in the thread I linked to above:

    Protected Sub Page3_DisplayPayables_rgPayables_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.WebControls.GridItemEventArgs)

        If e.Item.ItemType <> Telerik.WebControls.GridItemType.Item Then Return

        Dim ibtnDelete As ImageButton = CType(e.Item.FindControl("ibtnDelete"), ImageButton)

        ScriptManager1.RegisterAsyncPostBackControl(ibtnDelete)

    End Sub

[Pavlina]

Hi Thomas,

One option to achieve the desired functionality is to set RadGrid control as ajax initiator and remove the code from ItemDataBound event.

Another option is to handle on PreRender event and add manager settings programmatically. After that you could specifying each particular control which you want to ajaxify or update.
For more information, please refer to the following article:
http://www.telerik.com/help/aspnet-ajax/ajxajaxifyparticulartemplatedgridviewbuttons.html

I hope this information helps.

Kind regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Thomas Kopp]

Hi Pavlina;

I was working with RadGrids, so the article which gave me the solution was this one -- http://www.telerik.com/support/kb/aspnet-ajax/grid/ajaxifying-particular-controls-in-radgrid-template-column-with-ajax-manager.aspx -- which fortunately was linked to in the GridView article you linked to.  The combination of setting the AjaxManager as shown in both articles and of not setting "EnableAjax" to true in the RadGrid containing the triggering control gave me the behaviour I was looking for -- an ASP.NET ImageButton within a rad:GridTemplateColumn triggering an Ajax update of another RadGrid.

Thanks for you help!
Thomas

[Pavlina]

Hi Thomas,

I am glad to hear you have found a solution for your case. If other questions or problems arise, please do not hesitate to contact us.

All the best,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gerald Toh]

Hi Pavlina,

I'm new for Telerik ASP.Net Ajax
I'm facing same problem like Thomas post in this thread.
As below is my aspx page.

    

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
 <Triggers>
 <asp:PostBackTrigger ControlID="??????"/>
  </Triggers>
</asp:UpdatePanel>


<telerik:RadGrid ID="rGridPreBill" runat="server" AllowPaging="True"
                            AllowSorting="True" AutoGenerateColumns="False" GridLines="None"
                            onneeddatasource="rGridPreBill_NeedDataSource"
                            PageSize="50" Skin="Sitefinity"
                            Visible="false" Width="100%">
                            <HeaderContextMenu EnableTheming="True">
                                <collapseanimation duration="200" type="OutQuint" />
                            </HeaderContextMenu>
                            <MasterTableView ClientDataKeyNames="ID" DataKeyNames="ID">
                                <Columns>
                                    <telerik:GridBoundColumn DataField="ID" Display="false" HeaderText="ID"
                                        ItemStyle-VerticalAlign="Top" UniqueName="ID">
                                      <ItemStyle VerticalAlign="Top" />
                                    </telerik:GridBoundColumn>
                                     <telerik:GridTemplateColumn UniqueName="TemplateBillColumn" HeaderStyle-Width="5%" ItemStyle-HorizontalAlign="Right"><ItemTemplate>
                                      <asp:ImageButton ID="btnPreview" runat="server" ImageUrl="/images/_custom/btnPreview.png" ToolTip="Preview" OnClick="btnPreBill_Click" />
                                    </ItemTemplate></telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn UniqueName="TemplateBillColumn" HeaderStyle-Width="5%" ItemStyle-HorizontalAlign="Right"><ItemTemplate>
                                    <asp:ImageButton ID="btnInvoice" runat="server" ImageUrl="/images/_custom/btnInvoice.png" ToolTip="Invoice" OnClick="btnInvoice_Click" />
                                </ItemTemplate></telerik:GridTemplateColumn>

                                </Columns>
                                <EditFormSettings>
                                    <editcolumn uniquename="EditCommandColumn1" />
                                </EditFormSettings>
                            </MasterTableView>
                            <ClientSettings EnableRowHoverStyle="true">
                                <ClientEvents OnRowDblClick="TimeBillingRowDblClick" />
                            </ClientSettings>
                            <FilterMenu EnableTheming="True">
                                <collapseanimation duration="200" type="OutQuint" />
                            </FilterMenu>
                        </telerik:RadGrid>

may i know how can i get the btnInvoice image button ID in RadGrid to insert to the UpdatePanel <asp:PostBackTrigger ControlID="??????"/> 

Thanks

[Pavlina]

Hello Susan,

Can you please confirm that you have reviewed the link from the last post which elaborates on this subject and it does not works for you?

Best wishes,
Pavlina
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.