locked
gridview when merging rows the alternating row color is not correct RRS feed

  • Question

  • User-153404742 posted

    Hi,

    based on the first column value, I'm merging the first four columns which works correctly.  However, I can't seem to get the alternating row color to work because the cells on which I'm not apply rowspan to have alternating item color but I need the alternate style applied per row (same for all the columns merged and not merged for that row)...have tried several solutions but the cells that are not merged (that don't have rowspan applied) are the ones having issue.

    Thursday, April 2, 2020 6:29 PM

Answers

  • User288213138 posted

    Hi inkaln,

    this merges ALL cells that match with previous cells but I only need it to merge the first 5 cells.

    If you want to merge the first 5 rows, then you need to traverse the first 5 rows of data.

    My code is doing this but the last three columns have alternate Item color.  Up until 2021 column the background colors between each unique row with unique Id is fine but the last three columns are alternating in color between each of the items within each row.

    I suggest you set the color in the RowDataBound event, this way you can ignore AlternatingRow.

    Here a demo for you as a reference.

    <asp:GridView ID="gvTags" runat="server" OnDataBound="gvTags_DataBound" OnRowDataBound="gvTags_RowDataBound">
    </asp:GridView>
    
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    DataTable kzdt = new DataTable();
                    kzdt.Columns.AddRange(new DataColumn[8] { new DataColumn("Image"), new DataColumn("ID"), new DataColumn("LastName"), new DataColumn("FIrstName"), new DataColumn("Class"), new DataColumn("Tag"), new DataColumn("StartDate"), new DataColumn("EndDate") });
                    kzdt.Rows.Add("Image", "1", "Jon", "Lam", "2021", "Status|Active", "4/30/2020", "5/30/2020");
                    kzdt.Rows.Add("Image", "1", "Jon", "Lam", "2021", "Allergey|Peanut", "2/9/2020", "");
                    kzdt.Rows.Add("Image", "2", "Sam", "Hopkin", "2021", "Status|Active", "4/30/2020", "5/30/2020");
                    gvTags.DataSource = kzdt;
                    gvTags.DataBind();
                }
            }
            protected void gvTags_DataBound(object sender, EventArgs e)
            {
                for (int rowIndex = 0; rowIndex <= gvTags.Rows.Count - 2; rowIndex++)
                {
                    GridViewRow gvRow = gvTags.Rows[rowIndex];
                    GridViewRow gvPreviousRow = gvTags.Rows[rowIndex + 1];
                    //gvRow.BackColor = Color.LightGray;
                    //gvPreviousRow.BackColor = Color.White;
                    for (int cellCount = 0; cellCount < 5; cellCount++)
                    {
                        if (gvRow.Cells[1].Text == gvPreviousRow.Cells[1].Text)
                        {
                            //gvPreviousRow.BackColor = Color.LightGray;
                            if (gvRow.Cells[cellCount].Text == gvPreviousRow.Cells[cellCount].Text)
                            {
                                if (gvPreviousRow.Cells[cellCount].RowSpan < 2)
                                {
                                    gvRow.Cells[cellCount].RowSpan = 2;
                                }
                                else
                                {
                                    gvRow.Cells[cellCount].RowSpan = gvPreviousRow.Cells[cellCount].RowSpan + 1;
                                }
                                gvPreviousRow.Cells[cellCount].Visible = false;
                            }
    
                        }
                    }
    
                    for (int cellCount = 4; cellCount < gvRow.Cells.Count; cellCount++)
                    {
                        if (gvRow.Cells[1].Text == gvPreviousRow.Cells[1].Text)
                        {
                            if (gvRow.Cells[cellCount].Text != gvPreviousRow.Cells[cellCount].Text)
                            {
                                gvRow.Cells[cellCount].BorderStyle = BorderStyle.None;
                                gvPreviousRow.Cells[cellCount].BorderStyle = BorderStyle.None;
    
    
                            }
                        }
                    }
                }
    
            }
    
            protected void gvTags_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    if (int.Parse(e.Row.Cells[1].Text)== 1) 
    //according to your conditions { e.Row.BackColor = System.Drawing.Color.LightGray; } else { e.Row.BackColor = System.Drawing.Color.White; } } }

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 6, 2020 5:44 AM

