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

1 Answer 32 Views
Drag and Drop Grid
Hunter
Top achievements
Rank 1
Hunter asked on 27 Mar 2022, 07:40 PM

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);
	}
});

1 Answer, 1 is accepted

Sort by
1
Accepted
Georgi Denchev
Telerik team
answered on 30 Mar 2022, 12:59 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Drag and Drop Grid
Asked by
Hunter
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or