DevExpress - 在 GridView 中自訂顯示文字

Posted on | Edited on | In ,

分享一些最近使用 DevExpress 元件中的幾個用法。

Scenario

假設

一個類別(Category)有多種商品(Product)

在 Product 的 Grid View 內需要顯示 Category 的名稱，而 Product 資料表內只有存放 Category 的 id
，那我們怎麼在顯示的時候是 name，存放的時候是 _id_ 呢？

起手式

Model

那麼我們 Model 部分會是

Category.cs

Category.cs
1
2
3
4
5
6
7
8
public class Category {
  [Key]
  public int Id { get; set; }

  public string Name { get; set; }

  public ICollection<Product> Products { get; set; }
}

Product.cs

Product.cs
1
2
3
4
5
6
7
8
9
public class Product {
  [Key]
  public int Id { get; set; }

  public string title { get; set; }
  public string descrition { get; set; }

  public Category Category { get; set; }
}

DBContext.cs

DBContext.cs
1
2
3
4
5
6
public class DBContext : DbContext {
  public DBContext() : base("name=DbSource"){}

  public DbSet<Category> Categories { get; set; }
  public DbSet<Product> Products { get; set; }
}

View

這邊就不說明全部的架構，只提 Partial View 內 GridView 的參數設定。

_listGridViewPartial.cshtml

listGridViewPartial.cshtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@{
    var grid = Html.DevExpress().GridView(
        settings => {
            .
            .
            <省略>
            .
            .
            settings.Columns.Add(column=> {
                column.FieldName = "Category_Id";
                column.Caption = "Category";
            });
            .
            .
            <省略>
            .
            .
        });
    if (ViewData["EditError"] != null){
        grid.SetEditErrorText((string)ViewData["EditError"]);
    }
}
@grid.Bind(Model).GetHtml()

說明

先從 Context 開始

DBContext.cs

透過 id 在 Category 找到名稱

DBContext.cs
1
2
3
4
5
6
public string getName(int id) {
    using (var db = new DBContext()) {
        var m = db.Category.Where(it => it.Id == id).Select(it => it.Name).FirstOrDefault();
        return m;
    }
}

View

回到 GridView 中。

GridView 如何將 data source 的資料 bound 在每個 column ？
答案是，它利用 FieldName 這個屬性來辨別 data source 的每個欄位。

範例中，GridView 如果有需要做 資料的新增，存回資料表的是 Category_Id，所以將 Category_Id 與 column.FieldName 做綁定，那麼顯示的部份呢？

在 GridView 的 settings 內用 CustomColumnDisplayText
把 DevExpress.Web.ASPxGridViewColumnDisplayTextEventArgs 的 DisplayText 做改變就可以辦到，如下：

listGridViewPartial.cshtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@{
    var grid = Html.DevExpress().GridView(
        settings => {
            .
            .
            <省略>
            .
            .
            settings.Columns.Add(column=> {
                column.FieldName = "Category_Id";
                column.Caption = "Category";
            });
            settings.CustomColumnDisplayText = (sender, e) => {
              if (e.Column.FieldName != "Category_Id") return;
              DBContext db = new DBContext();
              e.DisplayText = db.getName((int)e.Value);
            };
            .
            .
            <省略>
            .
            .
        });
    if (ViewData["EditError"] != null){
        grid.SetEditErrorText((string)ViewData["EditError"]);
    }
}
@grid.Bind(Model).GetHtml()

Reference