Ajaxify an ImageButton inside a RadGrid

[Johann]

Dear All,

I have a problem which I cannot solve at the moment.  I have a RadGrid with an ImageButton, called btnEdit, and basically what I want is once this is clicked, a Modal Popup appears with all the data populated in the Popup.  Without the RadAjaxManager, everything works fine and the Popup populates.  So that is why I am asking some help, because I do not know how to set this up.

So my code is as follows:-

                                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                                        <AjaxSettings>
                                            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                                                <UpdatedControls>
                                                    <telerik:AjaxUpdatedControl ControlID="pnlRadGrid" LoadingPanelID="RadAjaxLoadingPanel1"/>
                                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/>
                                                </UpdatedControls>
                                            </telerik:AjaxSetting>
                                            <telerik:AjaxSetting AjaxControlID="btnEdit">
                                                <UpdatedControls>
                                                    <telerik:AjaxUpdatedControl ControlID="pnlRadGrid" LoadingPanelID="RadAjaxLoadingPanel1"/>
                                                    <telerik:AjaxUpdatedControl ControlID="btnEdit" LoadingPanelID="RadAjaxLoadingPanel1"/>
                                                </UpdatedControls>
                                            </telerik:AjaxSetting>
                                        </AjaxSettings>
                                    </telerik:RadAjaxManager>
                                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="50">
                                        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />
                                    </telerik:RadAjaxLoadingPanel>

The RadGrid is something like this:-

                                   <asp:Panel ID="pnlRadGrid" runat="server">
                                        <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None"
                                        ShowGroupPanel="True" Skin="Sunset" AutoGenerateColumns="False"
                                        onitemdatabound="RadGrid1_ItemDataBound" GroupHeaderItemStyle-Font-Bold="true"
                                        GroupHeaderItemStyle-HorizontalAlign="Left" OnItemCommand="RadGrid1_ItemCommand">
                                        <MasterTableView DataKeyNames="productId,releaseId,projectid" >
                                        <GroupByExpressions>
                                            <telerik:GridGroupByExpression>
                                                <SelectFields>
                                                    <telerik:GridGroupByField FieldAlias="ReleaseName" FieldName="ReleaseName" HeaderText="Release" />
                                                </SelectFields>
                                                <GroupByFields>
                                                    <telerik:GridGroupByField FieldAlias="ReleaseName" SortOrder="Ascending" FieldName="ReleaseName"  />
                                                </GroupByFields>
                                            </telerik:GridGroupByExpression>
                                        </GroupByExpressions>
                                        <RowIndicatorColumn>
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                        </RowIndicatorColumn>

                                        <ExpandCollapseColumn>
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                        </ExpandCollapseColumn>
                                        <Columns>
                                            <telerik:GridBoundColumn DataField="productID" DataType="System.Int16"
                                                HeaderText="productID" SortExpression="productID" UniqueName="productID" Visible="false">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="productName" HeaderText="productName"
                                                SortExpression="productName" UniqueName="productName" Visible="false">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="projectId" DataType="System.Int16"
                                                HeaderText="projectId" SortExpression="projectId" UniqueName="projectId" Visible="false">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" GroupByExpression="ProjectName"
                                                    SortExpression="ProjectName" HeaderText="ProjectName">
                                                    <HeaderStyle Width="241px"></HeaderStyle>
                                                    <ItemStyle Height="35px"></ItemStyle>
                                                    <ItemTemplate>
                                                        <%# DataBinder.Eval(Container.DataItem, "ProjectName") %>
                                                    </ItemTemplate>
                                            </telerik:GridTemplateColumn>                
                                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" GroupByExpression="baseRefUrl"
                                                    SortExpression="baseRefUrl" HeaderText="baseRefUrl">
                                                    <HeaderStyle Width="241px"></HeaderStyle>
                                                    <ItemStyle Height="35px"></ItemStyle>
                                                    <ItemTemplate>
                                                        <%# DataBinder.Eval(Container.DataItem, "baseRefUrl")%>
                                                    </ItemTemplate>
                                            </telerik:GridTemplateColumn>                

                                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" HeaderText="Edit">
                                                    <HeaderStyle Width="241px"></HeaderStyle>
                                                    <ItemStyle Height="35px"></ItemStyle>
                                                    <ItemTemplate>
                                                        <asp:ImageButton ID="btnEdit" runat="server" ImageUrl="~/images/edit.gif" CommandName="EditHandoff" />
                                                    </ItemTemplate>
                                            </telerik:GridTemplateColumn>   
                                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" HeaderText="Delete">
                                                    <HeaderStyle Width="241px"></HeaderStyle>
                                                    <ItemStyle Height="35px"></ItemStyle>
                                                    <ItemTemplate>
                                                        <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/images/delete.gif" CommandName="DeleteHandoff"
                                                            OnClientClick="if (!confirm('Are you sure you want to delete this Handoff?')) return false;" />
                                                    </ItemTemplate>
                                            </telerik:GridTemplateColumn>                
                                            <telerik:GridBoundColumn DataField="fk_projectStatus" DataType="System.Byte"
                                                HeaderText="fk_projectStatus" SortExpression="fk_projectStatus"
                                                UniqueName="fk_projectStatus" Visible="false">
                                            </telerik:GridBoundColumn>
                                        </Columns>
                                        </MasterTableView>

                                        <HeaderStyle Font-Bold="True" ForeColor="White" />

                                        <GroupHeaderItemStyle Font-Bold="True" HorizontalAlign="Left" />

                                        <FilterMenu Skin="Sunset" EnableTheming="True">
                                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                        </FilterMenu>
                                    </telerik:RadGrid>
                                    </asp:Panel>

