[ASP.NET]動態指定DataGrid欄位,如何固定寬度

[ASP.NET]動態指定DataGrid欄位,如何固定寬度

前陣子有人詢問我這樣的問題,他說他透過ADO去讀取資料後,將資料內容餵給DataGrid時,發現DataGrid的欄位寬度怪怪的,怎麼個怪法,我們看一下下面這個畫面,以下以北風資料庫的Employees這個資料庫的資料來做說明:

這個版面的呈現,怎麼樣也稱不上美觀,我們看到欄位的寬度隨著欄位的Header跟內容的寬度做了調整,但偏偏這個調整又非常的醜陋,

image

他說他在程式中這樣寫:

{
    BindGrid();
}

private void BindGrid()
{
    DataTable tDataSource = getDataSource();

    BoundColumn tBC = new BoundColumn();
    //動態加入每個欄位並設定名稱
    for (int i = 0; i < tDataSource.Columns.Count; i++)
    {
        tBC = new BoundColumn();
        tBC.DataField = tDataSource.Columns[i].ColumnName;
        tBC.HeaderText = tDataSource.Columns[i].ColumnName;
        //設定固定寬度為100
        tBC.HeaderStyle.Width = 100;
        //將此欄位加入到DataGrid中
        ModuleGrid.Columns.Add(tBC);
    }

    if (tDataSource.Rows.Count > 0)
    {
        //指定資料來源
        ModuleGrid.DataSource = tDataSource.DefaultView;
        ModuleGrid.DataBind();
    }
}

在18行的部分他想把每個欄位的寬度都設定為100,但跑出來的結果卻跟他所想的不一樣,上網找了一下,找到透過table-layout的fixed屬性值可以固定住DataGrid的欄位寬度,所以我們把這一行加進去:

{
    DataTable tDataSource = getDataSource();

    BoundColumn tBC = new BoundColumn();
    //動態加入每個欄位並設定名稱
    for (int i = 0; i < tDataSource.Columns.Count; i++)
    {
        tBC = new BoundColumn();
        tBC.DataField = tDataSource.Columns[i].ColumnName;
        tBC.HeaderText = tDataSource.Columns[i].ColumnName;
        //設定固定寬度為100
        tBC.HeaderStyle.Width = 100;
        //將此欄位加入到DataGrid中
        ModuleGrid.Columns.Add(tBC);
    }
    //固定欄位寬度
    ModuleGrid.Style.Add("table-layout", "fixed");

    if (tDataSource.Rows.Count > 0)
    {
        //指定資料來源
        ModuleGrid.DataSource = tDataSource.DefaultView;
        ModuleGrid.DataBind();
    }
}

再看看目前畫面的狀況,果然每個欄位的寬度都被固定在100px了,看起來稍微美觀了一些,不過Notes這個欄位還是破壞了整個版面,我們再做一些調整,

image

{
    DataTable tDataSource = getDataSource();

    BoundColumn tBC = new BoundColumn();
    //動態加入每個欄位並設定名稱
    for (int i = 0; i < tDataSource.Columns.Count; i++)
    {
        tBC = new BoundColumn();
        tBC.DataField = tDataSource.Columns[i].ColumnName;
        tBC.HeaderText = tDataSource.Columns[i].ColumnName;

        //如果是Notes這個欄位的話,寬度是300,其它是100
        if (tDataSource.Columns[i].ColumnName == "Notes")
        {
            tBC.HeaderStyle.Width = 300;
        }
        else
        {
            //設定固定寬度為100
            tBC.HeaderStyle.Width = 100;
        }
        //將此欄位加入到DataGrid中
        ModuleGrid.Columns.Add(tBC);
    }
    //固定欄位寬度
    ModuleGrid.Style.Add("table-layout", "fixed");

    if (tDataSource.Rows.Count > 0)
    {
        //指定資料來源
        ModuleGrid.DataSource = tDataSource.DefaultView;
        ModuleGrid.DataBind();
    }
}

判斷如果欄位名稱是Notes的話就把寬度放大到300px,其它的欄位則為100px,畫面就會變成這個樣子:

image

整體來說就變的美觀多了,其實在判斷欄寬的部分可以去抓Table schema來決定要給多少寬度,不過本篇的重點只在固定寬度,讓他不會亂跑就好,參考看看....

游舒帆 (gipi)

探索原力Co-founder,曾任TutorABC協理與鼎新電腦總監,並曾獲選兩屆微軟最有價值專家 ( MVP ),離開職場後創辦探索原力,致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關,都是在為未來儲備能量,2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》,為培養台灣未來的領袖而努力。