This is a migrated thread and some comments may be shown as answers.

Monitor dirty flag live

5 Answers 728 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
DevOps
Top achievements
Rank 1
DevOps asked on 07 Oct 2013, 07:16 PM
Hi!

We are trying to monitor the dirty state of a datasource (used by a grid in batch edit mode) to show and hide controls on the page live. Is this possible? We couldnt find any events that fire before the user clicks "save", and trying to bind to the dataSource has not worked for us.

Is it possible and could you propose a solution?

Thanks!
/Victor

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 09 Oct 2013, 06:33 AM
Hello Victor,

There is no built-in way to monitor the dirty state of the dataSource. However if you are using a Kendo UI Widget that is bounded to a dataSource, you might want to listen for its change event (which causes the change in the dirty flag also) and perform the custom logic that you need.
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Victor
Top achievements
Rank 1
answered on 10 Oct 2013, 07:12 AM
Thank you for that. After realizing that the dirty flag is not set on pending batch adds (dataSource.insert(data)), we ended up using the the dataBound event of the grid which triggers then as well (it also triggers on sorts etc, which suits our case well.

We then find dirty and added rows and mark them using (default(Guid) is our default value for the Id column)
$.each(dataSource.view(), function(index, item) {
if (item.dirty || item.Id == '@(default(Guid).ToString())') {
   grid
      .tbody
      .find("tr[data-uid='" + item.uid + "'] td:not(:empty)")
      .addClass("k-dirty-cell")
      .prepend("<span class='k-dirty' />");
})

Is this the preferred way of doing it? It seems really cumbersome for a task that seems very common (mark pending rows after add/sort/etc). We realize the model does not keep track of dirty state per cell, but adding a dirty flag for all editable cells for rows that has been updated (or marking the entire row as changed) seems like should be easier.

Also - in our current implementation all non-empty cells (even non-editable ones) are marked as dirty - is there any way to know which cells are editable using a class or something?


Thanks for your reply!
/Victor
0
Kiril Nikolov
Telerik team
answered on 14 Oct 2013, 06:42 AM
Hello Victor,

I am not exactly sure what you are trying to achieve with monitoring the dirty flags of your grid. Could you please elaborate on this a little bit more?

I would also suggest you to take a look at a code library that we have created that tackles a problem similar to yours:

http://www.kendoui.com/code-library/web/grid/preserve-the-dirty-indicator-in-incell-editing-and-client-operations.aspx
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Victor
Top achievements
Rank 1
answered on 14 Oct 2013, 07:29 AM
Hi Kiril and thanks for the reply.

We actually had a look at the code library sample you posted a while ago, but that solution is very invasive (uses custom clienttemplates for each cell in the grid for exampla as well as modifying the model which is not an optimal solution for us) so we decided to not go down that route.

What we however really want to do is to provide feedback to the user that there are pending changes to the grid that hasnt been saved. We settled on adhering tto the possibilities of the datasource dirty flag (per row dirty flag, not per cell) and used the code from the previous post to add a span with the "k-dirty" class to each non-empty cell in the grid to mark that row as dirty. We would also like to show/hide the   Save/Cancel changes buttons depending on if there are any changes to save, hence the original question.

Still we feel our solution is a bit of a hack - we need to track each sort/filter/change/... of the grid and do a custom parse of the grid to find rows containing pending changes and if the grid as a whole has any pending changes. What we would like is a better / built-in way to:

  1. Give a visual que to the user that a grid has pending changes (preferably using a MVVM to toggle text or visibility of some controls or change styling=
  2. Give a visual que to the user that a row has pending changes (tr.k-dirty or something along those lines), preferably one that is kept track of automatically on sort/filter/add
  3. Give a que that a row is "pending delete", rather than just removing it. A less desirable alternative would be to have a separate list databound to the grid showing "pending deletes". Right now deleted cells just vanish even before changes are saved. One alternative would be to send deletes to the server immediately and just batch adds and edits.
  4. Optimally a way to notify the user trying to leave the tab/site/... "You have changes pending on ....  Are you sure you want to leave the page without saving". This might be too much to ask, but there seems to be some usability-issues with batch editing in the current implementation.
  5. (In the best-case scenario also track per-cell changes, but we realize that data model does not support that, which honestly is quite fine for us)

Hopefully this clears up our goals. In general we think the grid with InCell batch editing is really smooth and quick to work with, but it gets quite tricky to convey to the user what is really going on after a few edits.

/Victor

0
Kiril Nikolov
Telerik team
answered on 14 Oct 2013, 11:14 AM
Hi Victor,

Thank you very much for the detailed information.

When using batch editing the red flags showing that certain cell was edited are automatically handled by the widget (added when edited and removed when saved). However when you switch pages for example, they are not preserved, so this is why we created the code library that I showed you earlier.

As for your pending delete and notification messages when leaving the current page - these features are not supported, and unfortunately we do not have code samples, that perform this functionality. I would like to encourage you to check the uservoice section, where you can submit those as feature requests, so they will be considered for a future release.

The track per cell changes option as you already found out is also not supported with the Kendo UI Grid at the moment.
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Data Source
Asked by
DevOps
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Victor
Top achievements
Rank 1
Share this question
or