Add / Remove Dirty Markers

0 Answers 424 Views
Grid
Jeff
Top achievements
Rank 1
Jeff asked on 13 Dec 2022, 03:43 PM

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:

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
Top achievements
Rank 1
commented on 13 Dec 2022, 04:06 PM

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
Telerik team
commented on 16 Dec 2022, 10:40 AM

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:

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

I hope this information helps.


Kind Regards,
Anton Mironov

 

 

Jeff
Top achievements
Rank 1
commented on 19 Dec 2022, 01:55 PM

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
Telerik team
commented on 22 Dec 2022, 08:52 AM

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:

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

Best Regards,
Anton Mironov

 

 

 

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Jeff
Top achievements
Rank 1
Share this question
or