jquery - mvc - Cómo comparar y mostrar indicador de kendo sucio al editar solo si el valor anterior y el nuevo son diferentes antes de guardar la grilla

kendo grid pageable jquery

Question

En una grilla de kendo, en la celda de la cuadrícula cuando cambio un valor, se muestra la bandera sucia del kendo. Pero cuando vuelvo a hacer clic en la misma celda de la grilla y la cambio al valor anterior (valor ya existente), la bandera sucia sigue apareciendo.

¿Cómo puedo verificar si el valor es similar al valor anterior y no mostrar el indicador sucio antes de guardarlo?

A continuación está mi código para el menú desplegable editable de kendo.

function editCategoryDropDown(container, options) {
var catObject = JSON.parse(ticketProjectCategoryObject.value);
$(''<div id="categoryDDTreeView" class="dropDownTreeViewStyle"/>'').appendTo(container);
var catDropDownTreeView = $("#categoryDDTreeView").kendoExtDropDownTreeView({
treeview: {
dataSource: new kendo.data.HierarchicalDataSource({
data: catObject
}),
//expended: true,
loadOnDemand: false,
change: function (e) {
{
var dropDownTreeViewObj = $(''#categoryDDTreeView'').find(''.k-input'');
var nodeTitle = dropDownTreeViewObj.attr("title");
if (nodeTitle != null) {
options.model.Category = nodeTitle;
options.model.CategoryId = dropDownTreeViewObj.attr("nodevalue")
options.model.dirty = true;
container.addClass("k-dirty-cell");
}
};
}
},
}).data("kendoExtDropDownTreeView");
var dropDownBox = catDropDownTreeView.dropDownList();
dropDownBox.text(options.model.Category)
var treeView = catDropDownTreeView.treeview();
var node = treeView.findByText(options.model.Category.split("|").pop().trim());
treeView.select(node);
}

Answer 1

Esta es una tarea interesante, así que invertí algo de tiempo en experimentar. Considere el siguiente enfoque:

• en el evento de edit de la Grilla, guarde el estado original del ítem de datos ( e.model.toJSON() ) en alguna variable. toJSON es necesario para eliminar los campos y métodos específicos de Kendo, convertir el elemento de datos a un objeto JavaScript simple y romper las actualizaciones de valores automáticos que de otro modo se producirían, a medida que el elemento de datos se pasa por referencia.

  edit: function(e) {
  var model = e.model;
  if (!originalDataItems[model.id]) {
  originalDataItems[model.id] = model.toJSON();
  }
  }

• en el evento save de la cuadrícula, compare los nuevos valores sucios con los valores de los elementos de datos originales. Si son iguales, aplique una clase de CSS personalizada a la celda de la tabla. Tendrá que ajustar el código en el controlador de save en setTimeout , porque este evento se dispara antes de que la celda editada se haya cerrado y se haya cambiado al modo sin edición.

  save: function(e) {
  setTimeout(function() {
  e.sender.tbody.find(".k-dirty-cell").each(function() {
  var cell = $(this);
  var field = e.sender.columns[cell.index()].field;
  var dataItem = e.sender.dataItem(cell.closest("tr"));
  cell.toggleClass("no-dirty",
  originalDataItems[dataItem.id][field] == dataItem[field]);
  });
  });
  }

• La clase CSS personalizada se puede usar para ocultar la marca sucia como esta:

  .no-dirty .k-dirty {
  display: none;
  }

• Finalmente, elimine todos los elementos de la colección originalDataItems cuando se guarden todos los cambios pendientes, es decir, en el evento saveChanges .

  saveChanges: function() {
  originalDataItems = {};
  }

Aquí hay un ejemplo completo:

http://dojo.telerik.com/ivOBU

Una cosa para señalar es que aunque las marcas sucias estarán ocultas, el elemento de datos respectivo seguirá dirty y sujeto a la sincronización con el servicio de datos remoto. Este es un problema menor cuando se utiliza la edición por batch (como en su caso), pero si desea evitar la transferencia innecesaria de datos, mejore el controlador de save y restaure el campo dirty los elementos de datos no modificados a false .