Odświeżanie pojedynczego wiersza siatki Kendo

Question

Czy istnieje sposób na odświeżenie pojedynczego wiersza siatki Kendo bez odświeżania całego źródła danych lub użycia jQuery do ustawienia wartości dla każdej komórki?

Answer 1

Jak zdefiniować wiersz, który chcesz zaktualizować? Zakładam, że jest to wiersz, który wybrałeś, a nazwa aktualizowanej kolumny to 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"); 

Pamiętaj, że treść DataSource jest obiektem observable, co oznacza, że ​​można go zaktualizować za pomocą set i zmiany powinny znaleźć odzwierciedlenie magicznie w grid.

Answer 2

data.set odświeży całą sieć i wyśle ​​w niektórych przypadkach zdarzenie databound. Jest to bardzo powolne i niepotrzebne. Spowoduje to również zwinięcie dowolnych rozszerzonych szablonów szczegółów, które nie są idealne.

Polecam użyć tej funkcji, którą napisałem, aby zaktualizować pojedynczy wiersz w siatce kendo.

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

Przykład:

// 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

znalazłem sposób, aby zaktualizować źródła danych siatki i show w sieci bez odświeżania całej sieci. Na przykład masz wybrany wiersz i chcesz zmienić wartość kolumny "nazwa".

//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);