how to set color on the value of some fields?

[YN]

Hi,

 

Is there a way to set color on the value for some fields according to some rule?  yes/no or >0, <0.

[Marin Bratanov]

Hi Sarah,

You can use a template so you can render the desired content (for example, a span with the desired color).

Here's a basic example, and a screenshot of the expected result is attached at the end of the post. Of course, you can refactor this to match your needs and coding style. The following article provides more details on how to use templates: https://docs.telerik.com/kendo-ui/framework/templates/overview.

view:

<style>
    .red {
        color: red;
    }
    .green {
        color: green;
    }
</style>

<script>
    function getClass(id) {
        return id < 5 ? "red" : "green";
    }

    function getClass2(name, fullDataItem) {
        //console.log(fullDataItem.Id); // just an example how you can get the whole model so you can refactor this, or use more complex logic
        return name.indexOf("name 2") > -1 ? "red" : "green";
    }
</script>

@(Html.Kendo().Grid<MyData>()
    .Name("myGrid")
    .Columns(c =>
    {
        c.Bound(f => f.Id).ClientTemplate("<span class='#= getClass(Id) #'>#=Id#</span>");
        c.Bound(f => f.Name).ClientTemplate("<span class='#= getClass2(Name, data) #'>#=Name#</span>");
    })
    .DataSource(
    d => d.Ajax()
        .Read(r => r.Action("GetData", "Home"))
    )
)

model:

public class MyData
{
    public int Id { get; set; }
    public string Name { get; set; }
}

controller:

public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
    return Json(
        Enumerable.Range(1, 20)
        .Select(x => new MyData { Id = x, Name = "name " + x })
        .ToDataSourceResult(request)
        );
}

Regards,
Marin Bratanov
Progress Telerik