Add / Remove Dirty Markers

[Jeff]

Hi,

I have a razor page that implements a grid. I want to use javascript to set / unset the dirty markers for certain fields in the grid when there is an error.

I have searched this forum and google'd the problem, but I cannot get anything to work.

I tried :

• setting .dirty to true
• addClass("k-dirty-cell")
• grid.refresh() after setting the dirty markers

Tried these suggestions:

• How to see dirty flag on the cell after change cell's value programmatically? in UI for ASP.NET MVC | Telerik Forums
• reviewed examples from github

Can I please get a simple example of when the on error fires the js function runs and marks / unmarks a cell dirty and the grid reflects those changes?

Here is a simplified example from a different post:

        function onError(e) {
            // got any error messages
            if (e.errors) {
                e.preventDefault();
                var grid = $("#grid").data("kendoGrid");
                var data = grid.dataSource.data();

                for (var i = 0; i < data.length; i++) {

                    data[i].dirty = true;
                }
                grid.refresh();
            }
        }

Thank you for your help.

[Jeff]

Tried this and it does not work

        function onError(e) {
            // got any error messages  
            if (e.errors) {
                // iterate through the grid
                //var grid = this;
                var grid = $("#grid").data("kendoGrid");

                var $gridData = grid.dataSource.data();

                for (var i = 0; i < $gridData.length; i++) {

                    var row = grid.tbody.find("tr[data-uid='" + $gridData[i].uid + "']");
                    var cell = row.find("td:eq(" + $gridData[i].ColumnIndex + ")");

                    cell.addClass("k-dirty-cell");
                    $gridData[i].dirty = true;
                    var foo = "";
                }

                grid.refresh();
            }
        }

[Anton Mironov]

Hi Jeff,

Thank you for the details provided.

Could you please share further information on when an error in the Grid should appear? 

Furthermore, the refreshing of the Grid will override the dirty flags.

I guess we need to add some validations for the cells in columns. If this is the case, I would recommend trying the implementation from the following demo:

• https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation

For further information about the Kendo Validator, observe the following article:

• https://docs.telerik.com/kendo-ui/controls/editors/validator/overview

I hope this information helps.

Kind Regards,
Anton Mironov

 

 

[Jeff]

Hi Anton,

Thank you for the suggestions. However, they do not fit my use case.

Here is my use case:

1. User changes 3 rows of data
2. User clicks save
3. The application send the row data to the DB
4. The DB saves row 1 and 2
5. The DB returns row 3 because of a validation error

The UI needs to:

1. Clear the dirty markers from rows 1 and 2
2. Set the dirty marker on row 3

I hope this helps clarify what I am trying to accomplish.

[Anton Mironov]

Hi Jeff,

Thank you for the additional details provided.

As this is a custom scenario, feel free to implement the BackEnd part. The Telerik UI Grid is responsible for representing the data.

So when you have the needed row, try the following in order to add a dirty flag to every "td" element in the row:

            var tdsFifthRow = $(fifthRow).find("td");
            $(tdsFifthRow).each(function(){
            			$(this).addClass("k-dirty-cell");
              		$(this).append("<span class='k-dirty'></span>");
            })

Here is a dojo example of the implementation where I am adding dirty flags to the fifth row of the Grid:

• https://dojo.telerik.com/@anton.mironov/InoCaJUS

Give a try to the approach above and let me know if further assistance is needed.

Best Regards,
Anton Mironov