RadGrid 中的 Detail Tables 資料來源 ( Data Source ) 的設定

通常在使用 RadGrid 時，資料欄位太多又長時，又或者是資料表互相關聯，一對多筆資料，如此複雜的資料顯示，要使用到細項 RadGrid 時，就需要用到 Detail Tables 的方法，它可將複雜的資料全併在一起顯示，有此方便又好用的控制項方法，底下會跟大家如何使用。
Default.aspx ( 紅色部分為 Detail Tables):

<telerik:RadGrid ID="MainGrid" runat="server" AutoGenerateColumns="false" 
    OnDetailTableDataBind="MainGrid_DetailTableDataBind" Skin="Office2007">
    <MasterTableView>
        <DetailTables>
            <telerik:GridTableView runat="server" Name="DetailGrid">
                <Columns>
                    <telerik:GridTemplateColumn UniqueName="ID" 
                        HeaderText="ID">
                        <ItemTemplate>
                            <asp:Label runat="server" 
                                Text='<%# Eval("Educational Background") %>'>
                                </asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="Name" 
                        HeaderText="Name">
                        <ItemTemplate>
                            <asp:Label runat="server" 
                                Text='<%# Eval("Speciality") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="Age" 
                        HeaderText="Age">
                        <ItemTemplate>
                            <asp:Label runat="server" 
                                Text='<%# Eval("Interest") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </telerik:GridTableView>
        </DetailTables>
        <Columns>
            <telerik:GridTemplateColumn UniqueName="ID" HeaderText="ID">
                <ItemTemplate>
                    <asp:Label ID="grid_lblID" runat="server" 
                        Text='<%# Eval("ID") %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="Name" HeaderText="Name">
                <ItemTemplate>
                    <asp:Label ID="grid_lblName" runat="server" 
                        Text='<%# Eval("Name") %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="Age" HeaderText="Age">
                <ItemTemplate>
                    <asp:Label ID="grid_lblAge" runat="server" 
                        Text='<%# Eval("Age") %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

首先，我先隨便建立一個函式，讓它可以回傳自訂的 DataTable :

DataTable GetCustomizeDataTable()
{
    // 自訂資料內容
    DataTable dt = new DataTable();
    dt.Columns.Add("ID");
    dt.Columns.Add("Name");
    dt.Columns.Add("Age");
    dt.Columns.Add("Educational Background");
    dt.Columns.Add("Speciality");
    dt.Columns.Add("Interest");
    dt.Rows.Add(new object[] { 1, "David_Kuo", 23, 
        "University", "Programming", "Basketball" });
    dt.Rows.Add(new object[] { 2, "Kimberly", 23, 
        "University", "Sleep", "eat" });

    return dt;
}

接著在網頁讀取 ( Page Load ) 時，將自訂資料表，設定給 MainGrid 為資料來源。

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 設定資料來源
        MainGrid.DataSource = GetCustomizeDataTable();
    }
}

最後要在 DetailTableDataBind 事件中設定 Detail Tables 的資料來源。

// 在 MainGrid 中 DetailTable 資料建構時觸發
protected void MainGrid_DetailTableDataBind(object source, 
GridDetailTableDataBindEventArgs e)
{
    GridDataItem item = (GridDataItem)e.DetailTableView.ParentItem;
    switch (e.DetailTableView.Name)
    {
        case "DetailGrid":
        {
            // 取得 MainGrid 內中 ID 為 grid_lblID 的控制項
            string strID = ((Label)item.FindControl("grid_lblID")).Text;
            // 設定 DetailTable 篩選條件
            string strSelect = string.Format("ID={0}", strID);
            e.DetailTableView.DataSource = 
                GetCustomizeDataTable().Select(strSelect);
            break;
        }
    }
}

當程式碼都完成後，就會呈現如以下圖片。

回目錄
回首頁