Batch Editing Dirty Indicator

Progress® Telerik® UI for ASP.NET Core Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 17 Dec 2019 15:55 by Frank

Frank

Created on: 06 Nov 2019 14:13

Category: Grid

Type: Feature Request

Batch Editing Dirty Indicator

With batch editing there are no indicators that the grid is "dirty" after you hit delete, but before you hit the save changes button. [Note, when a user edits a cell, the top corner display a small red flag letting the end user know the cell is dirty and has not been saved/synced to the database yet.] This should be added to let the user know the delete action has not been performed and is in a "pending" state until the save button is pressed. This would be very helpful for UX purposes.

In the meantime, I just apply my own "dirty" class to the save button so end users know to press it before leaving the page if they would like to keep their changes.

6 comments

Frank

Posted on: 17 Dec 2019 15:55

Hi Alex,

Okay. Thanks for taking a look at it for me.

Frank

ADMIN

Alex Hajigeorgieva

Posted on: 17 Dec 2019 07:13

Hi, Frank,

Thank you for pointing me in the right direction.

I found the suggestion and it is when the Kendo UI Sortable widget is used with the grid to change the hint and placeHolder so they behave like this:

https://dojo.telerik.com/@bubblemaster/UsUyacAg/2

However, I am afraid that doing so is against quality code principles. The sortable widget is not coupled to the grid and providing a default hint and placeHolder when the Sortable is used in the context of the grid would lead to coupling.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.

Frank

Posted on: 10 Dec 2019 18:08

Hi Alex,

The recommendation was made in this post here: https://www.telerik.com/account/support-tickets/view-ticket/1440789

It was my comment on November 26, 2019. Look at "This is my code for the kendoSortable:" and below. I also included a picture which is how my grid looks like with drag and drop. I think something like my picture would be great for the default behavior of drag and drop and it is much more intuitive than the boilerplate code I found in the documentation. If you think it's a good idea, I can write up a separate feature request. I think I had found this example in a forum thread, but I cannot find it anymore, and I have looked through my browser history for the last two months, so I don't want to take credit for the code, all I did was make some customization to it.

Thanks,

Frank

ADMIN

Alex Hajigeorgieva

Posted on: 10 Dec 2019 11:55

Hi, Frank,

I had a look at the threads regarding the Kendo UI Sortable hint to see if I could create another feature request on your behalf but I did not find a feature request within the threads so I need your help to determine what it is. Alternatively, you may create it yourself and we can take a look at it and discuss it.

Currently, the Kendo UI Sortable widget acts as follows:

- placeHolder: clones the dragged element and sets visibility hidden so that it forms a visual gap

- hint: clones the dragged element

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Frank

Posted on: 05 Dec 2019 14:09

Thank you Alex. I have implemented something similar in my solution as well. I make the Save button change background color completely rather than add a flag in the corner. Same effect.

I have another suggestion for the grid using the sortable feature. It is explained with a screenshot in a help support thread. Would you like to see that, or should I make another feature request post?

Thanks,

Frank

ADMIN

Alex Hajigeorgieva

Posted on: 05 Dec 2019 12:53

Hello, Frank,

Thank you for the suggestion. I have discussed it with our UX team and they agree with your point of view.

While the item has the chance to gain popularity, you could achieve this behaviour with some JavaScript and CSS:

Add a Change() handler to the grid data source and check if there are any changes.
In case of changes, add the dirty flag to the button
In case the changes have been cancelled or synced, clear the dirty flag

                function onChange(e){
                  if (e.sender.hasChanges() && !grid.wrapper.find(".k-grid-toolbar .k-dirty").length){
                    grid.wrapper.find(".k-grid-save-changes").prepend("<span class='k-dirty'/>");
                  } else if (!e.sender.hasChanges() ){
                    grid.wrapper.find(".k-grid-toolbar .k-dirty").remove()
                  }
                }

Some CSS is also needed to position the span in the button:

 <style>
      .k-grid-save-changes > .k-dirty {
        left:8px;
        top:6px;
      }
    </style>

Here is a runnable example showing this suggested implementation in action:

https://dojo.telerik.com/@bubblemaster/OGIyIxAR

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.