Click on GridImageColumn does NOT fire RowClick() event

[Randall]

Hello,

Using RadControls for ASP.NET v2011.2.712.35

I have a RadGrid with client-side row click event defined as follows:

<telerik:RadGrid runat="server" ID="RadGrid_Combo" ... >
    <ClientSettings EnableRowHoverStyle="true">
        <ClientEvents
            OnGridCreated="OP_RadGrid_GridCreated"
            OnRowSelected="OP_RadGrid_RowSelected"
            OnRowDeselected="OP_RadGrid_RowDeselected"
            />
    <MasterTableView TableLayout="Fixed">
        <Columns>
            <telerik:GridImageColumn UniqueName="ImageUrl"
                DataAlternateTextField="ObjectType"
                DataAlternateTextFormatString="{0} Object"
                DataImageUrlFields="ImageUrl"
                DataType="System.String"
                HeaderText="Type"
                ImageAlign="Middle"
                ImageHeight="16px"
                ImageWidth="16px"
                >
                <HeaderStyle Width="25px" Wrap="false" />
            </telerik:GridImageColumn>
...
</telerik:RadGrid>

My Javascript is:

<script type="text/javascript">
function OP_RadGrid_RowSelected(sender, args)
{
    // do some stuff
    ...
}
</script>

When I click on a row in the RadGrid, the OP_RadGrid_RowSelected() event fires just fine.

However, when I click on the image in the GridImateColumn, the OP_RadGrid_RowSelected() event DOES NOT fire.

How can I make the OP_RadGrid_RowSelected() fire when I click on the Image?

Thanks,
Randall Price
Senior Developer
Virginia Tech

[Shinu]

Hello Randall,

Give a try with the following code snippet to select the row when clicking on Image in grid row.

C#:

protected void RadGrid_Combo(object sender, GridItemEventArgs e)
  {

      if (e.Item is GridDataItem)
      {
          GridDataItem Item = (GridDataItem)e.Item;
          Image btn = (Image)Item["ImageUrl"].Controls[0];
          btn.Attributes.Add("OnClick", "imgclick('"+Item.ItemIndex+"');");
      }
  }

Java Script:

<script type="text/javascript">
    function imgclick(index) {
            var masterTable = $find("<%=RadGridDocuments.ClientID%>").get_masterTableView();
             masterTable.fireCommand("Select", index); //will select the row
    }
    function RowSelected(sender, eventargs) {
    }
</script>

-Shinu.

[Robert]

This solution works great for a grid without a detail table.  However in my code I want to fire  a rowclick event from an image in a detail table. The event fires correctly but the item object in the code behind is still referring to the mastertable. e.Item.OwnerTableView.Name returns the Mastertable Name. when the image is clicked; code below works fine if anywhere else on row is clicked. 

For this grid, the image is just an indicator that the row has been selected, when another row is selected, I clear all the images and set the image to a check to show that the row has been selected.  It all works great, unless you click the image button in the detail table. Of course users click around the image column area once they see a check mark..then become confused..

protected void RadGrid1_ItemCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)
        {

if (e.CommandName == "RowClick")
                {

               if (e.Item.OwnerTableView.Name == "Months")
                    {
                        foreach (GridItem item in e.Item.OwnerTableView.Items)
                        {
                            if (item is GridDataItem)
                            {
                                GridDataItem dataItem = (GridDataItem)item;
                                dataItem.Selected = false;
                                img = (Image)dataItem["PrintStatus"].Controls[0];
                                img.ImageUrl = "~/images/unchecked.png";//set image url 
                            }
                        } 
                    }

 

 

 

 

 

[Attila Antal]

Hi Robert,

At the time of binding the "onclick" event listener to the Image, try passing the OwnerTableView.ClientID as and additional parameter. This will help access the exact table the click is coming from.

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem Item = (GridDataItem)e.Item;
        Image btn = (Image)Item["ImageColumn"].Controls[0];
        btn.Attributes.Add("onclick", "imgclick('" + Item.OwnerTableView.ClientID + "','" + Item.ItemIndex + "');");
    }
}

JavaScript:

function imgclick(tableViewId, itemIndex) {
    var tableView = $find(tableViewId);
    var item = tableView.get_dataItems()[itemIndex];
    item.get_element().click();
}

Also, set the EnablePostBackOnRowClick property to True:

<ClientSettings EnablePostBackOnRowClick="true" />

Attached you can find a working sample demonstrating this scenario.

Please give the suggestion from above a try to see if that works at your end.

Kind regards,
Attila Antal
Progress Telerik

[Robert]

Hi. Thank you for the example, but my difficulty is getting the javascript to call the row click event.  Here is the js I have on the Radgrids with no detail table.  

function imgclick(index) { 
              var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
                masterTable.fireCommand("RowClick", index); //will select the row

 

So with your code above, how do use the item to fire that event and send it the correct table, and index, as it does when the rest of the row is clicked?

[Attila Antal]

Hi Robert,

Have you had the chance to try the options I've suggested earlier? If the issue still persist, I would advise you to isolate the issue into a sample project and send it to us attached in a formal support ticket for further investigation. You can also modify the sample from my previous post, that will save you some time.

We look forward to hearing from you.

Kind regards,
Attila Antal
Progress Telerik