QA@IT
«回答へ戻る

一部修正

1183
 
 (2) ヘッダの最初の列からある列までは 1 行(rowspan="2")とし、表示するのはオリジナルの文字列。
 
-(3) 次の列から最後の列までは 2 行にし、上の行にオリジナルの文字列を ':' でスプリットした最初の文字列、下の行にに "aaa" という文字列を縦書きにする。
+(3) 次の列から最後の列までは 2 行にし、上の行にオリジナルの文字列を ':' でスプリットした最初の文字列を横書きに、下の行に "aaa" という文字列を縦書きにする。
 
 ということでいいのですよね?
 

要するにやりたいことは、

(1) GridView でヘッダのみを細工し部分的に 2 行にする。データ行はオリジナルどおり 1 行で表示。

(2) ヘッダの最初の列からある列までは 1 行(rowspan="2")とし、表示するのはオリジナルの文字列。

(3) 次の列から最後の列までは 2 行にし、上の行にオリジナルの文字列を ':' でスプリットした最初の文字列を横書きに、下の行に "aaa" という文字列を縦書きにする。

ということでいいのですよね?

その理解で、先に紹介したブログの記事、

http://surferonwww.info/BlogEngine/post/2011/04/30/Freezing-GridView-header-and-column.aspx

の例をベースに例を解答欄にアップしておきます。ブログの記事の例は全部で 6 列しかないので、1 ~ 2 列を 1 行(rowspan="2")とし、3 ~ 6 列を 2 行にしています。そのままコピペすれば動くので(Web アプリケーションプロジェクトの場合はコード部分を分けなければなりませんが)試してみてください。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace ="System.Collections.Generic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    DataTable CreateDataTable()
    {
        DataTable dt = new DataTable();
        DataRow dr;

        dt.Columns.Add(new DataColumn("Code", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        dt.Columns.Add(new DataColumn("Price", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Qty", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Amount", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Remarks", typeof(string)));

        for (int i = 0; i < 10; i++)
        {
            dr = dt.NewRow();
            dr["Code"] = i;
            dr["Name"] = "Item " + i.ToString();
            dr["Price"] = 123000 * (i + 1);
            dr["Qty"] = i + 1;
            dr["Amount"] = 123000 * (i + 1) * (i + 1);
            dr["Remarks"] = "Remarks " + i.ToString();
            dt.Rows.Add(dr);
        }
        return dt;
    }

    void Page_Load(Object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = CreateDataTable();
            GridView1.DataBind();
        }
    }

    protected void GridView1_RowCreated(object sender, 
        GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {

            List<TableCell> cells = new List<TableCell>();
            foreach (TableCell cell in e.Row.Cells)
            {
                cells.Add(cell);
            }

            // この index 以降 2 行にする 
            int cellIndex = 2;

            GridViewRow row1 = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);           

            for (int i = 0; i < cells.Count; i++ )
            {
                if (i < cellIndex)
                {
                    cells[i].RowSpan = 2;
                }
                else
                {
                    cells[i].Text = cells[i].Text.Split(':')[0];
                }
                row1.Cells.Add(cells[i]);
            }

            GridViewRow row2 = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);

            for (int i = cellIndex; i < cells.Count; i++)
            {
                TableHeaderCell headerCell = new TableHeaderCell();
                headerCell.Controls.Add(new LiteralControl("aaa"));

                // 縦書きに設定(Qurks モードでないと表示が崩れるので注意)
                headerCell.Style["writing-mode"] = "tb-rl";
                row2.Cells.Add(headerCell);
            }

            GridView1.Controls[0].Controls.Clear();
            GridView1.Controls[0].Controls.Add(row1);
            GridView1.Controls[0].Controls.Add(row2);
        }
    }  
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
  <%--Quirks モードに設定--%>
  <meta http-equiv="X-UA-Compatible" content="IE=5" />

</head>
<body>
    <form id="form1" runat="server">

        <asp:GridView ID="GridView1" 
            runat="server" 
            AutoGenerateColumns="False"             
            OnRowCreated="GridView1_RowCreated">
            <Columns>
                <asp:BoundField DataField="Code" HeaderText="コード" >
                </asp:BoundField>
                <asp:BoundField DataField="Name" HeaderText="商品名" >
                </asp:BoundField>
                <asp:BoundField DataField="Price" HeaderText="単価:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Qty" HeaderText="数量:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Amount" HeaderText="合価:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Remarks" HeaderText="備考:縦書き" >
                </asp:BoundField>
            </Columns>
        </asp:GridView>

        <%--ポストバックしても表示が崩れないことの確認用のボタン--%>
        <asp:Button ID="Button1" runat="server" Text="PostBack" />
  </form>
</body>
</html>

要するにやりたいことは、

(1) GridView でヘッダのみを細工し部分的に 2 行にする。データ行はオリジナルどおり 1 行で表示。

(2) ヘッダの最初の列からある列までは 1 行(rowspan="2")とし、表示するのはオリジナルの文字列。

(3) 次の列から最後の列までは 2 行にし、上の行にオリジナルの文字列を ':' でスプリットした最初の文字列を横書きに、下の行に "aaa" という文字列を縦書きにする。

ということでいいのですよね?

その理解で、先に紹介したブログの記事、

http://surferonwww.info/BlogEngine/post/2011/04/30/Freezing-GridView-header-and-column.aspx

の例をベースに例を解答欄にアップしておきます。ブログの記事の例は全部で 6 列しかないので、1 ~ 2 列を 1 行(rowspan="2")とし、3 ~ 6 列を 2 行にしています。そのままコピペすれば動くので(Web アプリケーションプロジェクトの場合はコード部分を分けなければなりませんが)試してみてください。

```
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace ="System.Collections.Generic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    DataTable CreateDataTable()
    {
        DataTable dt = new DataTable();
        DataRow dr;

        dt.Columns.Add(new DataColumn("Code", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        dt.Columns.Add(new DataColumn("Price", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Qty", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Amount", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Remarks", typeof(string)));
        
        for (int i = 0; i < 10; i++)
        {
            dr = dt.NewRow();
            dr["Code"] = i;
            dr["Name"] = "Item " + i.ToString();
            dr["Price"] = 123000 * (i + 1);
            dr["Qty"] = i + 1;
            dr["Amount"] = 123000 * (i + 1) * (i + 1);
            dr["Remarks"] = "Remarks " + i.ToString();
            dt.Rows.Add(dr);
        }
        return dt;
    }

    void Page_Load(Object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = CreateDataTable();
            GridView1.DataBind();
        }
    }

    protected void GridView1_RowCreated(object sender, 
        GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            
            List<TableCell> cells = new List<TableCell>();
            foreach (TableCell cell in e.Row.Cells)
            {
                cells.Add(cell);
            }
            
            // この index 以降 2 行にする 
            int cellIndex = 2;
                        
            GridViewRow row1 = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);           
            
            for (int i = 0; i < cells.Count; i++ )
            {
                if (i < cellIndex)
                {
                    cells[i].RowSpan = 2;
                }
                else
                {
                    cells[i].Text = cells[i].Text.Split(':')[0];
                }
                row1.Cells.Add(cells[i]);
            }
            
            GridViewRow row2 = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);

            for (int i = cellIndex; i < cells.Count; i++)
            {
                TableHeaderCell headerCell = new TableHeaderCell();
                headerCell.Controls.Add(new LiteralControl("aaa"));
                
                // 縦書きに設定(Qurks モードでないと表示が崩れるので注意)
                headerCell.Style["writing-mode"] = "tb-rl";
                row2.Cells.Add(headerCell);
            }

            GridView1.Controls[0].Controls.Clear();
            GridView1.Controls[0].Controls.Add(row1);
            GridView1.Controls[0].Controls.Add(row2);
        }
    }  
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
  <%--Quirks モードに設定--%>
  <meta http-equiv="X-UA-Compatible" content="IE=5" />
  
</head>
<body>
    <form id="form1" runat="server">
    
        <asp:GridView ID="GridView1" 
            runat="server" 
            AutoGenerateColumns="False"             
            OnRowCreated="GridView1_RowCreated">
            <Columns>
                <asp:BoundField DataField="Code" HeaderText="コード" >
                </asp:BoundField>
                <asp:BoundField DataField="Name" HeaderText="商品名" >
                </asp:BoundField>
                <asp:BoundField DataField="Price" HeaderText="単価:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Qty" HeaderText="数量:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Amount" HeaderText="合価:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Remarks" HeaderText="備考:縦書き" >
                </asp:BoundField>
            </Columns>
        </asp:GridView>
    
        <%--ポストバックしても表示が崩れないことの確認用のボタン--%>
        <asp:Button ID="Button1" runat="server" Text="PostBack" />
  </form>
</body>
</html>

```

回答を投稿

要するにやりたいことは、

(1) GridView でヘッダのみを細工し部分的に 2 行にする。データ行はオリジナルどおり 1 行で表示。

(2) ヘッダの最初の列からある列までは 1 行(rowspan="2")とし、表示するのはオリジナルの文字列。

(3) 次の列から最後の列までは 2 行にし、上の行にオリジナルの文字列を ':' でスプリットした最初の文字列、下の行にに "aaa" という文字列を縦書きにする。

ということでいいのですよね?

その理解で、先に紹介したブログの記事、

http://surferonwww.info/BlogEngine/post/2011/04/30/Freezing-GridView-header-and-column.aspx

の例をベースに例を解答欄にアップしておきます。ブログの記事の例は全部で 6 列しかないので、1 ~ 2 列を 1 行(rowspan="2")とし、3 ~ 6 列を 2 行にしています。そのままコピペすれば動くので(Web アプリケーションプロジェクトの場合はコード部分を分けなければなりませんが)試してみてください。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace ="System.Collections.Generic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    DataTable CreateDataTable()
    {
        DataTable dt = new DataTable();
        DataRow dr;

        dt.Columns.Add(new DataColumn("Code", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        dt.Columns.Add(new DataColumn("Price", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Qty", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Amount", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Remarks", typeof(string)));

        for (int i = 0; i < 10; i++)
        {
            dr = dt.NewRow();
            dr["Code"] = i;
            dr["Name"] = "Item " + i.ToString();
            dr["Price"] = 123000 * (i + 1);
            dr["Qty"] = i + 1;
            dr["Amount"] = 123000 * (i + 1) * (i + 1);
            dr["Remarks"] = "Remarks " + i.ToString();
            dt.Rows.Add(dr);
        }
        return dt;
    }

    void Page_Load(Object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = CreateDataTable();
            GridView1.DataBind();
        }
    }

    protected void GridView1_RowCreated(object sender, 
        GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {

            List<TableCell> cells = new List<TableCell>();
            foreach (TableCell cell in e.Row.Cells)
            {
                cells.Add(cell);
            }

            // この index 以降 2 行にする 
            int cellIndex = 2;

            GridViewRow row1 = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);           

            for (int i = 0; i < cells.Count; i++ )
            {
                if (i < cellIndex)
                {
                    cells[i].RowSpan = 2;
                }
                else
                {
                    cells[i].Text = cells[i].Text.Split(':')[0];
                }
                row1.Cells.Add(cells[i]);
            }

            GridViewRow row2 = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);

            for (int i = cellIndex; i < cells.Count; i++)
            {
                TableHeaderCell headerCell = new TableHeaderCell();
                headerCell.Controls.Add(new LiteralControl("aaa"));

                // 縦書きに設定(Qurks モードでないと表示が崩れるので注意)
                headerCell.Style["writing-mode"] = "tb-rl";
                row2.Cells.Add(headerCell);
            }

            GridView1.Controls[0].Controls.Clear();
            GridView1.Controls[0].Controls.Add(row1);
            GridView1.Controls[0].Controls.Add(row2);
        }
    }  
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
  <%--Quirks モードに設定--%>
  <meta http-equiv="X-UA-Compatible" content="IE=5" />

</head>
<body>
    <form id="form1" runat="server">

        <asp:GridView ID="GridView1" 
            runat="server" 
            AutoGenerateColumns="False"             
            OnRowCreated="GridView1_RowCreated">
            <Columns>
                <asp:BoundField DataField="Code" HeaderText="コード" >
                </asp:BoundField>
                <asp:BoundField DataField="Name" HeaderText="商品名" >
                </asp:BoundField>
                <asp:BoundField DataField="Price" HeaderText="単価:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Qty" HeaderText="数量:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Amount" HeaderText="合価:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Remarks" HeaderText="備考:縦書き" >
                </asp:BoundField>
            </Columns>
        </asp:GridView>

        <%--ポストバックしても表示が崩れないことの確認用のボタン--%>
        <asp:Button ID="Button1" runat="server" Text="PostBack" />
  </form>
</body>
</html>

要するにやりたいことは、

(1) GridView でヘッダのみを細工し部分的に 2 行にする。データ行はオリジナルどおり 1 行で表示。

(2) ヘッダの最初の列からある列までは 1 行(rowspan="2")とし、表示するのはオリジナルの文字列。

(3) 次の列から最後の列までは 2 行にし、上の行にオリジナルの文字列を ':' でスプリットした最初の文字列、下の行にに "aaa" という文字列を縦書きにする。

ということでいいのですよね?

その理解で、先に紹介したブログの記事、

http://surferonwww.info/BlogEngine/post/2011/04/30/Freezing-GridView-header-and-column.aspx

の例をベースに例を解答欄にアップしておきます。ブログの記事の例は全部で 6 列しかないので、1 ~ 2 列を 1 行(rowspan="2")とし、3 ~ 6 列を 2 行にしています。そのままコピペすれば動くので(Web アプリケーションプロジェクトの場合はコード部分を分けなければなりませんが)試してみてください。

```
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace ="System.Collections.Generic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    DataTable CreateDataTable()
    {
        DataTable dt = new DataTable();
        DataRow dr;

        dt.Columns.Add(new DataColumn("Code", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        dt.Columns.Add(new DataColumn("Price", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Qty", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Amount", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Remarks", typeof(string)));
        
        for (int i = 0; i < 10; i++)
        {
            dr = dt.NewRow();
            dr["Code"] = i;
            dr["Name"] = "Item " + i.ToString();
            dr["Price"] = 123000 * (i + 1);
            dr["Qty"] = i + 1;
            dr["Amount"] = 123000 * (i + 1) * (i + 1);
            dr["Remarks"] = "Remarks " + i.ToString();
            dt.Rows.Add(dr);
        }
        return dt;
    }

    void Page_Load(Object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = CreateDataTable();
            GridView1.DataBind();
        }
    }

    protected void GridView1_RowCreated(object sender, 
        GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            
            List<TableCell> cells = new List<TableCell>();
            foreach (TableCell cell in e.Row.Cells)
            {
                cells.Add(cell);
            }
            
            // この index 以降 2 行にする 
            int cellIndex = 2;
                        
            GridViewRow row1 = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);           
            
            for (int i = 0; i < cells.Count; i++ )
            {
                if (i < cellIndex)
                {
                    cells[i].RowSpan = 2;
                }
                else
                {
                    cells[i].Text = cells[i].Text.Split(':')[0];
                }
                row1.Cells.Add(cells[i]);
            }
            
            GridViewRow row2 = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);

            for (int i = cellIndex; i < cells.Count; i++)
            {
                TableHeaderCell headerCell = new TableHeaderCell();
                headerCell.Controls.Add(new LiteralControl("aaa"));
                
                // 縦書きに設定(Qurks モードでないと表示が崩れるので注意)
                headerCell.Style["writing-mode"] = "tb-rl";
                row2.Cells.Add(headerCell);
            }

            GridView1.Controls[0].Controls.Clear();
            GridView1.Controls[0].Controls.Add(row1);
            GridView1.Controls[0].Controls.Add(row2);
        }
    }  
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
  <%--Quirks モードに設定--%>
  <meta http-equiv="X-UA-Compatible" content="IE=5" />
  
</head>
<body>
    <form id="form1" runat="server">
    
        <asp:GridView ID="GridView1" 
            runat="server" 
            AutoGenerateColumns="False"             
            OnRowCreated="GridView1_RowCreated">
            <Columns>
                <asp:BoundField DataField="Code" HeaderText="コード" >
                </asp:BoundField>
                <asp:BoundField DataField="Name" HeaderText="商品名" >
                </asp:BoundField>
                <asp:BoundField DataField="Price" HeaderText="単価:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Qty" HeaderText="数量:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Amount" HeaderText="合価:縦書き" >
                </asp:BoundField>
                <asp:BoundField DataField="Remarks" HeaderText="備考:縦書き" >
                </asp:BoundField>
            </Columns>
        </asp:GridView>
    
        <%--ポストバックしても表示が崩れないことの確認用のボタン--%>
        <asp:Button ID="Button1" runat="server" Text="PostBack" />
  </form>
</body>
</html>

```