Member Avatar for lefrancisco1

Hi Folks,
I have created one gridview.In that gridview i've placed buttons in every cells.My task here is...when i click the button automatically that particular cell color should get changed.I even used code using system.drawing.color on selected index changing event.But once i click any one cell it affects all the cell.For your reference iam sending you my sample code can you please help me out with this.

On SelectedIndexChanging()
{
GridView1.Rows[0].Cells[0].BackColor = System.Drawing.Color.WhiteSmoke;
        GridView1.Rows[0].Cells[1].BackColor = System.Drawing.Color.Beige;
        GridView1.Rows[0].Cells[2].BackColor = System.Drawing.Color.Tomato;
        GridView1.Rows[1].Cells[0].BackColor = System.Drawing.Color.CadetBlue;
        GridView1.Rows[1].Cells[1].BackColor = System.Drawing.Color.DarkOliveGreen;
        GridView1.Rows[1].Cells[2].BackColor = System.Drawing.Color.DarkSlateGray;
        GridView1.Rows[2].Cells[0].BackColor = System.Drawing.Color.ForestGreen;
        GridView1.Rows[2].Cells[1].BackColor = System.Drawing.Color.CornflowerBlue;
        GridView1.Rows[2].Cells[2].BackColor = System.Drawing.Color.Cornsilk;
}

Kindly check the code and help me out with this task.


Thanks and Regards,
Leo franklin.M

  • 3 Contributors
  • 2 Replies
  • 108 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kvprajapati

Dani AI

Generated

Short, practical guidance based on the thread: has buttons in every cell and wants only the clicked cell to change color. was right that the event you use matters, and 's mention of event bubbling is relevant because template controls bubble up to row-level handlers. Two reliable approaches follow — pick the one that fits your needs.

Client-side (fast, no postback). If the color change is purely visual, capture the button click in JavaScript and set the containing TD background. This avoids postback and keeps UI snappy. Example:

<script type="text/javascript">
(function() {
  var grid = document.getElementById('<%= GridView1.ClientID %>');
  if (!grid) return;
  var buttons = grid.querySelectorAll('input[type="button"], input[type="submit"], button, a');
  Array.prototype.forEach.call(buttons, function(btn) {
    btn.addEventListener('click', function(e) {
      var td = e.target;
      while (td && td.tagName !== 'TD') td = td.parentNode;
      if (td) td.style.backgroundColor = 'Tomato';
      e.preventDefault(); // remove if you want a server postback too
    }, false);
  });
})();
</script>

Server-side (persists across postbacks). Use a row-level command handler so you can identify the clicked control, get its GridViewRow and TableCell, store the coordinates in ViewState, and reapply the color in RowDataBound every time the grid is bound. Also avoid rebinding the grid on every postback (wrap your BindGrid call in an IsPostBack check).

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "CellClick")
    {
        var src = e.CommandSource as Control;
        var row = src.NamingContainer as GridViewRow;
        var cell = src.Parent as TableCell;
        ViewState["SelectedCell"] = row.RowIndex + "," + cell.CellIndex;
        GridView1.Rows[row.RowIndex].Cells[cell.CellIndex].BackColor = System.Drawing.Color.Tomato;
    }
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType != DataControlRowType.DataRow) return;
    var sel = ViewState["SelectedCell"] as string;
    if (string.IsNullOrEmpty(sel)) return;
    var p = sel.Split(',');
    int r = int.Parse(p[0]), c = int.Parse(p[1]);
    if (e.Row.RowIndex == r) e.Row.Cells[c].BackColor = System.Drawing.Color.Tomato;
}

Quick tips: do not rebind your GridView on every postback (use if (!IsPostBack) BindGrid()), prefer toggling CSS classes rather than direct BackColor for easier styling, and keep a list in ViewState if multiple cells must stay highlighted. For details see the GridView RowCommand and RowDataBound docs:

GridView.RowCommand

GridView.RowDataBound

Recommended Answers

All 2 Replies

Member Avatar for vuyiswamb

Good Afternoon lefrancisco1

You are using the Wrong event

use

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {

    }

Hope it Helps


Vuyiswa Maseko

Member Avatar for kvprajapati

Read about Event-Bubbling. It's prime concept to handle events for child controls.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.