web-dev-qa-db-fra.com

Actualiser une seule ligne de grille Kendo

Existe-t-il un moyen de rafraîchir une seule ligne de grille Kendo sans actualiser la source de données entière ou en utilisant jQuery pour définir la valeur de chaque cellule?

kendo-uikendo-grid
37
rafoo

Comment définissez-vous la ligne que vous souhaitez mettre à jour? Je vais supposer que c'est la ligne que vous avez sélectionnée, et le nom de la colonne mise à jour est 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");

N'oubliez pas que le contenu de DataSource est un objet observable, ce qui signifie que vous pouvez le mettre à jour à l'aide de set et que la modification doit être reflétée comme par magie dans le grid.

51
OnaBai

data.set actualisera en fait la grille entière et enverra un événement databound dans certains cas. C'est très lent et inutile. Il réduira également les modèles de détail étendus, ce qui n'est pas idéal.

Je vous recommande d'utiliser cette fonction que j'ai écrite pour mettre à jour une seule ligne dans une grille de 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);
            }
        }
    }
}

Exemple:

// 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);
33
Adam Yaxley

J'ai trouvé un moyen de mettre à jour la source de données de la grille et de l'afficher dans la grille sans actualiser toute la grille. Par exemple, vous avez une ligne sélectionnée et vous souhaitez modifier la valeur du "nom" de la colonne.

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