¿Cómo puedo cambiar el color de fondo de un Kendo interfaz de usuario para MVC celda de la cuadrícula

Question

Estoy desarrollando una aplicación usando la interfaz de usuario de Kendo para MVC y yo quiero ser capaz de cambiar el fondo de una celda, pero no sé cómo obtener el valor de la propiedad de fondo de celda de columna para que pueda configurarlo.

@(Html.Kendo().Grid(Model) 
     .Name("LineItems") 
     .Events(e=> e 
      .DataBound("LineItems_Databound") 
     ) 
     .Columns(columns => 
      { 
       columns.Bound(o => o.Ui).Title("UI").Width(20); 
       columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30); 
       columns.Bound(o => o.Nomenclature).Width(200); 
       columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent"); 
       columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx"); 
       columns.Bound(o => o.ReqID).Width(50); 
       columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN"); 
       columns.Bound(o => o.ManPartID).Width(100).Title("Part#"); 
       columns.Bound(o => o.Requestor).Width(100).Title("Requestor"); 




      }) 
        .ToolBar(toolbar => 
        { 
         //toolbar.Create(); 
         toolbar.Save(); 
        }) 


       .Editable(editable => editable.Mode(GridEditMode.InCell)) 
       .Sortable() 
       .Selectable() 
       .Resizable(resize => resize.Columns(true)) 
       .Reorderable(reorder => reorder.Columns(true)) 
       .DataSource(dataSource => dataSource 
        .Ajax() 
        .Model(model => model.Id(p => p.ID)) 
        .Batch(true) 
        .ServerOperation(false) 
        .Read(read => read.Action("Editing_Read", "Shipping")) 
        .Update(update => update.Action("UpdateShipment", "Shipping")) 
        //.Destroy(update => update.Action("Editing_Destroy", "Shipping")) 
       ) 
) 

En mi guión tengo código que se repite a través de mi cuadrícula en .databound

function LineItems_Databound() { 
     var grid = $("#LineItems").data("kendoGrid"); 
     var data = grid.dataSource.data(); 
     $.each(data, function (i, row) { 
      var qtyRx = row.QtyReceived; 
      var qtySx = row.QtyShipped; 


      if (qtyRx < qtySx) { 
//   Change the background color of QtyReceived here 
      } 



     }); 

Answer 1

Con Ajax Encuadernación

usando jQuery, puede seleccionar y cambiar el color de fondo de una celda de la grilla utilizando el uid (id. único) de la fila y seleccionando el enésimo hijo de esa fila.

function LineItems_Databound() { 
    var grid = $("#LineItems").data("kendoGrid"); 
    var data = grid.dataSource.data(); 
    $.each(data, function (i, row) { 
     var qtyRx = row.QtyReceived; 
     var qtySx = row.QtyShipped; 

     if (qtyRx < qtySx) { 
     //Change the background color of QtyReceived here 
     $('tr[data-uid="' + row.uid + '"] td:nth-child(5)').css("background-color", "red"); 
     } 
    }); 
} 

actualización

Alan Fisher en los comentarios sugirieron otra manera de resolver este que aprendió de la gente en KendoUI. La columna QtyReceived utiliza una ClientTemplate que pasa parámetros al evento de datos enlazados.

@(Html.Kendo().Grid(Model) 
    .Name("LineItems") 
    .Events(e => e.DataBound("LineItems_Databound")) 
    .Columns(columns => 
    { 
    columns.Bound(o => o.Ui).Title("UI").Width(20); 
    columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30); 
    columns.Bound(o => o.Nomenclature).Width(200); 
    columns.Bound(o => o.Requestor).Width(100); 
    columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent"); 
    columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx") 
     .ClientTemplate("#= LineItems_Databound(QtyShipped,QtyReceived)#"); 
    columns.Bound(o => o.ReqID).Width(50); 
    columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN"); 
    columns.Bound(o => o.ManPartID).Width(100).Title("Part#"); 
    columns.Bound(o => o.ReceivedBy).Width(100).Title("Received By"); 
    columns.Bound(o => o.RecAtSiteDate).Width(100).Title("Received Date") 
     .Format("{0:dd MMM, yy}"); 
    }) 
) 

<script> 
    function LineItems_Databound(qtySx, qtyRx) { 
     if (qtyRx < qtySx) { 
     return "<div style='background: pink'>" + qtyRx + " </div>"; 
     } 
     else { 
     return qtyRx; 
     } 
    } 
</script> 

Gracias al servidor de unión

Si está utilizando el enlace de datos del servidor y no vinculantes de datos ajax, CellAction podría haber una mejor manera de hacer esto.

@(Html.Kendo().Grid(Model) 
    .Name("LineItems") 
    .CellAction(cell => 
    { 
     if (cell.Column.Title.Equals("QtyReceived")) 
     { 
     if (cell.DataItem.QtyReceived.Value < cell.DataItem.QtyShipped.Value) 
     { 
      cell.HtmlAttributes["style"] = "background-color: red"; 
     } 
     } 
    }) 
    .Columns(columns => 
    { 
     columns.Bound(o => o.Ui).Title("UI").Width(20); 
     columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30); 
     columns.Bound(o => o.Nomenclature).Width(200); 
     columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent"); 
     columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx"); 
     columns.Bound(o => o.ReqID).Width(50); 
     columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN"); 
     columns.Bound(o => o.ManPartID).Width(100).Title("Part#"); 
     columns.Bound(o => o.Requestor).Width(100).Title("Requestor"); 
    }) 
) 

Answer 2

Si está rellenando la cuadrícula del modelo de vista MVC, aquí hay una manera sencilla de hacerlo. Crear estilos CSS:

<style> 
     .TrunkSummaryLightYellow { 
      background: LightYellow; 
     } 

     .TrunkSummaryPink { 
      background: Pink; 
     } 

     .TrunkSummaryLightGreen { 
      background: LightGreen; 
     } 
    </style> 

continuación, utilizar una función de documento de una lista de la siguiente manera:

$(document).ready(function() { 
    var grid = $("#TrunkSummaryGrid").data("kendoGrid"); 
    var gridData = grid.dataSource.view(); 

    for (var i = 0; i < gridData.length; i++) { 
     if (gridData[i].SomeProperty == SomeValue) { 
      grid.table.find("tr[data-uid='" + gridData[i].uid + "']").addClass("TrunkSummaryLightYellow"); 
     } 
    } 
}) 

Gracias a Dave Glick (link) para esta sugerencia.

He calculado que el color de fondo de una celda individual se puede configurar de la siguiente manera:

grid.table.find("tr[data-uid='" + gridData[i].uid + "']")[0].cells[4].style.backgroundColor = 'pink';