Aktualisieren einer einzelnen Kendo-Rasterzeile

Question

Gibt es eine Möglichkeit, eine einzelne Kendo-Rasterzeile zu aktualisieren, ohne die gesamte Datenquelle zu aktualisieren oder jQuery zu verwenden, um den Wert für jede Zelle festzulegen?

Answer 1

Wie definieren Sie die Zeile, die Sie aktualisieren möchten? Ich gehe davon aus, dass dies die Zeile ist, die Sie ausgewählt haben, und der Name der aktualisierten Spalte lautet symbol.

// Get a reference to the grid 
var grid = $("#my_grid").data("kendoGrid"); 

// Access the row that is selected 
var select = grid.select(); 
// and now the data 
var data = grid.dataItem(select); 
// update the column `symbol` and set its value to `HPQ` 
data.set("symbol", "HPQ"); 

Denken Sie daran, dass der Inhalt des DataSource ist ein observable Objekt, was bedeutet, dass Sie es set mit aktualisieren und die Änderung sollte magisch im grid widerspiegeln.

Answer 2

data.set aktualisiert tatsächlich das gesamte Grid und sendet in einigen Fällen ein databound Ereignis. Dies ist sehr langsam und unnötig. Außerdem werden alle erweiterten Detailvorlagen ausgeblendet, was nicht ideal ist.

Ich würde Ihnen empfehlen, diese Funktion zu verwenden, die ich schrieb, um eine einzelne Zeile in einem Kendo-Gitter zu aktualisieren.

// Updates a single row in a kendo grid without firing a databound event. 
// This is needed since otherwise the entire grid will be redrawn. 
function kendoFastRedrawRow(grid, row) { 
    var dataItem = grid.dataItem(row); 

    var rowChildren = $(row).children('td[role="gridcell"]'); 

    for (var i = 0; i < grid.columns.length; i++) { 

     var column = grid.columns[i]; 
     var template = column.template; 
     var cell = rowChildren.eq(i); 

     if (template !== undefined) { 
      var kendoTemplate = kendo.template(template); 

      // Render using template 
      cell.html(kendoTemplate(dataItem)); 
     } else { 
      var fieldValue = dataItem[column.field]; 

      var format = column.format; 
      var values = column.values; 

      if (values !== undefined && values != null) { 
       // use the text value mappings (for enums) 
       for (var j = 0; j < values.length; j++) { 
        var value = values[j]; 
        if (value.value == fieldValue) { 
         cell.html(value.text); 
         break; 
        } 
       } 
      } else if (format !== undefined) { 
       // use the format 
       cell.html(kendo.format(format, fieldValue)); 
      } else { 
       // Just dump the plain old value 
       cell.html(fieldValue); 
      } 
     } 
    } 
} 

Beispiel:

// Get a reference to the grid 
var grid = $("#my_grid").data("kendoGrid"); 

// Access the row that is selected 
var select = grid.select(); 
// and now the data 
var data = grid.dataItem(select); 

// Update any values that you want to 
data.symbol = newValue; 
data.symbol2 = newValue2; 
... 

// Redraw only the single row in question which needs updating 
kendoFastRedrawRow(grid, select); 

// Then if you want to call your own databound event to do any funky post processing: 
myDataBoundEvent.apply(grid); 

Answer 3

fand ich einen Weg, um das Gitter und Datasource-Show im Netz zu aktualisieren, ohne alle Raster zu aktualisieren. Zum Beispiel haben Sie eine ausgewählte Zeile und Sie möchten den Wert der Spalte "name" ändern.

//the grid 
var grid = $('#myGrid').data('kendoGrid');  
// Access the row that is selected 
var row = grid.select(); 
//gets the dataItem 
var dataItem = grid.dataItem(row); 
//sets the dataItem 
dataItem.name = 'Joe'; 
//generate a new row html 
var rowHtml = grid.rowTemplate(dataItem); 
//replace your old row html with the updated one 
row.replaceWith(rowHtml);