We have an existing Kendo Grid inside a Bootstrap Collapse. We are attempted to enable the Drag & Drop functionality on it. If the Collapse starts out visible, it works as expected; if the Collapse starts out collapsed, drag-and-drop does not work. You can drag, but you can't drop.

I attempted to swap out the Bootstrap Collapse for a Kendo ExpansionPanel, but it suffered the same issues: it works if pre-expanded, and not if pre-collapsed.

Dojo for Collapse

Dojo for ExpansionPanel

I don't see this noted in the known limitations. Is there anything we're doing incorrectly, or is this a bug?

Good day, 

When I'm dragging a row, if I hover over the insert indicator on the left of the grid it causes the tooltip (and sometimes the whole row) to flicker/flash, Ive noticed this issue exists on the tutorial page too, is there a work around for this?

The tutorial I used: https://demos.telerik.com/kendo-ui/grid/drag-drop

Kind regards

Chris

Hi,

Reordering rows using the draggable column might seem a bit buggy, as you have to move the cursor to the right before dropping to reorder the rows successfully, as can be seen in the following example https://dojo.telerik.com/ipOyacoH . It would be nice if dragging and dropping directly above and below (inside the draggable column) would work without moving the cursor to the right, but I can't seem to make this work. Could somebody please help me with this?

Thanks in advance!

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.

$('#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);
	}
});

Hello,

I'm new here and I'm trying to figure out how can I drag and drop from a Grid to a TreeView

I found this example http://dojo.telerik.com/eWIgu/2

It's something like this what I want to do, but in the example I can't put an element in a certain node of the TreeView, I just add elements to the data source. So how can I do that? I need your help

PS. I also want to do this with a listbox instead of a grid. That's possible?

Currently Kendo grids, like this one, behave like tables in MS Word when selected text is dragged/dropped.  I would like my Kendo grid to not have this behavior and instead act more like Excel, where clicking and moving the mouse while over selected text will change the selection. 

Is there an option for this in the Kendo jQuery Grid?

Hi,

I need to select multiple rows in a kendo grid and  move them inside the grid to reorder them.

I'm using kendoSortable

grid.table.kendoSortable({
        filter: ">tbody >tr",
        hint: function (element) {
          //customize the hintvar table = $(
              '<table style="width: 600px;" class="k-grid k-widget"></table>'
            ),
          hint;
          table.append(grid.select().clone()); //append the dragged element
          table.css("opacity", 0.7);

          return table; //return the hint element
        },
        cursor: "move",
        placeholder: function (element) {
          return $('<tr colspan="4" class="placeholder"><td colspan ="' + grid.columns.length + '">Drop here</td></tr>');
        },
        change: function (e) {
          console.log(grid)
          var selectedId = [];
          grid.select().each(function(){
          selectedId.push(this.getElementsByClassName('idCompOperation')[0].innerText);
            
            });
           // do some stuff
        }
      });
 
          

In the change function I can get the multiple elements selected and change the order of them in the datasource but visually only the first column selected is moved in the table iven if I refresh the grid

Select 2 rows:

Drag to the beginning of the table

Just the first of the 2 rows is moved the other remains at the bottom

How can I do?

Thanks Mik