Tutorial :how make groups(sections) based on column values in gridview?


In my grid I have data in two columns same for couple of rows. Then again couple of other rows will same with different data.I want make them into alternative sections with colors

In below example(image).

Rows no 1 to 4 has 'High', 'High'. I want make them gray bgcolor  for those rows.  Rows no 5 to 8 has 'High','Low'. I want make them white bgcolor for those rows  Rows no 9 to 12 has 'High','Medium'. I want make them again gray bg color for   those rows.  

alt text

How can we do that?


OK -- just modify Leniel Macaferi's answer: (I'm mixing a little w/ vb because I'm not a c# guy -- sorry -- the point should still be clear though I hope)

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  {      if(e.Row.RowType == DataControlRowType.DataRow)      {         // Display the company name in italics.         Session("New_Pair_1") = e.Row.Cells[1].Text         Session("New_Pair_2") = e.Row.Cells[2].Text           If Session("New_Pair_1") <> Session("OLD_Pair_1") OR _            Session("New_Pair_2") <> Session("OLD_Pair_2") Then               //no pair match with last record's pair               //step 1, change the backcolor                 If e.Row.BackColor = Color.FromName("Gray") Then                    e.Row.BackColor = Color.FromName("White")                 Else                    e.RowlBackColor = Color.FromName("Gray")                 End If               //Step 2, reset the "OLD" session vars                 Session("OLD_Pair_1") = Session("New_Pair_1")                 Session("OLD_Pair_2") = Session("New_Pair_2")         End If      }  }  


The most direct way is to bind the background value in your gridview's template to a method in the code behind that takes the two fields you care about as parameters and switches on these values returning the appropriate color string.

This is not the most elegant method I would think there is likely some natural grouping mechanisms built into gridview I may be unawares of, but this is simple to implement and use for a single case. Look at something more natural if you're a stickler or are going to implement this in many places.


Here is a VB example. It creates a comparable schema to what you have and then does the work during the "RowDataBound" event.

Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender      Dim dt As New Data.DataTable      dt.Columns.Add("Row No", GetType(Int32))      dt.Columns.Add("Age", GetType(String))      dt.Columns.Add("Annual Sales", GetType(String))      dt.Columns.Add("Assortment", GetType(String))        dt.Rows.Add(1, "High", "High", "CORE")      dt.Rows.Add(5, "High", "Low", "CORE")      dt.Rows.Add(9, "High", "Medium", "CORE")        GridView1.DataSource = dt      GridView1.DataBind()  End Sub    Private Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound      If e.Row.RowType <> DataControlRowType.DataRow Then          Exit Sub      End If        Dim dr = DirectCast(e.Row.DataItem, Data.DataRowView).Row        Select Case DirectCast(dr("Annual Sales"), String)          Case "High"              e.Row.BackColor = Drawing.Color.Gray          Case "Low"              e.Row.BackColor = Drawing.Color.White          Case "Medium"              e.Row.BackColor = Drawing.Color.Gray      End Select  End Sub  


You could check the values of both columns for each row and do what is described here:

Change background color of GridView's Rows

Event to be handled:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  {      if(e.Row.RowType == DataControlRowType.DataRow)      {         // Display the company name in italics.         if(e.Row.Cells[1].Text.Equals("High") &&            e.Row.Cells[2].Text.Equals("High"))         {             e.Row.BackColor = Color.FromName("Gray");         }         else if(e.Row.Cells[1].Text.Equals("High") &&                 e.Row.Cells[2].Text.Equals("Low"))         {             e.Row.BackColor = Color.FromName("White");         }         else if(e.Row.Cells[1].Text.Equals("High") &&                 e.Row.Cells[2].Text.Equals("Medium"))         {            e.Row.BackColor = Color.FromName("Gray");          }      }  }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »