html - GridMVC で動的な色の小さな四角形を表示する方法

Question

モデルからグリッドを作成する MVC アプリケーションがあります。モデル プロパティ「RAG」には、色名を含む文字列があります。それに基づいて、グリッドに小さな色付きの正方形を配置しています。

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.DMRTitle)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PlannedDate)
        </td>            
        <td>
            @if (item.RAG == "Green")
            {
                <div style="height: 20px; width: 20px; background-color: lightgreen"></div>
            }
            else if (item.RAG == "Amber")
            {
                <div style="height: 20px; width: 20px; background-color: orange"></div>
            }
            else
            {
                <div style="height: 20px; width: 20px; background-color: orangered"></div>
            }
        </td>            
    </tr>
}

このコードは正常に機能し、グリッドは期待どおりにレンダリングされます。

SOrting と Filtering 機能を追加したいので、Grid を Grid.MVC に変更しました。

このコードを使用して、列をテキストとしてレンダリングできます。

<div>
@Html.Grid(Model).Columns(columns =>
{
    columns.Add(c => c.DMRTitle).Titled("Milestone").Filterable(true).SetWidth(100);
    columns.Add(c => c.PlannedDate).Titled("Planned Date").Format("{0:dd-MMM-yyyy}").Filterable(true).SetWidth(100);        

    columns.Add(c => c.RAG).Titled("RAG").Filterable(true).SetWidth(100);


}).WithPaging(5).Sortable(true)

RAG 列のテキストを、以前使用していた色付きの四角に変更するにはどうすればよいですか?

正方形を追加できない場合、含まれる値に基づいてセルの背景色を変更できますか? それは私にとってもうまくいきます。