This is a migrated thread and some comments may be shown as answers.

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

2 Answers 120 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kumar
Top achievements
Rank 1
Kumar asked on 26 Jul 2010, 01:28 PM

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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 27 Jul 2010, 12:54 PM
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.
0
Kumar
Top achievements
Rank 1
answered on 27 Jul 2010, 03:52 PM
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.
Tags
Grid
Asked by
Kumar
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Kumar
Top achievements
Rank 1
Share this question
or