Select row when IMG is clicked

[Mark]

Hi,

I have a GridTemplateColumn that contains an IMG. I have JS code that runs whenever the client side OnRowClick event is fired. This code works fine except for when I click on the IMG.

My grid definition

<telerik:RadGrid ID="grdTicket" runat="server" AutoGenerateColumns="False" Width="946px"
    Font-Names="Verdana" Font-Size="X-Small" AllowSorting="True"
    AllowPaging="True" OnNeedDataSource="grdTicket_NeedDataSource"
    OnPreRender="grdTicket_PreRender"
    OnSelectedIndexChanged="grdTicket_SelectedIndexChanged" CellSpacing="0"
    GridLines="None">
    <ClientSettings>
        <ClientEvents OnRowClick="handleRowClick" />
        <Selecting AllowRowSelect="True" />
    </ClientSettings>
    <MasterTableView Width="100%" NoDetailRecordsText="No Records To Display">
        <Columns>
            <telerik:GridBoundColumn HeaderText="User ID" DataField="UserId" UniqueName="UserID">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="ReplyColumn" AllowFiltering="false">
                <ItemTemplate>
                    <img alt="reply" src="ico_reply_green.png" title="Reply"/>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
    <PagerStyle Mode="NextPrevNumericAndAdvanced" ShowPagerText="true" />
</telerik:RadGrid>

My JS

<script type="text/javascript">
    function getHeaderRow(sender) {
        var masterTable = sender.get_masterTableView();
        return masterTable.HeaderRow == null ? sender.get_masterTableViewHeader().get_element() : masterTable.HeaderRow;
    }

    function handleRowClick(sender, args) {
        var masterTable = sender.get_masterTableView();
        var cellIndex = args.get_domEvent().target.cellIndex;
        var cellText = args.get_domEvent().target.innerHTML;
        var colName = masterTable.getColumnUniqueNameByCellIndex(getHeaderRow(sender), cellIndex)
        alert("Unique name: " + colName + "\nText: " + cellText);
    }
</script>

My code behind

protected void grdTicket_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    dt.Columns.Add("UserId");

    for (int i = 0; i < 15; i++)
    {
        DataRow dr = dt.NewRow();
        dr["UserId"] = "XYZ" + i.ToString();
        dt.Rows.Add(dr);
    }

    ds.Tables.Add(dt);
    grdTicket.DataSource = ds;
}

What do I need to do to get the OnRowClick event to fire when I click on the IMG?  I'd like to do this without resorting to server side code.

Thanks,

David

[Princy]

Hello Mark,

RowClick client event escapes elements like links,images,buttons. This is by design of RadGrid and it is expected behavior. One suggestion is you can intercept the onclick client event of the image as mentioned below.

• Wire the ItemCreated event of the control and  check for whether e.Item is GridDataItem inside the handler.
• Locate the image inside the ItemTemplate using FindControl method:
  (e.Item as GridDataItem) .FindControl("img1");
• Attach the onclick event of the image using its Attributes collection.

Thanks,
Princy.

[Mark]

Thanks Princy, that does the job nicely.