manuell schmutzige Zellenmarkierung beim Paging im Kendo-Gitter beibehalten

Question

Ich habe ein editierbares Kendo-Gitter, in dem ich eine Zelle bearbeiten kann und das Gitter fügt der oberen linken Ecke der Zelle die rote Markierung hinzu.

Ich gehe auf eine andere Seite und komme dann zurück zu der Seite, auf der die Bearbeitung stattfand und die rote Markierung ist weg, aber der neu hinzugefügte Wert in der Zelle bleibt bestehen. Ich sah eine Antwort darauf auf der Kendo-Website, wo es empfohlen wurde: "Um die" schmutzige Flagge "jedes Mal zu zeigen, wenn das Gitter zurückprallt, muss es durch alle Modelle iterieren, alle Felder überprüfen, wenn sie geändert und sichtbar sind die Gitterzellen. "

Ich gehe davon aus, dass dies auf dem DataBound() Ereignis des Gitters getan werden muss (scheint zu schießen, wenn ich Seiten umschalte), wo ich manuell die k-dirty-cell Klasse auf die Zelle anwenden werde, aber ich kann Finde heraus, wie das im Code funktioniert. Alle Gedanken werden sehr geschätzt.

$(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

Das Databound-Ereignis ist ein guter Ort, um diese erneut zu bewerben, aber ich beachten Sie, dass, wenn sie durch das Netz der dataitems Looping, eine schmutzige Flagge gibt für jede Zeile, aber nicht jedes Feld.

Es ist sehr gut möglich, dass ich keine Möglichkeit kenne, nur die ausstehenden Änderungen in einem Grid zu referenzieren, aber ich habe ein kleines System geschrieben, um solche Änderungen auf einer detaillierteren Ebene zu verfolgen.

In meinem System speichere ich die ausstehenden Änderungen des Gitters in einer globalen Variablen namens PendingChanges.

Ich gebe dann zwei Ereignisse an. Die erste ist die change event in der DataSource des Grids. Dieser Code speichert die Informationen, die Sie aus der Änderung müssen, die gerade stattgefunden:

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

Dann benutze ich die dataBound event zu überprüfen, was anstehenden Änderungen sind um und legen Sie die entsprechenden Zellen das rote Dreieck anzuzeigen:

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

In dem obigen Code this bezieht sich auf The widget instance which fired the event.. Das kommt direkt von den Kendo UI-Dokumenten.

Hoffentlich weist Sie das zumindest in die richtige Richtung. Wenn Sie das Raster speichern, vergessen Sie nicht, das PendingChanges-Array zu löschen, sobald Sie erfolgreich gespeichert haben. Ich schlage vor, das Event RequestEnd dafür zu verwenden.