Geek Answers Handbook

Telerik MVC grid that creates a red column based on a different column size

I have a Telerik MVC grid that says there are like two fields

CustomerID and OrdersQuantity (can go negative)

My grid is as follows

 CustomerID OrdersQuantity 1 10 2 3 <font color="red">4*</font> -10 <font color="red">5*</font> -20 7 10

I want to show CustomerID in red and add "*" SYMBOL if OrdersQuantity is < 0

as in the above example, I want to show clientid 4* and 5* in Red

+4
source share
1 answer

There are two ways to accomplish this: one for binding the server, and the other for binding ajax.

A simple note: I created a model called "SmallItem" that just has properties, CustomerID and OrdersQuantity (both int), so if any links are made to SmallItem, you know where it comes from.

Server:

This can only be achieved with the Telerik grid ad:

 @model IEnumerable<SmallItem> @{Html.Telerik().Grid(Model) .Name("TestGrid") .Columns(columns => { columns.Template(@<text>@(item.OrdersQuantity < 0 ? item.CustomerID.ToString() + "*" : item.CustomerID.ToString())</text>).Title("CustomerID"); columns.Bound(s => s.OrdersQuantity).Title("Order Quantity"); }) .CellAction(cell => { if(cell.Column.Title == "CustomerID") { SmallItem item = cell.DataItem; if(item.OrdersQuantity < 0) { cell.HtmlAttributes["style"] = "color: red;"; } } }) .Render(); }

As you can see above, I use the "Template" column and, using Razor syntax, just set up a simple if statement to add "*" next to the CustomerID field. Now a very simple way to change the attributes of a cell (rather than a whole row) is to connect the CellAction function, which will be executed for each cell. Having a simple if statement to make sure that we are in the CustomerID column (note the use of Title, not Member, since this is a template column), and then you can simply check that a specific Model instance has OrdersQuantity if it is smaller 0, just add style to the HtmlAttributes collection.

Ajax:

The ajax approach implies the use of some JavaScript, and all this can be considered in several lines. If my grid looks like this:

 @{Html.Telerik().Grid<SmallItem>() .Name("AjaxTestGrid") .Columns(columns => { columns.Bound(s => s.CustomerID).Title("Customer ID"); columns.Bound(s => s.OrdersQuantity).Title("Order Quantity"); }) .DataBinding(dataBinding => dataBinding.Ajax().Select("_Test", "Grid")) .ClientEvents(clientEvents => clientEvents.OnRowDataBound("onRowDataBound")) .Render();}

Then I can use the OnRowDataBound event, which is fired for each row. If I use this JavaScript:

  function onRowDataBound(e) { if (e.dataItem.OrdersQuantity < 0) { e.row.cells[0].innerHTML += "*"; e.row.cells[0].style["color"] = "red"; } }

I just check the row dataItem of the row (contains only CustomerID and OrdersQuantity) to see if our OrdersQuantity is less than 0, then I just get access to the innerHTML collection and the style of a particular cell (since CustomerID is the first column, it has an index of 0).

Both approaches do what you are looking for, and the one you implement only depends on how you snap your mesh.

+12
source

More articles:


All Articles