Le drapeau "sale" de la grille ne se met pas à jour

Question

Je n'arrive pas à régler/supprimer manuellement l'indicateur "indicateur sale" sur le contrôle de grille Kendo.

J'ai étendu le tutoriel pour preserve dirty indicators d'inclure une validation supplémentaire sur le terrain value lors de l'événement dataSource.change:

1. A précédemment enregistré value (qui contient un id) qui a été modifiée pour être 0 - ce est valide "drapeau sale" (e.items[0].id > 0 && e.items[0].value === 0)
2. a value a été conclu avec une valeur supérieure à 0 - ce est valide « sale drapeau »(e.items[0].value > 0)
3. Toute autre instance de valuen'est pas valide « » devrait être supprimée et donc
4. Si l'utilisateur a quitté le champ value « drapeau sale, modifier la valeur » ie « null » vide à 0 (if (!e.items[0].value) {e.items[0].value = 0;})

Avec ces modifications appliquées, l'événement change ressemble maintenant:

change: function (e) { 
    if (e.action == "itemchange") {     
     if ((e.items[0].id > 0 && e.items[0].value === 0) || e.items[0].value > 0) { 
      e.items[0].dirtyFields = e.items[0].dirtyFields || {}; 
      e.items[0].dirtyFields[e.field] = true; 
      _dirty = true; 
     } 
     else { 
      if (!e.items[0].value) { 
       e.items[0].value = 0; 
      } 
      e.items[0].dirty = false; 
      e.items[0].dirtyFields = e.items[0].dirtyFields || {}; 
      e.items[0].dirtyFields[e.field] = false; 
     } 
     $("#grid").data("kendoGrid").refresh(); 
    } 
} 

U pon faisant ces changements, je peux voir la fonction dirtyField (qui est la template de la colonne de valeur) étant déclenchée, et peut également voir les valeurs true/false appropriées étant fournies et le retour approprié prenant place (qui, je pensais, devrait placer/retirer le « drapeau sale » des cellules appropriées):

function dirtyField(data, fieldName){ 
    if(data.dirty && data.dirtyFields[fieldName]){ 
     return "<span class='k-dirty'></span>" 
    } 
    else{ 
     return ""; 
    } 
} 

Cependant, le « drapeau sale » ne soit pas éliminée jusqu'à ce qu'une autre cellule dans la grille est modifiée.

Voici un Dojo example pour illustrer le problème. Pour répliquer:

• Entrez une valeur supérieure à 0 dans la deuxième rangée value cellule (ensembles « drapeau sale »)
• Supprimer la valeur de la deuxième rangée value cellule (« drapeau sale » reste -> devrait maintenant être parti basé sur la logique événement change)
• Entrez une valeur supérieure à 0 dans la troisième rangée value cellule (ensembles « drapeau sale » sur la cellule actuelle, supprime « drapeau sale » de la deuxième rangée value cellulaire)

Answer 1

Votre événement DataSource.change est appelé avant la fermeture de la cellule de la grille. Donc, vous actualisez la grille et les changements de cellule ne sont pas correctement reflétés dans l'interface utilisateur.

Vous devez déplacer l'actualisation de la grille vers l'événement cellClose de la grille. Ensuite, l'actualisation de la grille sera appelée après la fermeture de la cellule et tout fonctionne correctement.

$("#grid").kendoGrid({ 
    dataSource: dataSource, 
    sortable: true, 
    pageable: true, 
    navigatable: true, 
    height: 400,    
    columns: [ 
     { field: "value", title: "Value", editor: decimal_NumberEditor, format: '{0:n2}', attributes: { class: "editable-cell" }, template: "#=dirtyField(data,'value')# #:value#" }], 
    editable: true, 
    cellClose: function(e) { 
     $("#grid").data("kendoGrid").refresh(); 
    } 
}); 

Voici un exemple de travail avec la journalisation des événements pour une meilleure compréhension de ce qui se passe.Voir console JS:

http://dojo.telerik.com/ICIxUX/7