Как сравнить и отобразить флаг kendo dirty при редактировании, только если старое значение и новое значение отличаются до сохранения сетки.

Question

В сетке кендо в ячейке сетки, когда я меняю значение, отображается грязный флаг кендо. Но затем, когда я нажимаю на ту же ячейку сетки и меняю ее на предыдущее значение (уже существующее значение), грязный флаг все же появляется.

Как проверить, совпадает ли значение с предыдущим значением и не отображать флаг загрязнений перед сохранением.

Ниже приведен мой код для раскрывающегося списка для редактирования кендо.

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

Это интересная задача, поэтому я потратил некоторое время на эксперименты. Рассмотрим следующий подход:

• в edit случае сетки, сохранить исходное состояние элемента данных (e.model.toJSON()) в некоторой переменной. toJSON необходим для разграничения полей и методов, специфичных для Kendo, преобразования элемента данных в обычный объект JavaScript и разрыва автоматических обновлений значений, которые в противном случае произойдут, поскольку элемент данных передается по ссылке.

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

• в save случае сетки, сравнить новые грязные значения с исходными значениями элементов данных. Если они одинаковы, примените собственный CSS-класс к ячейке таблицы. Вам нужно будет обернуть код в обработчике save в setTimeout, потому что это событие запускается до того, как отредактированная ячейка была закрыта и переключена обратно в режим без редактирования.

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

• Класс пользовательских CSS можно использовать, чтобы скрыть грязную марку, как это:

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

• Наконец, удалить все элементы из originalDataItems коллекции, когда все ожидающие изменения сохраняются, то есть в saveChanges событие.

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

Вот полный пример:

http://dojo.telerik.com/ivOBU

Одна вещь, чтобы указать на то, что даже несмотря на то, грязные знаки будут скрыты, соответствующий элемент данных будет по-прежнему dirty и при условии синхронизации с удаленной службой данных. Это незначительная проблема, когда используется редактирование batch (как и в вашем случае), но если вы хотите предотвратить ненужную передачу данных, увеличьте обработчик save и сбросьте поля немодифицированных данных «dirty» на false.