How to change the color of a column based on the value

[Salma]

I am using mvc and using the server as a datasource.  I am trying to change the color of the column based on the value  . I tried to many finding on the net but none is working see at least two of them in the code below.   

 

//This example doesn't do anything.

columns.Bound(p => p.balance).Width(120).Sortable(false).Template(@<text>
                                                                                       @if (item.balance< 0)
                                                                                       {
                                                                                           <div style="background-color: Red;">
                                                                                               @item.balance;

                                                                                           </div>
                                                                                       }
                                                                                       else
                                                                                       {
                                                                                           <div style="background-color: Green;">
                                                                                               @item.amount_residence
                                                                                           </div>
                                                                                       }
                                                                                    </text>);

       //This below example throw an error

@(Html.Kendo().Grid(Model)
    .Name("grid").CellAction(cell =>
    {
        if (cell.Column.Title.Equals("balance"))
        {
            if (cell.DataItem.balance != null && cell.DataItem.balance.Value < 0)
            {
                cell.HtmlAttributes["style"] = "background-color: red";
            }
        }
    })
    .Columns...

[Ivan Danchev]

Hello,

The approach that uses the Template option, works as expected at my end. Here's an example:

The Index view and the Grid's declaration:

@model IEnumerable<TelerikMvcApp23.Models.OrderViewModel>

@(Html.Kendo().Grid(Model)
	.Name("Grid1")
	.Columns(columns =>
	{
		columns.Bound(p => p.OrderID);
		columns.Bound(p => p.Freight);
		columns.Bound(p => p.balance).Width(120).Sortable(false).Template(@<text>
			@if (item.balance < 0)
			{
				<div style="background-color: Red;">
					@item.balance;

				</div>
			}
			else
			{
				<div style="background-color: Green;">
					@item.amount_residence
				</div>
			}
			/**/
		</text>);
	})
	.Pageable()
	.Sortable()
	.Filterable()
	.Groupable()
)

The Model:

public class OrderViewModel
{
    public int OrderID
    {
        get;
        set;
    }

    public int balance { get; set; }

    public int amount_residence { get; set; }

    public decimal? Freight
    {
        get;
        set;
    }
}

The Index action that passes the model to the Index view:

public ActionResult Index()
{
    List<OrderViewModel> data = new List<OrderViewModel>()
    {
        new OrderViewModel
        {
            OrderID = 1,
            Freight = 100,
            balance = 1,
            amount_residence = 1000
        },
        new OrderViewModel
        {
            OrderID = 2,
            Freight = 50,
            balance = -2,
            amount_residence = 500
        }
    };

    return View(data);
}

As you can see in the attached screenshot the Template is used by the Grid.

I would advice checking the data you pass back to the client. Ensure that the fields have the proper casing. For example you've posted both the "balance" and the "amount_residence" fields starting with lower case, so that's how I've declared them in the Model I posted above.

Regards,
Ivan Danchev
Progress Telerik

[Salma]

Thanks for your reply. Bt for some reason it is not working on my end. 

 

[Ivan Danchev]

I am not sure what is different in your end, so could you post your Grid declaration, ViewModel, and some sample data returned by the action, like in my previous post? I will give it a try and check what could be causing the difference in behavior.