All replies

  • User415553908 posted

    you mind sharing relevant bits of your code along with what you tried so far?

    Thursday, April 2, 2020 8:45 PM
  • User-153404742 posted

    for (int i = gvTags.Rows.Count - 1; i > 0; i--)
    {
    GridViewRow row = gvTags.Rows[i];
    GridViewRow previousRow = gvTags.Rows[i - 1];
    //row.BackColor = Color.LightGray;
    //previousRow.BackColor = Color.White;


    if (row.Cells[1].Text == previousRow.Cells[1].Text)
    {

    //row.BackColor = previousRow.BackColor;

    if (previousRow.Cells[1].RowSpan == 0)
    {

    if (row.Cells[1].RowSpan == 0)
    {

    previousRow.Cells[0].RowSpan += 2;
    previousRow.Cells[1].RowSpan += 2;
    previousRow.Cells[2].RowSpan += 2;
    previousRow.Cells[3].RowSpan += 2;
    previousRow.Cells[4].RowSpan += 2;
    //row.Cells[5].BackColor = previousRow.BackColor;
    //row.Cells[6].BackColor = previousRow.BackColor;
    //row.Cells[7].BackColor = previousRow.BackColor;

    }
    else
    {
    previousRow.Cells[0].RowSpan = row.Cells[0].RowSpan + 1;
    previousRow.Cells[1].RowSpan = row.Cells[1].RowSpan + 1;
    previousRow.Cells[2].RowSpan = row.Cells[2].RowSpan + 1;
    previousRow.Cells[3].RowSpan = row.Cells[3].RowSpan + 1;
    previousRow.Cells[4].RowSpan = row.Cells[4].RowSpan + 1;
    //row.Cells[5].BackColor = previousRow.BackColor;
    //row.Cells[6].BackColor = previousRow.BackColor;
    //row.Cells[7].BackColor = previousRow.BackColor;


    }
    //set cells 5, 6 and 7 background color to match the one from other merged columns
    //so the item color doesn't alternate between merged rows in the same row

    //row.Visible = false;
    row.Cells[0].Visible = false;
    row.Cells[1].Visible = false;
    row.Cells[2].Visible = false;
    row.Cells[3].Visible = false;
    row.Cells[4].Visible = false;
    //row.Cells[5].BackColor = previousRow.BackColor;
    //row.Cells[6].BackColor = previousRow.BackColor;
    //row.Cells[7].BackColor = previousRow.BackColor;
    }
    //else
    //{
    // row.Cells[5].BackColor = previousRow.BackColor;
    // row.Cells[6].BackColor = previousRow.BackColor;
    // row.Cells[7].BackColor = previousRow.BackColor;
    //}
    }
    //else
    //{
    // rowCount++;
    //}
    }

    Thursday, April 2, 2020 10:52 PM
  • User288213138 posted

    Hi inkaln,

    based on the first column value, I'm merging the first four columns which works correctly.  However, I can't seem to get the alternating row color to work because the cells on which I'm not apply rowspan to have alternating item color but I need the alternate style applied per row (same for all the columns merged and not merged for that row)...have tried several solutions but the cells that are not merged (that don't have rowspan applied) are the ones having issue.

    According to your description, I cannot understand your question. Please describe your question in detail.

    And i tested your code, and i found there is a problem with your code merge logic.

    Here a demo about how to merge the rows in the Gridview for you as a reference.

    <asp:GridView ID="gvTags" runat="server" OnDataBound="gvTags_DataBound"></asp:GridView>
    
    
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    DataTable kzdt = new DataTable();
                    kzdt.Columns.AddRange(new DataColumn[6] { new DataColumn("PO"), new DataColumn("CN"), new DataColumn("Qty"), new DataColumn("Taken"), new DataColumn("Out_Time"), new DataColumn("Total") });
                    kzdt.Rows.Add("A1", "XYZ", "10", "Yes", "50", "55");
                    kzdt.Rows.Add("A1", "XYZ", "5", "No", "50", "55");
                    kzdt.Rows.Add("B3", "KLM", "20", "Yes", "10", "25");
                    kzdt.Rows.Add("C2", "JKH", "25", "No", "20", "35");
                    kzdt.Rows.Add("C2", "JKH", "15", "No", "20", "35");
                    kzdt.Rows.Add("C2", "JKH", "20", "No", "20", "35");
    
    
                    gvTags.DataSource = kzdt;
                    gvTags.DataBind();
                }
            }
            protected void gvTags_DataBound(object sender, EventArgs e)
            {
                for (int i = gvTags.Rows.Count - 1; i > 0; i--)
                {
                    GridViewRow row = gvTags.Rows[i];
                    GridViewRow previousRow = gvTags.Rows[i - 1];
                    for (int j = 0; j < row.Cells.Count; j++)
                    {
                        if (row.Cells[j].Text == previousRow.Cells[j].Text)
                        {
                            if (previousRow.Cells[j].RowSpan == 0)
                            {
                                if (row.Cells[j].RowSpan == 0)
                                {
                                    previousRow.Cells[j].RowSpan += 2;
                                }
                                else
                                {
                                    previousRow.Cells[j].RowSpan = row.Cells[j].RowSpan + 1;
                                }
                                row.Cells[j].Visible = false;
                            }
                        }
                    }
                }
            }

    Best regards,

    Sam

    Friday, April 3, 2020 2:13 AM
  • User-153404742 posted

    this merges ALL cells that match with previous cells but I only need it to merge the first 5 cells...so my 2nd cell has the Id and I'm merging the first five cells that have the same IDs.  Last three columns have user tags, start and end dates so if following:

    Image 1 Jon Lam 2021 Status|Active 4/30/2020 5/30/2021
    Image 1 Jon Lam 2021

    Allergey|Peanut

    2/9/2020
    Image 2 Sam Hopkin 2021 Status|Active 4/30/2019 5/30/2020

    so I need to merge the first 5 columns so data is:

    Image 1 Jon Lam 2021

    Status|Active

    Allergy|Peanut

    4/30/2020

    2/9/2020

    5/30/2021

    Image 2 Sam Hopkin 2021 Status|Active 4/30/2019 5/30/2020

    My code is doing this but the last three columns have alternate Item color.  Up until 2021 column the background colors between each unique row with unique Id is fine but the last three columns are alternating in color between each of the items within each row.

    Friday, April 3, 2020 3:31 PM
  • User-153404742 posted

    say the datatable is as follows:

     DataTable kzdt = new DataTable();
                    kzdt.Columns.AddRange(new DataColumn[6] { new DataColumn("ID"), new DataColumn("LastName"), new DataColumn("FIrstName"), new DataColumn("Class"), new DataColumn("Tag"), new DataColumn("StartDate") ,new DataColumn("EndDate")});
                    kzdt.Rows.Add("A1", "Jon", "Kipler", "2021", "Status|Active", "","");
                    kzdt.Rows.Add("A1", "Jon", "Kipler", "2021", "Diet Restriction", "","01/02/2020");
                    kzdt.Rows.Add("A1", "Jon", "Kipler", "2021", "Diet Restriction|Allergy", "1/15/2020","1/20/2020");
                    kzdt.Rows.Add("A1", "Jon", "Kiper", "2021", "Diet Restriction|Allergy|Peanut", "","1/5/2020");
                    kzdt.Rows.Add("A2", "Mary", "Smith", "2021", "Status|Active", "8/16/2017", "5/31/2021");
                    kzdt.Rows.Add("A2", "Mary", "Smith", "2021", "Diet Restriction|Allergy|Peanut", "3/9/2020");
    kzdt.Rows.Add("A2", "Mary", "Smith", "2021", "Diet Restriction|Allergy|Walnut", "2/2/2019");

    So I tried your code and it works the same way as mine. I have a class applied to the gridview where it sets the alternate row color but with your code it's more complex looking as some cells are white and some are gray with background color. The above table has an extra template field in the begging that has a user image so I haven't added that.
    What I'm trying to do is merge the last three columns into one row and group them by student so I guess both solutions work for that. Issue is just making the alternate row color work. The last three columns also have gridlines which I don't want....
    Friday, April 3, 2020 4:02 PM
  • User288213138 posted

    Hi inkaln,

    this merges ALL cells that match with previous cells but I only need it to merge the first 5 cells.

    If you want to merge the first 5 rows, then you need to traverse the first 5 rows of data.

    My code is doing this but the last three columns have alternate Item color.  Up until 2021 column the background colors between each unique row with unique Id is fine but the last three columns are alternating in color between each of the items within each row.

    I suggest you set the color in the RowDataBound event, this way you can ignore AlternatingRow.

    Here a demo for you as a reference.

    <asp:GridView ID="gvTags" runat="server" OnDataBound="gvTags_DataBound" OnRowDataBound="gvTags_RowDataBound">
    </asp:GridView>
    
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    DataTable kzdt = new DataTable();
                    kzdt.Columns.AddRange(new DataColumn[8] { new DataColumn("Image"), new DataColumn("ID"), new DataColumn("LastName"), new DataColumn("FIrstName"), new DataColumn("Class"), new DataColumn("Tag"), new DataColumn("StartDate"), new DataColumn("EndDate") });
                    kzdt.Rows.Add("Image", "1", "Jon", "Lam", "2021", "Status|Active", "4/30/2020", "5/30/2020");
                    kzdt.Rows.Add("Image", "1", "Jon", "Lam", "2021", "Allergey|Peanut", "2/9/2020", "");
                    kzdt.Rows.Add("Image", "2", "Sam", "Hopkin", "2021", "Status|Active", "4/30/2020", "5/30/2020");
                    gvTags.DataSource = kzdt;
                    gvTags.DataBind();
                }
            }
            protected void gvTags_DataBound(object sender, EventArgs e)
            {
                for (int rowIndex = 0; rowIndex <= gvTags.Rows.Count - 2; rowIndex++)
                {
                    GridViewRow gvRow = gvTags.Rows[rowIndex];
                    GridViewRow gvPreviousRow = gvTags.Rows[rowIndex + 1];
                    //gvRow.BackColor = Color.LightGray;
                    //gvPreviousRow.BackColor = Color.White;
                    for (int cellCount = 0; cellCount < 5; cellCount++)
                    {
                        if (gvRow.Cells[1].Text == gvPreviousRow.Cells[1].Text)
                        {
                            //gvPreviousRow.BackColor = Color.LightGray;
                            if (gvRow.Cells[cellCount].Text == gvPreviousRow.Cells[cellCount].Text)
                            {
                                if (gvPreviousRow.Cells[cellCount].RowSpan < 2)
                                {
                                    gvRow.Cells[cellCount].RowSpan = 2;
                                }
                                else
                                {
                                    gvRow.Cells[cellCount].RowSpan = gvPreviousRow.Cells[cellCount].RowSpan + 1;
                                }
                                gvPreviousRow.Cells[cellCount].Visible = false;
                            }
    
                        }
                    }
    
                    for (int cellCount = 4; cellCount < gvRow.Cells.Count; cellCount++)
                    {
                        if (gvRow.Cells[1].Text == gvPreviousRow.Cells[1].Text)
                        {
                            if (gvRow.Cells[cellCount].Text != gvPreviousRow.Cells[cellCount].Text)
                            {
                                gvRow.Cells[cellCount].BorderStyle = BorderStyle.None;
                                gvPreviousRow.Cells[cellCount].BorderStyle = BorderStyle.None;
    
    
                            }
                        }
                    }
                }
    
            }
    
            protected void gvTags_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    if (int.Parse(e.Row.Cells[1].Text)== 1) 
    //according to your conditions { e.Row.BackColor = System.Drawing.Color.LightGray; } else { e.Row.BackColor = System.Drawing.Color.White; } } }

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 6, 2020 5:44 AM