And in the code behind I have the following:-

        if (e.CommandName == "EditHandoff")
        {
            //EditHandoff(iIndex);
            ModalPopupExtender mpe = ModalPopupExtender1;

            if (_productTreeList[iIndex].projectName != null)
                txtHandoffName.Text = _productTreeList[iIndex].projectName.ToString();
            if (_productTreeList[iIndex].baseRefUrl != null)
                txtBaseRefUrl.Text = _productTreeList[iIndex].baseRefUrl.ToString();
            if (_productTreeList[iIndex].url != null)
                txtUrl.Text = _productTreeList[iIndex].url.ToString();

            mpe.Show();

        }

In the Page_Load I also have:-
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(pnlRadGrid, RadGrid1, RadAjaxLoadingPanel1);

Can you please tell me what I am doing wrong?
Thanks a lof for your help and time

Johann

[Pratik Bhatt]

If You Are Using MasterPage In Your Application And you are using RadAjaxManager In MasterPage Then Use RadAjaxProxyManager In Your Child Forms.

Put You Grid And Your Popup In Same Ajax Panel And Then Configure Your RadAjaxProxyManager To Ajaxify Popup.

Here I am doing same successfully as you want to do.
------------------------------------------------------------------------------------------

<telerik:RadAjaxManagerProxy ID="proxyMagProf" runat="server">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="RadGrid1">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="radpnlGridPopup" LoadingPanelID="RadAjaxLoadingPanel1" />

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManagerProxy>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />


After That

<telerik:RadAjaxPanel ID="radpnlGridPopup" runat="server">
        <div>
            <%--<table>--%>
            <telerik:RadGrid ID="RadGrid1" AllowPaging="True" runat="server" AutoGenerateColumns="False"
                AllowSorting="True" PageSize="3" GridLines="None" CellPadding="0" AllowMultiRowSelection="True"
                CellSpacing="0">
                    <telerik:GridTemplateColumn DataField="UserName" HeaderText="Action" ItemStyle-HorizontalAlign="Center"
                            Groupable="false" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="5%" AllowFiltering="false">
                            <ItemTemplate>
                                <asp:ImageButton ID="imgView" runat="server" ImageUrl="~/Images/view.png" ToolTip="View Issue"
                                    CommandName="View" Text="View Issue" /><%--CommandArgument='<%# Eval("ProductID") %>'--%>

                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                            <ItemStyle HorizontalAlign="Center" Width="5%"></ItemStyle>
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                        </EditColumn>
                    </EditFormSettings>
                </MasterTableView>
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>
                <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
                </HeaderContextMenu>
                <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True"
                    EnableRowHoverStyle="true">
                    <Selecting AllowRowSelect="True"></Selecting>
                    <Resizing AllowRowResize="false" AllowColumnResize="True" EnableRealTimeResize="True"
                        ResizeGridOnColumnResize="False"></Resizing>
                </ClientSettings>
            </telerik:RadGrid>
            <asp:HiddenField ID="HiddenField1" runat="server" />

                <asp:ModalPopupExtender ID="mpView" runat="server" TargetControlID="HiddenField1"
                    DropShadow="True" PopupControlID="pnlPref" CancelControlID="btnclose">
                </asp:ModalPopupExtender>

            <asp:Panel ID="pnl1" runat="server">
               <%-- put your data here that you want to show in popup --%>
            </asp:Panel>
                        </telerik:RadAjaxPanel>

Hope You Can get It You Wanted. If Still You Find Any Problem Then Tell me.My Email is [e-mail]

Pratik Bhatt