I'm going to implement drag and drop behaviour with kendo grid which is populated using template. How can I achieve draggable rows and reordering with kendo grid.
.Orderable()
Works a treat. Maybe try ".Dragable()" I'm a bit unsure about that though.
Take a look at following my demo code and try it to implement.
var data = [
{ id: 1, text: "text 1", position: 0 },
{ id: 2, text: "text 2", position: 1 },
{ id: 3, text: "text 3", position: 2 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
position: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function(e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("position");
target.set("position", dest.get("position"));
dest.set("position", tmp);
dataSource.sort({ field: "position", dir: "asc" });
}
}
});
put .Dragable()
but make sure that you sit it in the right place, the ordering is required. Some times you may not get the expected result and that may happen due to not paying attention to the order.
Related
I've created a kendo grid, and need to insert kendo drop down into one of the columns. I need to get the data for the drop down from another data source. It kind of works, however, the problem is when I have chosen a value from the drop down and the drop down closes, instead of displaying that value it goes into editable mode. Only when I click outside of the dropdown, it displays the correct value. Here is a gif of the issue:
https://media2.giphy.com/media/KyMGB7FmFQMVTChFA7/giphy.gif
How could this issue be solved?
I have successfully created a kendo grid with a drop down list already. The only difference seems to be that there only one data source is used, but here two are used. Here is some of the code for the drop down:
title: "Type",
field: "productType.name", //this property is from the data source used for grid
template: "<kendo-drop-down-list k-value=\"dataItem.productType.id\"
k-options=\"productTypeOptions\" ng-change=\"productTypeChanged(dataItem, 'productType')\"
ng-model=\"dataItem.productType.id\"></kendo-drop-down-list>"
}...];
$scope.productTypes = {
data: [{ name: "Value 1", id: "1" }, { name: "Value 2", id: "2" }]
}
$scope.productTypeDataSource = new kendo.data.DataSource({
schema: {
data: "data",
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
},
data: $scope.productTypes,
serverPaging: true,
serverSorting: true,
serverFiltering: true
});
$scope.productTypeOptions = {
dataSource: $scope.productTypeDataSource,
dataTextField: "name",
dataValueField: "id"
};
$scope.productTChanged = function (dataItem, field, productArray, dataSource) {
var index = dataSource.indexOf(dataItem);
var c = productArray.data[index];
if (c == null) return;
c[field] = dataItem[field];
return c;
};
$scope.productTypeChanged = function (dataItem, field) {
$scope.productTChanged(dataItem, field, $scope.products, $scope.productDataSource);
};```
I'm trying to bind an array of id-value pairs to a kendo grid popup editor.
Got everything to work for creating a new record. Popup editor loads the custom editor and successfully submits the data to the controller.
The problem is when I try to edit records. The records displays properly in the row, but when I try to edit it, the multiselect does not hold the values.
Grid Markup
$("#ProjectSites-SubContract-grid").kendoGrid({
dataSource: {
type: "json",
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
DateOfContract: { type: 'date', editable: true },
DateOfCompletion: { type: 'date', editable: true },
AmountOfContract: { type: 'number', editable: true },
Contractor: { defaultValue: { id: "", name: "" } }
}
}
},
},
columns: [
{
field: "ScopeOfWork",
title: "Scope of Work",
template: "#=parseScopeOfWork(ScopeOfWork)#",
editor: scopeOfWorkEditor
},
]
});
});
Scope of Work editor
function scopeOfWorkEditor(container, options) {
$('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>')
.appendTo(container)
.kendoMultiSelect({
dataSource: {
data: [
#foreach (var scopeOfWork in Model.AvailableScopeOfWork)
{
<text>{ id : "#scopeOfWork.Value", name : "#scopeOfWork.Text" },</text>
},
]
}
});
parseScopeOfWork -
this method guys iterates through the object list and concats the name.
function parseScopeOfWork(scopeOfWork) {
var result = "";
for (var i = 0; i < scopeOfWork.length; i++) {
result += scopeOfWork[i].Name;
if (i < scopeOfWork.length - 1)
{
result += ", <br/>";
}
}
return result;
}
Here's a screenshot:
You're binding the SpaceOfWork to the new widget, but how that widget knows your Model ? I mean, just using data-bind doens't binds the model to the widget, it can't figure that by itself. I have two suggestions:
Set the value in the widget's initialization:
.kendoMultiSelect({
value: options.model.ScopeOfWork
Demo
Bind the model to the widget for good:
let $multiSelect = $('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>');
kendo.bind($multiSelect, options.model);
$multiSelect
.appendTo(container)
.kendoMultiSelect({ ...
Demo
Note: Edit the category cell in both demos to see the changes.
Actually my requirement is want to create custom dropdownlist in the column header of kendo grid. I don't down like nrwant to use filtler column. I just want to add normal dropdown in header. Please provide any example like that so that i can move forward on my task.
Thanks in advance...
In your column definition add a property like this:
headerTemplate: '<input id="dropdown" />'
Then after your grid initialization do:
$("#dropdown").kendoDropDownList({...init parameters...});
UPDATE: go to dojo.telerik.com and paste in the following code:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{
field: "ProductName",
title: "Product Name",
headerTemplate: '<input id="dropdown" />'
},
{ field: "UnitPrice", title: "Price", template: 'Price: #: kendo.format("{0:c}", UnitPrice)#' }
],
pageable: true,
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
},
excelExport: function(e) {
var sheet = e.workbook.sheets[0];
var template = kendo.template(this.columns[1].template);
for (var i = 1; i < sheet.rows.length; i++) {
var row = sheet.rows[i];
var dataItem = {
UnitPrice: row.cells[1].value
};
row.cells[1].value = template(dataItem);
}
}
});
$("#dropdown").kendoDropDownList({
optionLabel: 'Choose a value...',
dataTextField: 'description',
dataValueField: 'id',
dataSource:{
data: [{id: 1, description: 'One'},{id: 2, description: 'Two'}]
},
change: function(e){
//do whatever you need here, for example:
var theGrid = $("#grid").getKendoGrid();
var theData = theGrid.dataSource.data();
$(theData).each(function(index,item){
item.ProductName = e.sender.text();
});
theGrid.dataSource.data(theData);
}
});
I'm fairly new to kendo UI but some how I managed to render a kendo grid with drag and drop feature Where users can drag and place rows.In my case I have three columns id,name,sequence
So I need to keep sequence column data unchanged while id and name data changed when a drag and drop of a row.
Ex id=1 Name=David Sequnce=0
id=2 Name=Mark Sequnce=1
Now I'm going to drag row 1 to 2 while data of the sequence column remain unchanged new data like this,
Ex id=2 Name=Mark Sequnce=0
id=1 Name=David Sequnce=1
In my case every row is getting changed. I need to implement this solution.
Can somebody help me out on this.
Cheers,
Chinthaka
Try this,
Script
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ id: 1, text: "David ", Sequnce: 0 },
{ id: 2, text: "Mark ", Sequnce: 1 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
Sequnce: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "Sequnce"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function (e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id"));
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("Sequnce");
target.set("Sequnce", dest.get("Sequnce"));
dest.set("Sequnce", tmp);
dataSource.sort({ field: "Sequnce", dir: "asc" });
}
}
});
});
</script>
View
<div id="grid">
</div>
Demo: http://jsfiddle.net/nmB69/710/
We are using kendo drag and drop functionality inside the kendo grid table.
1) If the user provide data on any editable fields and without saving the data, if user click/jump to other field for edit. User is loosing his updated data.
2) If the user update any records, we are refresh/regenerate table again Or if we refresh/regenerate outside from the function Or we added new records using outside the function. After that user are not able to drop row to replace with other.
Jsfiddel file
var data = [
{ Id: 1, Name: "data 1", Position: 1 },
{ Id: 2, Name: "data 2", Position: 2 },
{ Id: 3, Name: "data 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
Id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr:not(.k-grid-edit-row)",
group: "gridGroup",
cursorOffset: { top: 10, left: 10 },
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.getByUid(dest.parent().data("uid"));
//not on same item
if (target.get("Id") !== dest.get("Id")) {
//reorder the items
var tmp = target.get("Position");
target.set("Position", dest.get("Position"));
dest.set("Position", tmp);
dataSource.sort({ field: "Position", dir: "asc" });
}
}
});
I've run into similar issue some time ago. And also I found the following thread on their forum - http://www.kendoui.com/forums/ui/grid/drag-and-drop-reordering.aspx#boD2qq6aG2OF1P8AAFTdxQ
So if you add one more additional column to the table and put an image there or some other element, then you'll be able to use that element as draggable target like:
grid.table.kendoDraggable({
filter: "tbody > .draggableTarget".....
The table is completely recreated in the DOM in the case when you refresh it, so you have to resubscribe your drag and drop functionality.
I was having similar issues using the newer kendoSortable with an editable grid to achieve drag/drop row sorting.
This fiddle http://jsfiddle.net/UsCFK/273/ works.
It uses a column with a drag handle as mentioned above to prevent cell edits being lost - the other cells are ignored in the setup:
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: $.noop,
cursor: "move",
ignore: "TD, input",
placeholder: function (element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: '#grid tbody',
change: onGridRowChange
});
It also updates the position field in the datasource, rather than removing, then re-inserting the row as in some other examples - as this will cause a delete request request to the server for each row that is moved - which can cause issues when clicking the batch-editing cancel button. The position field is only shown for demonstration purposes - it should not be exposed for manual editing.