I have a very large treeGrid (~2000 elements in one node). And it seems to be frozen when I click [+] to expand it. I want to change mouse cursor state to 'wait' once clicked, but then to 'default' once expanded. Assume I can put it in onRowClick or onOpen event but what is onComplete event where I can reset the cursor? Also is there a way/property to see if row is expanded or collapsed? I want to change its style then.
var layout = [
{
cells: [
[
{ field: "userid", name: "User Id" },
{
field: "childItems",
children: [
{ field: "unid", name: "unid" },
{ field: "username", name: "User Name" },
{ field: "budget", name: "Budget" }
],
aggregate: "sum"
}
]
]
}
]
var jsonStore = new dojo.data.ItemFileWriteStore({ url: <...............>});
var grid = new dojox.grid.TreeGrid(
{
structure: layout,
store: jsonStore,
query: { type: 'userid' },
queryOptions: { deep: true },
rowSelector: true,
openAtLevels: [false],
autoWidth: true,
autoHeight: true,
onRowClick: function (evt) {
var idx = evt.rowIndex,
item = this.getItem(idx);
// ??????
}
},
dojo.byId("treeGrid")
);
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();
},
});
});
below i have a kendoUI grid that fetches data from a server. The user can then edit two columns in the grid. I have a separate button that will post the data back to the server and i do not use the kendo grid's UPDATE transport for this. The problem i am having is that if i fetch the data from the grid, it does not reflect the user inputs. For example, to get to the underlying data for the grid i do the following:
products= $("#Grid").data("kendoGrid").dataSource.data()
But when i iterate over products and check the NewPrice or Comment property, it's always blank. Here is how the grid's data source is defined:
dataSource: {
transport: {
read: function (options) {
$.ajax({
url: "/Portal/API/GetProductPrices?id=" + pId,
dataType: "json",
success: function (data) {
localModel.userId = data.userId;
localModel.products = data.Products;
return options.success(model.products);
},
});
}
},
},
scrollable: false,
selectable: true,
schema: {
model: {
id: 'Id',
fields: {
Item: { type: 'string', editable: false },
Price: { type: 'number', editable: false },
NewPrice: { type: 'number', editable: true },
Comment: { type: 'string', editable: true, validation: { required: true } },
}
}
},
columns: [
{ field: "Price", title:"Price"},
{
field: "NewPrice", title: "<span class='editMode'>Proposed Value</span>", format: "{0:p}", attributes: { style: "text-align:center;" }, headerAttributes: { style: "text-align:center;" }, width: "50px",
template: "#=NewValueTemplate(data)#",
},
{ field: "Comment", title: "<span class='editMode viewWorkflowMode'>Notes</span>", width: "210px", template: "#=NotesTemplate(data)#" },
]
Any advice in resolving would be appreciated
You haven't specified the editing type that you are using.
Which type are you using: inline, batch or popup ?
Is only this the datasource ? I see no update function.
I suggest you take a look at the three demos.
Batch
Inline
Popup
The worst thing is that you haven't specified the value of the property editable.
By default it is false, that means the kendoGrid is not editable, even if you have specified editable: true over your model fields.
Shortcut to "Editable" configuration
update #2 :
As already said here
If the data source is bound to a remote service (via the transport option) the data method will return the service response.
So, when you use dataSource.data() method on your grid, if you haven't updated correctly your datasource, you should receive all "old" data. (I found strange that you get blank value over those properties, maybe a cache problem)
As I already said, your dataSource doens't provide no update function.
Here you are an example about the configuration of the update function in kendo dataSource, with request to remote service.
Suggest you to look on both examples:
Example - specify update as a string and Example - specify update as a function
Please implement the logic from the following example:
var _roleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, title: "Software Engineer" },
{ id: 2, title: "Quality Assurance Engineer" },
{ id: 3, title: "Team Lead" },
{ id: 4, title: "Manager" }
]
});
var _peopleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
{ id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
{ id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" },
{ id: 4, name: "Russell", roleId: 4, roleTitle: "Manager" }
]
});
var _grid = $("#grid").kendoGrid({
dataSource: _peopleDataSource,
columns: [
{
field: "name",
title: "Name"
},{
field: "roleTitle",
title: "Role",
editor: function(container, options) {
$("<input data-bind='value:roleTitle' />")
.attr("id", "ddl_roleTitle")
.appendTo(container)
.kendoDropDownList({
dataSource: _roleDataSource,
dataTextField: "title",
dataValueField: "title",
template: "<span data-id='${data.id}'>${data.title}</span>",
select: function(e) {
var id = e.item.find("span").attr("data-id");
var person =_grid.dataItem($(e.sender.element).closest("tr"));
person.roleId = id;
setTimeout(function() {
$("#log")
.prepend($("<div/>")
.text(
JSON.stringify(_grid.dataSource.data().toJSON())
).append("<br/><br/>")
);
});
}
});
}
}
],
editable: true
}).data("kendoGrid");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>
<br/>
<div id="log"></div>
You may view the demo here: http://jsfiddle.net/khNsE/175/
In this case, i needed to allow some rows based on data rules to enter 'edit mode' at the same time, so specifying inline, popup, etc was not an option. What i did instead was use a custom template function when defining the grid columns. the custom template function returned html, but in the html i used the data-bind attribute to bind to my model. Finally on the DataBound event of the grid, i bind my model to the rows.
field: "NewPrice", title: "New", format: "{0:p}", template: "#=newValueTemplate(d)#",
....
....
function newValueTemplate(d){
if (d.IsEditable)
return "<input type='number' data-bind='value:NewPrice' />"
else
return "<span />"
}
function gridDataBound(e){
var items = this.dataSource.view();
var gridRows = this.tbody.children();
for (var i = 0; i < items.length; i++)
kendo.bind(gridRows[i], items[i]);
}
I have simple treeview with hierarchical data in 3 level in deep.
I load all data on load page.
I have simple schema
model: {
hasChildren: function (item) {
return item.items && item.items.length > 0;
},
id: "id",
children: "items"
}
Default filter work only on first level, How can I change this logic?
Not sure what you mean but default filter does not work only on first level. Check the following example where I show anything that starts with "F". You will see that it shows the root and node in the first level. What it does not show are nodes bellow a node that does not meet the condition of starting with "F" but that's what I would have expected.
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [
{
text: "Full",
items: [
{
text: "Furniture",
items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor",
items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
]
}
],
filter: { field: "text", operator: "startswith", value: "F" }
});
$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="treeview-left"></div>
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?