[Solved] Edit Grid Row on clicking an image in a Template Column???

[Kumar]


Hi
My work includes design a  web application with RadGrid Control.
Earlier the Grid implementation was done using Infragistics.

The application contains a column of type 'GridTemplateColumn' with 4 different images to perform edit(1), delete(2) and redirections(3,4).
On clicking the edit image, the grid should show a pop-up form to edit the current row.

I havent been able to find any code in your samples section to do this.
Here is the snippet of my code for reference.


<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

<!--script -->
     <script language="javascript" type="text/javascript">
            function showEditPopup(gridName)
            {
                    __doPostBack(gridName,'');
            }
     </script>
<!--grid code-->

<telerik:RadGrid ID="grdWatches" Skin="MyCustomSkin" runat="server" EnableViewState="true"

    EnableEmbeddedSkins="false" GridLines="Both" ShowFooter="false"

    AutoGenerateColumns="False" VirtualItemCount="50000"

    HorizontalAlign="Left" PageSize="5"

    AllowSorting="True" AllowPaging="True"

    OnNeedDataSource="grdWatches_InitializeDataSource" OnUpdateCommand="grdWatches_UpdateCommand">

    <itemstyle wrap="true" verticalalign="Top" />

    <headerstyle wrap="True" verticalalign="Middle" horizontalalign="Center" />

    <footerstyle wrap="True" />

    <alternatingitemstyle wrap="True" verticalalign="Top" />

    <PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" />

    <mastertableview name="vwCaseWatches" commanditemdisplay="None" allowcustomsorting="false" allownaturalsort="false" EditMode="PopUp"

    allowsorting="true" DataKeyNames="WatchID">

      <Columns>

        <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" EditImageUrl="~/images/editwatch.gif" visible="true" >

        </telerik:GridEditCommandColumn>

        <telerik:GridTemplateColumn HeaderText="Manage" UniqueName="TemplateColumn1">

            <ItemTemplate>

            <table class="customTable">        

                <tr>

                <td align=center>

                    <asp:imagebutton id="btnUpdate" ImageUrl="~/images/editwatch.gif" style="color:green;" runat="server"

                    commandname="Update"></asp:imagebutton>

                </td>    

                <td align="center">                  

                    <a href="showEditPopup('<%=grdCaseWatches.ClientID%>')">

                    <img SRC='images/editWatch.gif' border="0" width="23" height="23" title='Edit Watch'>

                    </a>

                </td>

                <td align="center">                  

                    <a href='#'>

                    <img SRC='images/Delete.gif' border="0" width="23" height="23"  title='Delete'

                        onclick="ShowModalPopUp('<%# Container.DataItem("WatchID")%>', '<%# Container.DataItem("STATUSDESCRIPTION")%>')">

                    </a>

                </td>

                <td align="center">                  

                    <a href='~/InformParty.aspx?Watch= <%# Container.DataItem("WatchID")%>'>

                    <img SRC='images/listview.gif' border="0" width="17" height="17" title='View InformParty'/>

                    </a>

                </td>

                <td align="center">                  

                    <a href='~/DoTransact.aspx?Watch=<%# Container.DataItem("WatchID")%>'>

                    <img SRC='images/DollarSymbol.gif' border="0" width="16" height="16" title='View Charges'/>

                    </a>

                </td>

                </tr>

            </table>   

            </ItemTemplate>

        </telerik:GridTemplateColumn>

    </Columns>

    <EditFormSettings InsertCaption="Edit Case Details" CaptionFormatString="<b>Case Name:</b>"

        EditFormType="Template"  PopUpSettings-Modal="true" >

        <FormTemplate>

        <asp:RequiredFieldValidator ID="rfvannotation" runat ="server" Text ="Please enter the Case Name."

            EnableClientScript ="true" ControlToValidate ="txtCaseName" ValidationGroup ="rvfAnnotation"

            Display ="Dynamic">

        </asp:RequiredFieldValidator>

        <table id="Table1" cellspacing="1" cellpadding="1" border="0" width="250">

            <tr>

            <td>

                <b>Case Name:</b>

            </td>

            <td>

                <asp:TextBox ID="txtCaseName" runat="server" Text='<%# Bind("Case_Name") %>'>

                </asp:TextBox>

            </td>

            </tr>

            <tr>

            <td>

                FILE NUM:

            </td>

            <td>

                <asp:TextBox ID="txtClientMatter" runat="server" Text='<%# Bind("FILENO") %>' TabIndex="1">

                </asp:TextBox>

            </td>

            </tr>

        </table>

        <table style="width: 100%">

            <tr>

            <td align="left">

                <asp:Button ID="Button1" Text='<%# Iif (TypeOf Container is GridEditFormInsertItem, "Insert", "Update") %>'

                runat="server" CommandName='<%# Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'>

                </asp:Button> 

                <asp:Button ID="Button2" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel">

                </asp:Button>

            </td>

            </tr>

        </table>

        </FormTemplate>

    </EditFormSettings>

     </mastertableview>

</telerik:RadGrid>

<!--misc code-->

    You can notice that:
    Firstly,clicking the edit image invokes the javascript function showEditPopup()
    that would bring up the popup form - THIS IS NOT WORKING AS I M UNABLE to pass the appropriate Control ID to be used for popping up the FormControl.

    Second,I am able to successfully popup the Edit form using GridEditCommandColumn. But I am trying to avoid this as it would mean moving the edit image to a separate column.

    I am looking forward to suitable suggestion to solve my purpose and affirm the choice of Telerik as the right development tool.
    thanks
    Kumar.

[Princy]

Hello Kumar,

From the given code, I see that you set ComandName as "Update". Set the CommandName for that Imagebutton as 'Edit' in order to open the editform on clicking it.

ASPX:

<telerik:GridTemplateColumn HeaderText="Manage" UniqueName="TemplateColumn1">

    <ItemTemplate>

         <asp:imagebutton id="btnUpdate" ImageUrl="~/images/editwatch.gif" style="color:green;" runat="server"


                    commandname="Edit"></asp:imagebutton>

    </ItemTemplate>

</telerik:GridTemplateColumn>

Thanks,
Princy.

[Kumar]

Hey Princy,
After I posted this entry, my colleague actually gave the same solution as yours.
It works!
Nevertheless, Thanks a lot for the answer.
I am sorry if my code was lengthy.
Kumar.