How to format the row based on condition in kendo ui mvc grid

kendo grid change cell color on condition
kendo grid change row color on condition jquery
kendo grid change row color on condition mvc
kendo grid alternate row color
kendo grid cell template
kendo-grid style
kendo grid row template
telerik mvc grid row background

I am working on asp.net mvc. I am trying to display list of messages in a Kendo mvc ui grid. I have written the code like,

Html.Kendo().Grid((List<messages>)ViewBag.Messages))
                .Name("grdIndox")
                .Sortable(m => m.Enabled(true).SortMode(GridSortMode.MultipleColumn))
                .HtmlAttributes(new { style = "" })
                .Columns(
                col =>
                {
                    col.Bound(o => o.RecNo).HtmlAttributes(new { style = "display:none" }).Title("").HeaderHtmlAttributes(new { style = "display:none" });
                    col.Bound(o => o.NoteDate).Title("Date").Format("{0:MMM d, yyyy}");
                    col.Bound(o => o.PatName).Title("Patient");
                    col.Bound(o => o.NoteType).Title("Type");
                    col.Bound(o => o.Subject);

                }

                )
                .Pageable()
                .Selectable(sel => sel.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
                .DataSource(

                           ds => ds.Ajax().ServerOperation(false).Model(m => m.Id(modelid => modelid.RecNo))
                         .PageSize(10)
                            //.Read(read => read.Action("Messages_Read", "Msg"))
                )

                .Events(ev => ev.Change("onSelectingGirdRow"))
                ) 

and i have the field in the table like IsRead-boolean type. so if the message is unread message then i need to format that record with bold font. I have used clientTemplates but with that i am able to format only particular cells i want format entire row. Please guide me.

as Sanja suggested you can use the dataBound event but it will be better to cycle through the tr elements (the rows). Also I assume that you will need the related dataItem to check if the property that indicates if the message is read.

e.g.

dataBound: function ()
{
   var grid = this;
   grid.tbody.find('>tr').each(function(){
     var dataItem = grid.dataItem(this);
     if(!dataItem.IsMessageRead)
      {
         $(this).addClass('someBoldClass');
      }
   })
}

How to format grid conditionally? in Kendo UI for jQuery Grid , for following cases - I am creating grid for Tests if failed then row style color should be read or passed then row style color should be green. An example on how to change the appearance of the Grid cells based on condition in ASP.NET Core projects. Kendo UI for jQuery Conditionally Change Cell Styles

You can use dataBound event to change your rows.

dataBound: function ()
{
   $('td').each(function(){
     if(some condition...)
      {
         $(this).addClass('someBoldClass')}
      }
   })
}

Style Grid Table Rows and Cells by Data Item Values, An example on how to customize the tables cells and rows styles of the Kendo UI Grid for jQuery based on data items values. Iterating the Table Rows. The usage of the dataBound handler and the iteration of the table rows is suitable only if you intend to customize all Grid rows. The approach loops through all Grid rows and, based on the values they contain, determines which custom-class names will be applied to them.

There is another way to do that.It's called RowAction.

.RowAction(row => 
{
   if (condition)
   {
      row.HtmlAttributes["class"] = "someBoldClass";
   }
})

Please note that the RowAction is available only for rows that are rendered on server side. So in your case, you can use RowAction as an alternative to DataBound.

Conditionally Change the Appearance of Grid Cells, NET Core/ UI for ASP.NET MVC. Description. How can I change the appearance of the Grid cells based on a value in the row in ASP.NET Core projects? Description. How can I disable the selection of specific rows in the Grid? Solution. Handle the change event of the Grid.; In the event handler, based on a condition, remove the k-state-selected class from the desired rows.

Conditional Formatting Rows | RadGridView, Conditional Formatting Rows. Cells and rows can be styled based on data conditions using the ConditionalFormattingObject. Setup the condition in theĀ  So you want to color the rows of your KendoUI grid based on the grid data. This is one of those problems that seems like it should be really simple, but if you search the Internet you'll turn up a bunch of convoluted answers. Most of the recommendations relate to row templates. That's fine if you want to completely restyle the grid rows, but

Simple Row Coloring in a KendoUI Grid, So you want to color the rows of your KendoUI grid based on the grid data. to iterate the rows of the grid post-binding, find the ones that meet your conditions, and set a CSS class on them. NET MVC wrapper it looks like . Is it possible to apply conditional row formatting based on gridOptions.data values? Specifically, I need to apply a style to a non consecutive series of rows based on a column's value (ex: if the column was a date, color the row if the

Change the Background Color of Kendo UI Grid Row on Load , In this example we are going to highlight rows in the Kendo Grid based on the data in a specific column in each row. And we are going to useĀ  Assembling N-Nested Kendo UI Grid asp.NET MVC 4 Tag: kendo-ui , kendo-grid , kendo-asp.net-mvc I am looking for N level nested child behavior in Kendo UI grid. so far i have been implementing upto 3-4 level but those grids have to be hard coded in the Code.

Comments
  • Shouldn't it be like $(this).find("tr").each(function()...? The way you wrote it, it will cycle through all of TRs on the page.
  • That's right, I updated my post and now it cycles only through the direct children rows of the Grid table element.
  • is it true that if you user server data binding, ala DataSource( ds => ds.Server(), you cannot access the underlying data item in the javascript using grid.dataItem(this) ?