2015年2月23日月曜日

DataGrid内のセルを結合する方法

目的

 表題のとおり、DataGrid内のセルを結合し、表示する方法を示す。

結合前後


  結合前



結合後





ソースのポイント

ItemDataBoundメソッド内以下の処理を行う。
  1. ColumnSpanプロパティの設定する
  2. あふれてしまう2列目(item2)の1~5のデータを削除する
        protected void MyGrid_ItemDataBound(object sender, DataGridItemEventArgs e)
        {
            if(e.Item.ItemType != ListItemType.Header && e.Item.ItemType != ListItemType.Footer)
            {
                e.Item.Cells[0].ColumnSpan = 2; // Colspanの設定
                e.Item.Cells.RemoveAt(1);       // ★ポイント:不要なデータの削除★
            }
        }

ソース全文


Default.aspx.cs -------------------------------
using System;
using System.Collections.Generic;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DataGrid_ColSpan
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            DataTable dt = new DataTable();
            DataRow dr = null;

            dt.Columns.Add(new DataColumn("item", typeof(string)));
            dt.Columns.Add(new DataColumn("item2", typeof(string)));

            for (int i = 0; i < 5; i++  )
            {
                dr = dt.NewRow();
                dr["item"] = i.ToString();
                dr["item2"] = (i+1).ToString();
                dt.Rows.Add(dr);
            }
            MyGrid.DataSource = dt;
            MyGrid.DataBind();
        }

        protected void MyGrid_ItemDataBound(object sender, DataGridItemEventArgs e)
        {
            if(e.Item.ItemType != ListItemType.Header && e.Item.ItemType != ListItemType.Footer)
            {
                e.Item.Cells[0].ColumnSpan = 2; // Colspanの設定
                e.Item.Cells.RemoveAt(1);       // ★ポイント:不要なデータの削除★
            }
        }


    }
}
-------------------------------

Default.aspx  -----------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DataGrid_ColSpan._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DataGrid_ColSpan Sample</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataGrid id="MyGrid" runat="server" OnItemDataBound="MyGrid_ItemDataBound" />
    </div>
    </form>
</body>
</html>
-----------------------------------

0 件のコメント:

コメントを投稿