Cell Click Event for RadGrid

[Medac]

HI,

I want to implement Cell click event in radgrid. i.e when user selects cell in a radgrid then the particular cell should be highlighted and should be able to retrieve the value of cell in javascript.

Can anybody help in this?

Regards,
Medac

[Princy]

Hello Medac,

You can try out the following code to implement cell click in grid:
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[col.UniqueName].Attributes.Add("onclick", "CellClick('" + dataItem.ItemIndex + "','"+ col.UniqueName +"');");
            }
        }
    }

js:

 function CellClick(index, uniqueName)
   {
      var grid = $find("<%=RadGrid1.ClientID %>");
      var MasterTable = grid.get_masterTableView();
      var row = MasterTable.get_dataItems()[index];
      var cell = MasterTable.getCellByColumnUniqueName(row, uniqueName);
      var celltext = cell.innerHTML;
      cell.style.backgroundColor = "Red";
      alert(celltext);

   }

Hope this helps..
-Princy.

[Medac]

Hey princy,

It worked, but it is retaining the previous section. How to make only one cell selection at a time. I mean to say the coloring part code is painting the cells with red background. It is not clearing the previous background color.

Can you help me in this?

Regards,
Medac

[Princy]

Hi Medac,

To allow only single cell selection you would have to modify the above code as shown below:
aspx:

 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[col.UniqueName].Attributes.Add("onclick", "CellClick('" + dataItem.ItemIndex + "','"+ col.OrderIndex +"');");
            }

        }
    }

c#:

 function CellClick(index, colIndex)
   {
      var grid = $find("<%=RadGrid1.ClientID %>");
      var MasterTable = grid.get_masterTableView();
      var rows = MasterTable.get_dataItems();
      for (var i = 0; i < rows.length; i++)
      {
          var row = rows[i];
          for (var j = 0; j < row._element.cells.length; j++)
          {
            var cell = row._element.cells[j];
            if(row._itemIndexHierarchical == index && cell.cellIndex+2 == colIndex)
            {
                 var celltext = cell.innerHTML;
                  alert(celltext);
                 cell.style.backgroundColor = "Red";
            }
           else
            {
                 cell.style.backgroundColor = "";
            }
          }
      }
   }

Regards
Princy.

[Medac]

Hey Princy,

Is this a only way to acieve cell click event in Radgrid?

Regards,
Medac

[Princy]

Hello Medac,

Unfortunately, it seems RadGrid does not support the selection and highlighting of individual data cells out-of-the-box. An alternative to achieve cell selection is illustrated in the following help document, you can go through it:
Selecting cells

Thanks
Princy.

[Bruno]

Hi,

If RadGrid does not support the selection and highlighting of individual data cells out-of-the-box, what's the use for it?

Tks