Click on GridImageColumn does NOT fire RowClick() event

6 posts, 0 answers
  1. Randall
    Randall avatar
    55 posts
    Member since:
    Jun 2008

    Posted 12 Sep 2011 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Sep 2011 Link to this post

    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.
  3. Robert
    Robert avatar
    2 posts
    Member since:
    Dec 2011

    Posted 18 Jan 2018 Link to this post

    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 
                                }
                            } 
                        }

     

     

     

     

     

  4. Attila Antal
    Admin
    Attila Antal avatar
    384 posts

    Posted 23 Jan 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Robert
    Robert avatar
    2 posts
    Member since:
    Dec 2011

    Posted 31 Jan 2018 in reply to Attila Antal Link to this post

    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?

  6. Attila Antal
    Admin
    Attila Antal avatar
    384 posts

    Posted 05 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top