mantiene manualmente un indicatore di cella sporco sul paging nella griglia di Kendo

Question

Ho una griglia Kendo modificabile in cui posso modificare una cella e la griglia aggiunge il segno rosso nell'angolo in alto a sinistra della cella.

Vado a un'altra pagina e poi torno alla pagina in cui è avvenuta la modifica e il segno rosso è scomparso, ma il valore aggiunto nella cella rimane. Ho visto una risposta a questo sul sito di Kendo dove è stato consigliato che: "Per mostrare la" bandiera sporca "ogni volta che la griglia viene rimbalzata, dovrà scorrere tutti i modelli, controllare tutti i campi se modificati e visibili in le celle della griglia. "

Sto assumendo che questo dovrà essere fatto sull'evento DataBound() della griglia (sembra sparare quando cambio pagina) dove applicherò manualmente la classe k-dirty-cell alla cella ma posso ' t capire come fare questo lavoro in codice. Ogni pensiero è molto apprezzato.

$(function() { 
        $("#grid").kendoGrid({ 
         height: 550, 
         scrollable: true, 
         sortable: true, 
         filterable: true, 
         resizable: true, 
         reorderable: true, 
         groupable: false, 
         editable: true, // enable editing 
         columns: [ 
            //REMOVED TO SHORTEN EXAMPLE  
            ], 
         toolbar: [{name: "save", text: "Save All Records"}, "cancel"], 
         dataSource: { 
          schema: { 
           data: "d", 
           total: function(data) { 
            return data.d.length; 
           }, 
           model: { 
            //REMOVED TO SHORTEN EXAMPLE 
            } 
           } 
          }, 
          batch: true, 
          pageSize: 10, 
          transport: { 
           read: { 

           }, 
           parameterMap: function (data, operation) { 
            if (operation == "read") { 
             //WEB SERVICE CALLS REMOVED... YOU GET THE POINT 
            } 
            else if(operation == "update") { 
             //WEB SERVICE CALLS REMOVED... YOU GET THE POINT 
            } 
           } 
          }, 
         }, 
         selectable: true, 
         pageable: true, 
         dataBound: function() 
         { 
           //THIS IS FIRED WHEN I CHANGE PAGEs BUT 
           //NOT SURE WHAT CODE GOES HERE TO 
           //REAPPLY DIRTY CELL MARKER 
       }; 

Answer 1

L'evento databound è un buon posto per ri-applicare questo, ma io continuo a mente che quando scorrendo DataItems della griglia, v'è una bandiera sporco per ogni riga, ma non ogni campo.

È altamente probabile che io non sia a conoscenza di un modo per fare riferimento solo alle modifiche in sospeso in una griglia, ma ho scritto un piccolo sistema per rintracciare tali modifiche a un livello più granulare.

Nel mio sistema, memorizzo le modifiche in sospeso della griglia in una variabile globale denominata PendingChanges.

Quindi specificare due eventi. Il primo è lo change event nell'origine dati della griglia. Questo codice memorizza le informazioni necessarie dal cambiamento che appena si è verificato:

var PendingChanges = []; 
    function GridEdit(e) { 
     var cellHeader = $("#grid").find("th[data-title='" + e.field + "']"); 
     if (cellHeader[0] != undefined) { 
      var pendingChange = new Object(); 
      //Holds field name 
      pendingChange.PropertyName = e.field; 
      //Keeps track of which td element to select when re-adding the red triangle 
      pendingChange.ColumnIndex = cellHeader[0].cellIndex; 
      //used to pull row. Better than the row's id because you could have 
      //multiple rows that have been inserted but not saved (ie. all have 
      //ID set to 0 
      pendingChange.uid = e.items[0].uid; 
      //Remember to clear this out after you save 
      PendingChanges.push(pendingChange); 
     } 
    } 

Poi, io uso il dataBound event per verificare quali modifiche in sospeso sono circa e impostare le celle rilevanti per visualizzare il triangolo rosso:

function GridDataBound(e) { 
    for (var i = 0; i < PendingChanges.length; i++) { 
     var row = this.tbody.find("tr[data-uid='" + PendingChanges[i].uid + "']"); 
     var cell = row.find("td:eq(" + PendingChanges[i].ColumnIndex + ")"); 

     if (!cell.hasClass("k-dirty-cell")) { 
      cell.addClass("k-dirty-cell"); 
      cell.prepend("<span class='k-dirty'></span>"); 
     } 
    } 
} 

Nel codice sopra riportato this si riferisce a The widget instance which fired the event.. Questo è direttamente dai documenti UI di Kendo.

Speriamo che questo almeno punti nella giusta direzione. Se stai salvando la griglia, non dimenticare di svuotare l'array PendingChanges dopo aver ottenuto un salvataggio riuscito. Suggerisco di utilizzare l'evento RequestEnd per quello.