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