Come cambio il colore di sfondo di un'interfaccia utente Kendo per la cella della griglia MVC

Question

Sto sviluppando un'applicazione utilizzando l'interfaccia utente Kendo per MVC e voglio essere in grado di modificare lo sfondo di una cella ma non so come ottenere il valore della proprietà di background della cella della colonna così posso impostarlo.

@(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")) 
       ) 
) 

Nel mio script Ho codice che loop attraverso la mia griglia sul .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 Binding

utilizzando jQuery, è possibile selezionare e modificare il colore di sfondo cella della griglia utilizzando l'uid (ID univoco) della riga e selezionando l'ennesimo figlio di quella riga.

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"); 
     } 
    }); 
} 

Aggiornamento

Alan Fisher nei commenti ha suggerito un altro modo per risolvere questo che ha imparato dalla gente a KendoUI. La colonna QtyReceived utilizza un ClientTemplate che passa i parametri all'evento di databound.

@(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> 

Con Server Binding

Se si utilizza i dati del server vincolante e non i dati ajax vincolanti, CellAction potrebbe essere un modo migliore per farlo.

@(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

Se si sta compilando la griglia dal modello di visualizzazione MVC, ecco un modo semplice per farlo. Creare stili CSS:

<style> 
     .TrunkSummaryLightYellow { 
      background: LightYellow; 
     } 

     .TrunkSummaryPink { 
      background: Pink; 
     } 

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

Quindi utilizzare una funzione di documento-ready come segue:

$(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"); 
     } 
    } 
}) 

Grazie a Dave Glick (link) per questo suggerimento.

ho lavorato fuori che il colore di una singola cella sfondo può essere impostato come segue:

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