GridView group rows and change color

问题

I using collapsible GridView, with parent and child grid view. In the child grid view I want rows to be grouped by date (SQL query is already doing that) and then alternating the color for every set of rows based on group.

        <asp:GridView ID="gvSites" runat="server" AutoGenerateColumns="false" CssClass="Grid"
    DataKeyNames="Location" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img alt = "" style="cursor: pointer" src="images/plus.png" />
                <asp:Panel ID="pnlPetrols" runat="server" Style="display: none">
                    <asp:GridView ID="gvPetrols" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid">
                        <Columns>
                            <asp:BoundField ItemStyle-Width="150px" DataField="Date" HeaderText="Date------------------------" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="PatrolNo" HeaderText="PatrolNo----------------" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="ScansDue" HeaderText="ScansDue----------------" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="Total" HeaderText="Total" />
                        </Columns>
                    </asp:GridView>
                </asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField ItemStyle-Width="150px" DataField="Location" HeaderText="Location" />

    </Columns>
</asp:GridView>

Here is what I am getting:

Date        PatrolNo    ScansDue   Total
07/22/2014  2           8          1
07/22/2014  4           8          1
07/22/2014  6           8          1
07/22/2014  7           8          1
07/23/2014  6           8          2
07/23/2014  7           8          1
07/23/2014  8           8          1

I want all records for 07/22/2014 in one color and all 07/23/2014 in a different color.

回答1:

This will work for styles that alterate between your groups.

Set up a global variables to hold the current css class, and group value for the row. Then use RowDatabound to implement the alternate rows

//Global variables
string currentClass = "alternateDataRow";
string currentGroup = string.Empty;

protected void gvPetrols_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //Get value from cell, you could also use DataKeys
        //We will assume 2 CSS classes "dataRow", "alternateDataRow"
        string rowGroup = e.Row.Cells[0].Text;

        //swap class if group value changes
        if (rowGroup != currentGroup)
        {
            currentClass = currentClass == "dataRow" ? "alternateDataRow" : "dataRow";
            currentGroup = rowGroup;
        }

        e.Row.CssClass = currentClass;

    }
}

Now you just need to create your two CSS classes.

回答2:

add AlternatingRowStyle-CssClass="alternate" RowStyle-CssClass="normal" on your gvSites gridview,

and add this CSS Code:

.Grid tr.normal {
    background-color: #F7F6F3;
}

.Grid tr.alternate {
    background-color: #FFFFFF;
}

or to group by date you can change the CSS on the OnRowDataBound, setting the CssClass in this way if you need change your Css color you does not need change your C#(Code behind) you can only update the CssClass.

In your case you can do this,

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
        e.Row.CssClass += GroupColorRule(e.Row.DataItem as Object); // Object is your class type
  }
}

//Rule to alternate the colors by Date.
private string CssGroupColorRule(Object entity){

    if(ViewState["LastDate"] == null){
        ViewState["LastDate"] = entity.Date;
        return " tr.normal";
    }else{
        if(entity.Date == Convert.ToDateTime(ViewState["LastDate"].toString()){
            return " tr.normal";
        }else{
            ViewState["LastDate"] = entity.Date;
            return " tr.alternate";
        }
    }
}

回答3:

protected void YOURGRIDVIEW_RowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType = DataControlRowType.DataRow)
  {
      if(put_your_condition_here)
      {
           e.Row.BackColor = Drawing.Color.Red;
           //// or you can assign color by doing this: e.Row.BackColor = Color.FromName("#FFOOOO");
      }
  }
}

Here for more explanation Change the color of a row or record on a gridview on asp.net c#?

回答4:

Use the GridView_RowDataBound event on your child gridview. Then you can set conditions on the row itself for styling:

Add OnRowDataBound to tag:

<asp:GridView ID="gvSites" runat="server" AutoGenerateColumns="false" CssClass="Grid"
    DataKeyNames="Location" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img alt = "" style="cursor: pointer" src="images/plus.png" />
                <asp:Panel ID="pnlPetrols" runat="server" Style="display: none">
                    <asp:GridView ID="gvPetrols" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid" OnRowDataBound="gvPetrols_RowDataBound">
                        <Columns>
                            <asp:BoundField ItemStyle-Width="150px" DataField="Date" HeaderText="Date------------------------" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="PatrolNo" HeaderText="PatrolNo----------------" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="ScansDue" HeaderText="ScansDue----------------" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="Total" HeaderText="Total" />
                        </Columns>
                    </asp:GridView>
                </asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField ItemStyle-Width="150px" DataField="Location" HeaderText="Location" />

    </Columns>
</asp:GridView>

Code behind:

protected void gvPetrols_RowDataBound(object sender, GridViewRowEventArgs e)
{        
    if (e.Row.RowType == DataControlRowType.DataRow)
    {     
        if (e.Row.Cells[0].Text == "7/22/2014")
        {
            e.Row.ForeColor = System.Drawing.Color.FromName("#E56E94");                
        }
        else
        {
            //Other styles
        }
    }    
}

来源：https://stackoverflow.com/questions/24933651/gridview-group-rows-and-change-color

标签

ASP.NET

gridview