Flag "draggable" column as dirty after drag drop in grid

[Hunter]

I am successfully using the drag and drop feature in an editable grid. The grid is using batch update, so after a row is moved, I need to somehow notify the user they need to click the save option in my toolbar. 

Modifying any cell data automatically flags the cell as dirty, but drag drop does not. Ideally, I would like the red dirty flag to show up in the draggable cell, so not to be confused with a data change to that row. 

I know there is a rowReorder event I can leverage, however so far I'm struggling to manually flag the cell as dirty. I've tried getting the item by Uid and setting item.dirty = true, but this isn't adding the visual cue.

Here is my grid definition:

$('#grid').kendoGrid({
	dataSource: dataSource,
	columns: [
		{draggable: true, width: '45px' },
		{command: ['destroy'], title: 'Action', width: 100 },
		{field: 'Field', title: 'Field', width: 125 },
		{field: 'Required', title: 'Required', width: 90 },
		{field: 'Type', title: 'Type', width: 100 },
		{field: 'Length', title: 'Length', width: 100 },
		{field: 'Allow_Multiple', title: 'Allow Multiple', width: 125 },
		{field: 'Description', title: 'Description' },
		{field: 'Example', title: 'Example' },
		{field: 'Notes', title: 'Notes' },
	],
	toolbar: [
		'create',
		'save',
		'cancel',
		{
			template: '<a id="preNotesButton" class="k-button k-button-md k-button-rectangle k-rounded-md k-button-solid k-button-solid-base"><span class="glyphicon glyphicon-list-alt"></span> Edit notes</a>'
		},
		{
			template: '<a id="exitButton" class="k-button k-button-md k-button-rectangle k-rounded-md k-button-solid k-button-solid-base" style="float: right;"><span class="glyphicon glyphicon-arrow-left"></span> Exit</a>'
		}
	],
	editable: {
		'mode': 'incell',
		'confirmation': 'Are you sure you want to delete this item?',
		'createAt': 'bottom',
	},
	navigatable: true,
	reorderable: {
		rows: true
	},
	rowReorder: function(e) {
		// How can I flag the draggable cell as dirty?
		uid = e.row[0].dataset.uid;
		dataSource = $('#grid').data('kendoGrid').dataSource;
		item = dataSource.getByUid(uid);
		item.dirty = true;
		console.log(item);
	}
});

[Georgi Denchev]

Hello, Hunter,

Thank you for the provided code snippet and details.

You can append the dirty indicator to the draggable cell manually by using jQuery:

          rowReorder: function(e) {
            // How can I flag the draggable cell as dirty?
            var uid = e.row[0].dataset.uid,
                grid = this,
                dataSource = grid.dataSource,
                item = dataSource.getByUid(uid);
            
            item.dirty = true;
            setTimeout(function() {
              var row = grid.tbody.find("[data-uid='"+uid+"']");
              row.find(".k-drag-cell").addClass("k-dirty-cell").prepend("<span class='k-dirty'></span>");
            });
          }

Runnable Dojo:

https://dojo.telerik.com/@gdenchev/uCIXuNod 

Best Regards,
Georgi Denchev
Progress Telerik