Paging and batch editing

8 posts, 0 answers
  1. Steve
    Steve avatar
    8 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2012 Link to this post

    I have a grid in batch edit mode. I am using server-side paging. It seems like if I make some edits, then change the page, the changed cells are lost. I am already attaching to the save() event and capturing each cells' change to do some custom validation, so I don't lose any *data*, just the visual cue that the cell was edited. 

    My current idea for a workaround would be to attach to the datasource's change() event, see if any of the loaded rows were in my unsubmitted changes, and re-mark the cells edited. Is there a more efficient way to accomplish this with the framework?
  2. Steve
    Steve avatar
    8 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2012 Link to this post

    My current solution was to define a function on the dataBound() event:

    dataBound: function (e) {
    if (isGridEditatble) {
    var dataLength = this._data.length;

    for (var i = 0; i < dataLength; i++) {
    var item = this._data[i];
    var editedLength = itemsToValidate.length;

    for (var j = 0; j < editedLength; j++) {
    var editedItem = itemsToValidate[j];

    if (item.Id == editedItem.Id && item.Value != editedItem.Value) {
    item.Value = editedItem.Value;
    item.OriginalValue = editedItem.OriginalValue;
    item.dirty = true;
    myGrid.refresh();
    }
    }
    }
    }
    }

    This sets the data correctly, but visually isn't recreating the red icon that indicated the cell was edited. Is there an easy way to get that from my current approach, or will I need to hunt down the cell itself and apply the CSS?
  3. Steve
    Steve avatar
    8 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    Based on this forum post from january, I was able to improve the code:

    dataBound: function (e) {
    if (isGridEditatble) { 
    var editedLength = editedItems.length;

    for (var i = 0; i < editedLength; i++) {
    var editedItem = editedItems[i];
    var model = myGrid.dataSource.get(editedItem.Id);

    if (typeof model != 'undefined') {
    if (model.Value != editedItem.Value) {
    model.set('Value', editedItem.Value);
    }
    }
    }
    }
    }

    However, it still isn't at 100% - the value is updating in the cell, but the TD is not being updated with the class "k-dirty-cell" the way it does when you edit it through the UI. 

    Does anyone have a suggestion besides finding the TD and manually setting the class?
  4. Ori
    Ori avatar
    23 posts
    Member since:
    Feb 2015

    Posted 28 Jan 2016 Link to this post

    Hello,

    any update on this?

  5. Ori
    Ori avatar
    23 posts
    Member since:
    Feb 2015

    Posted 29 Jan 2016 in reply to Ori Link to this post

    I tried the approach above. I'm keeping all changes made in grid,
    pushUpdate-ing them back to dataSource once the page where they were
    made is active, there's no problem. The problem occurs when I want to
    batch-send them to server after user clicks Save button in toolbar.

    Because "saveChanges" event happens later than "requestStart" event,
    changes done on not-active pages are not attached to dataSource data before
    the request starts and are send in another batch which is unpleasant. I did some
    nasty "hacks" to make things going, but it's not really a nice solution.

    I tried to block the first request using preventDefault() method, but without success.

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 03 Feb 2016 Link to this post

    Hello Ori,

     

    As far as I understand the main idea is to prevent going to another page if there are some not synced changes. 

     

    The requestStart event of the Kendo UI DataSource is preventable as mentioned in the article. Additionally in order to check whether there are any not synced items in the Kendo UI DataSource you can use the hasChanges method. So if there are some not synced data items - you can prevent the request and perform saving/sync before navigating to another page. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Ori
    Ori avatar
    23 posts
    Member since:
    Feb 2015

    Posted 04 Feb 2016 in reply to Boyan Dimitrov Link to this post

    Hello Boyan,

     that is very true and correct, but there was another problem with this approach: all filters, paging, page sizing etc. applied that caused requestStart event triggering stayed selected even though datasource was prevented from change. At first I tried to revert filtering etc. settings from a "cache" I made for this purpose, but there's so many various settings that it I thought automatic saving will be easier... Man, I was wrong and foolish :)

  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 09 Feb 2016 Link to this post

    Hello Ori,

     

    I am afraid that requestStart event is fired after the current state (filter, sorting expression and etc) is already applied and even if the event is prevented, it could not be revert to the previous state. 

     

    This is a limitation and there is no easy way to overcome it. My suggestion in this case is either           1. Enable the autoSync option of the Kendo UI DataSource in order to sync any changed data with the server when the data item is modified. 

          2. Use inline or popup edit mode, where changes are synced with the server when update button is clicked. 

     

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top