I am trying to create a drag and drop between two tree list both of which is bound to a hierarchicaldatasource.
The drag and dropping is working but I can't get the drop into the right row in the datasource. It appends to the end and that's not what I want. I'm sure it's straightforward but I'm still a newbie with JS and Kendo.
Here is the code. This a prototype of my actual code so I can get the basics. Help is very much appreciated.
$( document ).ready(function() {
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
});
var newDataSource = new kendo.data.HierarchicalDataSource({
data: [{
text: "Level 1",
items: [{
text: "Level 1a"
}]
}]
});
var treeView2 = $("#treeView2").kendoTreeView({
dragAndDrop: true,
dataSource: newDataSource,
dataTextField: "text",
drop: function (e) {
if (e.valid) {
//Get what row we are on.
console.log("TV2 : Dropped", e.sourceNode);
var item = $("#treeView2").data('kendoTreeView').dataItem(e.sourceNode);
var data = treeView2.data();
data.kendoTreeView.dataSource.add({
text: item.text
});
}
e.preventDefault();
},
dragend: function(e) {
console.log("Drag end", e.sourceNode, e.dropPosition, e.destinationNode);
}
});
$("#treeView1").kendoTreeView({
dragAndDrop: true,
dataSource: inlineDefault,
dataTextField: "text",
drag: function (e) {
if (!$("#treeView1").data('kendoTreeView').dataItem(e.sourceNode).hasChildren) {
e.setStatusClass('k-add');
var selectedRow = treeview.findByText(e.sourceNode.textContent);
$("#treeView1").data("kendoTreeView").remove(selectedRow);
} else {
e.setStatusClass('k-denied');
}
},
drop: function (e) {
if (e.valid) {
var item = $("#treeView1").data('kendoTreeView').dataItem(e.sourceNode);
var data = treeView2.data();
var treeView2DS = $("#treeView2").data("kendoTreeView").dataSource;
var treeView1 = $("#treeView1").data("kendoTreeView");
//get the Data source
treeView2DS.fetch(function(){
var dataItem = treeView2DS.at(0);
console.log(dataItem.text); // displays "Jane Doe"
var dataItemWhichDoesNotExist = treeView2DS.at(3);
console.log(dataItemWhichDoesNotExist); // displays "undefined"
});
debugger;
data.kendoTreeView.dataSource.add({
text: item.text
});
var treeview = $("#treeView1").data("kendoTreeView");
var bar = treeview.findByText(item.text);
treeview.remove(bar);
e.setValid(true);
}
e.preventDefault();
},
});
});
Related
I have data and showing in kendo grid with group. Every group (Invoice No - VGBEL ) has a groupFooterTemplate but Quantity (LFIMG) column always 0,00. I need sum of Quantity every footer. Where is my mistake ? I searched on the internet but didnt find solution. I know there is a little mistake but I didnt find it.
This my JS code.
var kendoResource = getKendoResourceOptions();
options.columns[0].groupFooterTemplate = 'Sipariş Toplamı:';
options.columns[8].groupFooterTemplate = '#: data.LFIMG ? kendo.format("{0:C2}",data.LFIMG.sum): 0,00 #';
$("#grid").kendoGrid({
toolbar: [{ name: "excel", text: kendoResource.toolbar.messages.excel }],
excel: {
fileName: "DeliveryList.xlsx",
allPages: true,
filterable: true
},
groupable: kendoResource.groupable,
scrollable: true,
sortable: true,
pageable: kendoResource.pageable,
columns: options.columns
});
self.filterClick = function () {
showLoading();
mbisPost('Reports.Summary', "/api/TermoTeknikReportApi/DeliveryList", ko.toJS(self.filters), function (result) {
if (result && result.length > 0) {
self.showNoDataToDisplay(false);
var dataSource = new kendo.data.DataSource({
data: result,
pageSize: 100,
group: {
field: "VGBEL",
},
aggregate: [
{ field: "LFIMG", aggregate: "sum" }
]
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
// element for which the tooltip is shown
grid.thead.kendoTooltip({
filter: "th",
content: function (e) {
var target = e.target;
return $(target).text();
}
});
}
else {
self.showNoDataToDisplay(true);
}
}).error(function () { hideLoading(); }).done(function () { hideLoading(); });
}
Screenshot of webpage
I changed dataSource code. put the "aggregates" properties into the group
var dataSource = new kendo.data.DataSource({
data: result,
pageSize: 100,
group: {
field: "VGBEL",
aggregates: [ { field: "LFIMG", aggregate: "sum" },{ field: "LFIMG_M", aggregate: "sum" }] // this line
},
aggregate: [
{ field: "LFIMG", aggregate: "sum" },{ field: "LFIMG_M", aggregate: "sum" }
]
});
I want to add another node to the kendotreeview but that would be dynamic unlike the other two being static/Hardcoded.
Here is the code for it:
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
});
var treeview = $("#treeview-left").data("kendoTreeView");
treeview.add(new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: ResolveUrl("/Analysis/GetData/"),
dataType: "jsonp",
}
},
}));
$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});
How I can proceed with this?
There is a API example that shows how to add nodes to the TreeView.
Kendo TreeView API
I am using ajax api calls for getting data from a SQL database as below:
function getJsonData(type, period1, period2, id) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "GET",
url: createURL(type, period1, period2, id),
dataType: "json",
contentType: "application/json; chartset=utf-8"
}
},
});
return dataSource;
}
Using the above datasource, I am creating a Kendo chart as below:
function stepsChart(container, title, period1, period2) {
var dSource = getJsonData("Summary", period1, period2, "<% = id %>");
$(container).kendoChart({
dataSource: dSource,
seriesColors: ["orangered"],
chartArea: {
background: ""
},
title: {
text:title
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "column",
gap:5
},
series: [{
name: "steps",
field: "steps",
categoryField: "createddate",
aggregate: "sum"
}],
categoryAxis: {
type: "date",
baseUnit: getBaseUnit(period1, period2),
labels: {
rotation: -45,
dateFormats: {
days : getDateFormat(period1, period2),
weeks: getDateFormat(period1, period2),
years: getDateFormat(period1, period2)
},
step: getSteps(period1, period2)
},
majorGridLines: {
visible: false
}
},
valueAxis: {
majorGridLines: {
visible: true
},
labels: {
template: "#= kendo.format('{0}',value/1000)#K"
},
title: {
text: "Steps"
}
}
});
}
I also want to use the data from the above datasource for showing a summary of the information in a div below the chart. But if I add something like
var k = dSource.data;
there will not be any data in k. Is there a way to get the json data in the function which creates the chart?
DataSource.data is a function. I think your code should be:
var k = dSource.data();
That would also return an empty array if the data hasn't already been read, so you might need to do:
dSource.one("change", function () {
var k = dSource.data();
});
dSource.fetch();
because the .fetch() is async.
I am having trouble with the Hierarchical Data Source in conjunction with the TreeView and nesting. The goal is to show a treeview with root items like "employees", "profiles" and sub items being the acutal items. So every root item is using a different data source. This is not working, as the root nodes are not expanding while the data source seems to load perfectly.
Here's the code:
$(document).ready(function() {
var userProfileDataSource = new kendo.data.HierarchicalDataSource( {
transport: {
read: function (options) {
var items = [
{
text: "userprofile 1",
hasChildren: false
},
{
text: "userprofile 2",
hasChildren: false
}
];
options.success(items);
}
}
}),
categories = new kendo.data.HierarchicalDataSource({
transport: {
read: function(options) {
options.success([
{
text: "Employees",
hasChildren: false
},
{
text: "UserProfiles",
children: userProfileDataSource,
hasChildren: true
}
]);
}
}
});
$("#navigation-treeview").kendoTreeView( { dataSource: categories } );
});
JSFiddle
Any ideas?
I am doing a project using Kendo UI controls. In project left side "treeview" and right side "kendogrid" are placed.
Here my requirement is to filter the grid based on treeview nodes, and need to do multi-selection.
For example:eg:10249,10248 Based on this nodes filter the grid.
Here is my fiddle: http://jsfiddle.net/RHh67/7/
Here is tried code:
var tree= $("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1, text: "My Project", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "OrderID", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "10248" },
{ id: 4, text: "10249" },
{ id: 5, text: "10250" },
{ id: 6, text: "10251" },
{ id: 7, text: "10252" }
]
}]
}]
}).data("kendoTreeView");
tree.dataSource.bind("change", function (e) {
var ds = $("#grid").data("kendoGrid").dataSource;
ds.filter([
{"logic":"or",
"filters":[
{
"field":"OrderId",
"operator":"eq",
}
]}
]);
});
Can any one help me find where exactly I am wrong?
The handler for change on the tree should do:
Get selected checkboxes.
Build a filter condition for ticked checkboxes.
Apply filter to the DataSource.
Something like:
$("#treeview").on("change", function (e) {
var selected = $('#treeview :checked').closest('li');
var ds = grid.dataSource;
var filter = {
logic : "or",
filters: []
};
$.each(selected, function (idx, elem) {
var item = tree.dataItem(elem);
if (parseInt(item.text)) {
console.log("item.text", item.text);
filter.filters.push({
field : "OrderID",
operator: "eq",
value : parseInt(item.text)
});
}
});
console.log("filter", filter);
ds.filter(filter);
});
Running here