以编程方式生成具有特定模板的gridview [英] Programatically generate gridview with specific template

问题描述

我正在尝试生成一个 Gridview ，它看起来像这样。

I am currently trying to generate a Gridview that will look something like this.

The first two columns are done with Boundfield, where I will grab based on the data given in database.

However, the problem comes in when I've to have the row of AM & PM.

Is there a way to do a colspan for the header of the date and create a row just for the AM & PM? Because AM & PM is not counted as columns, instead the 10/11/2016 is a column.

ASPX

<asp:GridView ID="gvAttendance" runat="server">
                    <Columns>
                        <asp:BoundField DataField="traineeID" HeaderText="Trainee ID" />
                        <asp:BoundField DataField="idNum" HeaderText="ID" />
                    </Columns>
                </asp:GridView>

解决方案

It can be done, take a look at my snippet and adjust it to your needs. The snippet will apply the ColSpan in the default header and will add an extra header row to the GridView.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        int spanColumn_1_start = 2;
        int spanColumn_1_length = 2;

        //apply colspan
        e.Row.Cells[spanColumn_1_start].ColumnSpan = spanColumn_1_length;

        //remove the spanned cells
        for (int i = 1; i < spanColumn_1_length; i++)
        {
            e.Row.Cells.RemoveAt(spanColumn_1_start + 1);
        }

        //note that the startindex of the 2nd colspan is set after removing cells for 1st colspan
        int spanColumn_2_start = 3;
        int spanColumn_2_length = 2;

        //apply colspan
        e.Row.Cells[spanColumn_2_start].ColumnSpan = spanColumn_2_length;

        //remove the spanned cells
        for (int i = 1; i < spanColumn_2_length; i++)
        {
            e.Row.Cells.RemoveAt(spanColumn_2_start + 1);
        }
    }
}

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    //to add a row above the normal gridview header, use: if (e.Row.RowType == DataControlRowType.Header)

    if (e.Row.RowType == DataControlRowType.DataRow && e.Row.DataItemIndex == 0)
    {
        //cast the sender as gridview
        GridView gridView = sender as GridView;

        //create a new gridviewrow
        GridViewRow gridViewRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);

        //add some cells
        TableCell tableCell = new TableCell();
        tableCell.Text = "";
        tableCell.ColumnSpan = 2;
        gridViewRow.Cells.Add(tableCell);

        tableCell = new TableCell();
        tableCell.Text = "AM";
        gridViewRow.Cells.Add(tableCell);

        tableCell = new TableCell();
        tableCell.Text = "PM";
        gridViewRow.Cells.Add(tableCell);

        tableCell = new TableCell();
        tableCell.Text = "AM";
        gridViewRow.Cells.Add(tableCell);

        tableCell = new TableCell();
        tableCell.Text = "PM";
        gridViewRow.Cells.Add(tableCell);

        //add the new row to the gridview
        gridView.Controls[0].Controls.AddAt(1, gridViewRow);
    }
}

The result will look like this

这篇关于以编程方式生成具有特定模板的gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！