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 all,

I have two issues adding the upload widget inside the grid.

1. I am trying to create a grid with an upload widget as one of its columns and make user be able to upload a file using drag&drop functionality.

The problem is that I could select file by the select button but drag&drop functionality is not working.

Below is my source data.

html:

<div id="grid1wrapper" class="row">
	<div class="col-md-12">
		<div id="grid1" kendo-grid="grid1" k-options="gridOptions" k-data-source="dataSource"></div>
	</div>
</div>

javascript:

$scope.gridOptions = {
	height: 500,
    	editable: true,
    	resizable: true,
    	navigatable: true,
    	columns: [
    		{
    			field: 'filename',
    			title: 'File Name'
    		},
    		{
    			title: 'File',
    			field: 'file',
    			attributes: { "class": 'text-center' },
    			editor: $scope.fileUploader,
    			width: 200 
    		},
    		{ 
    			command: "destroy", 
    			title: " ", 
    			width: 40 
    		}]
    };

$scope.fileUploader = function(container, options) {
		const name = options.field; 
		$('<input type="file"  name="'+ name +'"/>')
			.appendTo(container)
			.kendoUpload({
				multiple: false,
				localization: {
		               dropFilesHere: "DropFilesHere"
		        }
			});
	};

2. After upload file and click another field to fill out the data, the uploaded file disappears and I cannot save file with save button.

Any idea?

Thank you.

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?

Hello,

I'm my angular app I'm trying to achieve drag and drop from treeview to grid.

I have on the sidebar a list of items in a treeview and what to drag them to the grid. Even if this feature is not provided out-of-the-box, I could implement it if I had on the drop event, the id of the dragged item and the position where it is dropped.

Is this possible?

Thanks in advance

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 ,

            Attached is a version of JavaScript we use to bind dynamic data to kendo grid with dynamic columns and server side grouping enabled. (As seen in the logic, we use a group column to group and ungroup column to ungroup on a field.)

I am looking forward for implementing the below. Please provide a sample version of the modified js file and/or links to appropriate client side events that can support these in a logical order.

1. How to disable the default behavior of drag and drop on grouping , but still show the grouping grey bar above the grid? 

I tried the below but it is not working(can't find the equivalent draggable event for group)

https://docs.telerik.com/kendo-ui/controls/interactivity/draganddrop/how-to/disable-dragging-runtime

2. Provide a “clear groups” button in the grouping bar and upon clicking that button, clear all groups. (Please note that the “clear groups“ button to be shown, only when at least one group is enabled.

3. Show the Grouping  grey bar if you group by at least one column and hide the grey bar, if there are no columns to group by. Please confirm if the logic implemented in the attached file to hide and show the grouping grey bar is the correct approach.

Thanks,