Как отобразить маленький прямоугольник с динамическим цветом в GridMVC - PullRequest
Новая
       37

Как отобразить маленький прямоугольник с динамическим цветом в GridMVC

0 голосов
/ 20 марта 2019

У меня есть приложение 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>
}

Этот код работает нормально, и моя сетка отображается должным образом.

enter image description here

Теперь я хотел добавить функцию SOrting и Filtering, поэтому я изменил свою сетку на 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 на цветные квадраты, которые я использовал раньше?

Если добавить квадрат невозможно, можно ли изменить цвет фона ячейки на основе значения, которое он содержит? это также будет работать для меня.

1 Ответ

0 голосов
/ 20 марта 2019

Наконец я нашел решение этой проблемы.

Я только что добавил столбцы, как это 

columns.Add(c => c.RAG).Titled("RAG").Filterable(true).Sanitized(false).Encoded(false).RenderValueAs(c => new HtmlString(
    "<div style='height: 20px; width: 20px; background-color: " + GetColorForRag(c.RAG) + "'></div>"
    )).SetWidth(50);

и это функция цвета 

@functions
{

public string GetColorForRag(string RAG)
{
    if (RAG == "Red")
        return "Orangered";
    else if (RAG == "Amber")
        return "orange";
    else
        return "lightgreen";
}

}
...