Telerik Forums
Kendo UI for jQuery Forum
1 answer
187 views

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
Telerik team
 answered on 30 Mar 2022
0 answers
214 views

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: "&nbsp;", 
    			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.

 

 

Daeyong
Top achievements
Rank 1
 asked on 23 Feb 2022
0 answers
60 views
Hello , I am getting issue in tree menu drag and drop. how to stop it. it's coming is randomly kindly help.
Sanjay
Top achievements
Rank 1
Iron
 updated question on 14 Feb 2022
0 answers
79 views

I was able to reproduce the functionality on the following demo:

https://demos.telerik.com/kendo-ui/cards/drag-and-drop

I would like to be able to apply this to a dashboard screen where the user is able to move the widgets/cards around.  What can I use to save as a preference for the order of the cards/widgets?  Is there an attribute or parameter that tells the Kendo List where it should be in the list?  That way the next time they come to the page the cards will be in the order they last saved them in.

Dominic
Top achievements
Rank 1
Iron
 asked on 10 Feb 2022
2 answers
399 views

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?

  
Neli
Telerik team
 answered on 15 Dec 2021
1 answer
77 views
The Table wizard popup opened while inserting table is by-default draggable, can we stop the popup from being draggable.
Martin
Telerik team
 answered on 11 Nov 2021
1 answer
101 views

Could you please help me to change the default design of kendo file upload.

I want to display my custom design on the web page for users. Also , I want to give both functionalities like below

 

---------------------------------------------------------

 

Drag and Drop File or Browse File

 

----------------------------------------------------------

Martin
Telerik team
 answered on 27 Oct 2021
0 answers
73 views

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

Luis
Top achievements
Rank 1
 asked on 18 Oct 2021
1 answer
953 views

I have an element need to inited both Draggable and Toolips, and I want to prevent tooltips show event when dragend, I use e.preventdefault() , but it don't work.

The version I'm using is 2017.3.913

For some reason, I can't update to the latest.

My  html

<div class="edit-tooltips" style="left: ${xPx};top: ${yPx}">
        <div class="sensor-point new-point" > content
          ${ index }
        </div>
</div>

My js

$(".edit-tooltips").kendoTooltip({
   autoHide:false,
   showOn: "click"
  .....
})


$(".sensor-point").kendoDraggable({
        hint: (element)=>{
             return ....
        },
        dragstart: (e:any)=>{

        },
        dragend: (e:any)=> {
           ....
          e.preventDefault()  // this dot'n work, tooltips show event will still be triggered
        }
      })

Veselin Tsvetanov
Telerik team
 answered on 15 Oct 2021
1 answer
130 views

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?

Georgi Denchev
Telerik team
 answered on 02 Aug 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?