Get clicked cell name

[Kamel]

Dears,

I have the following js function that handles grid's onRowClick event

function rowClicked(sender, eventArgs)
{
selID=eventArgs.getDataKeyValue("ID");
alert('selected id is : ' + ID);

}

However, I need to get the cell/column name where the user clicked, because I want to perform other javascript functions upon user clicking on specific cells in the grid.
I tried the event OnColumnClick of the grid, but it fires only on grid header's click.

Thank you.

[Princy]

Hello Kamel,

You can try the following javascript to get the cell value.

Javascript:

<script type="text/javascript">
  function rowClicked(sender, args)
  {
      var grid = sender;
      var masterTable = grid.get_masterTableView();
      var row = args.get_gridDataItem();
      var cell = masterTable.getCellByColumnUniqueName(row, "ID");
      alert(cell.innerHTML);
  }
</script>

Thanks,
Princy.

[Kamel]

Dear Princy,
Thank you for your post, however, this is not what I want.
Let's say my grid has 5 columns, col1, col2, col3, col4, col5 and 5 rows.
I want the user to click on cell (1, 1) then a specific javascript code gets executed, if he clicks on cell (1, 2) another javascript code get executed and so on.


The scenario is that the first column is to display a preview of an image, the second column is to alert him with specific text, while clicking a row displays the full image. this javascript already exists, but I can't detect whether he click the first or second column, or he is selecting the entire row.

I hope the idea is clear now.

Thank you for your support.
Kamel

[Iana Tsolova]

Hi Kamel,

The easiest way to achieve your goal, is to find the cells for which click event you want to do something on ItemCreated and attach a handler for the onclick attribute of the cell.

For more information on accessing RadGrid cell, check the below article:
http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html

All the best,
Iana
the Telerik team

[Kamel]

Dear,
Thank you for your support,
I tried to follow the examples in http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html
but with no luck.

Can you please guide me through attaching the event to specific columns (column1 and column2 for example). note that the event is Javascript function call not a .net call.

Best regards

[Princy]

Hello Kamel,

Try the following code snippet to get access to clicked cell.
C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
 {
  if (e.Item is GridDataItem)
    {
     foreach (GridColumn col in RadGrid1.MasterTableView.RenderColumns)
      {
       GridDataItem dataItem = (GridDataItem)e.Item;
       dataItem["ColUniqueName"].Attributes.Add("onclick", "CellClick('" + dataItem.ItemIndex + "','" + col.OrderIndex + "');");
      }
    }
 }

JS:

<script type="text/javascript">
function CellClick(index,colIndex)
{
  alert(index);
  alert(colIndex);
  var grid = $find("<%=RadGrid1.ClientID %>");
  var MasterTable = grid.get_masterTableView();
  //your code
}
</script>

Thanks,
Princy.