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
Related
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
I want to bind the Local and Remote Datas to the same Kendo UI Control.
Here I am using Kendo treeview.
Here First 2 nodes are Hardcoded(Local data) and the third needs to from Database(Remote Data).So now how to handle this.
$("#AftermarketTreeView").kendoTreeView({
dataTextField: ["text", "text", "MC_ANALYSIS_NAME"],
dataSource: {
data: [
{
text: "Initiate",
items: [
{ text: "Parts Selection", haschildren: false },
{ text: "Assumptions", haschildren: false },
{ text: "Team", haschildren: false },
]
},
{
text: "Analyze",
items: [
{ text: "Part Attributes", haschildren: false },
{ text: "Aftermarket Evaluation", haschildren: false }
]
},
{
text: "Monto Carlo",
items: [
{ text: "Monto Carlo", haschildren: true }
]
}
],
schema: {
model: {
hasChildren: "items",
children: {
schema: {
data: "items",
model: {
hasChildren: "haschildren",
children: {
schema: {
// override the schema.data setting from the parent
data: function (response) {
return response;
}
},
transport: {
read: {
url: ResolveUrl("/CreateMaintainAnalysis/GetMontoCarloData/"),
dataType: "jsonp",
data:onDataSendAnalysisID,
}
},
}
}
}
}
}
}
}
});
So How to bind it using Kendo TreeView ?
You can't have both a local and remote data source on the same element. The best option would be a remote data source only and have it return all of the options you're looking for.
I want to populate the Kendo TreeView in which 2 nodes are local dataSource and the last node should be remote Datasource
Here is my code:
$("#AftermarketTreeView").kendoTreeView({
dataTextField: ["text", "text", "MC_ANALYSIS_NAME"],
dataSource: {
data: [
{
text: "Initiate",
items: [
{ text: "Parts Selection", haschildren: false },
{ text: "Assumptions", haschildren: false },
{ text: "Team", haschildren: false },
]
},
{
text: "Analyze",
items: [
{ text: "Part Attributes", haschildren: false },
{ text: "Aftermarket Evaluation", haschildren: false }
]
},
{
text: "Monto Carlo",
items: [
{ text: "Monto Carlo", haschildren: true }
]
}
],
schema: {
model: {
hasChildren: "items",
children: {
schema: {
data: "items",
model: {
hasChildren: "haschildren",
children: {
schema: {
// override the schema.data setting from the parent
data: function (response) {
return response;
}
},
transport: {
read: {
url: ResolveUrl("/CreateMaintainAnalysis/GetMontoCarloData/"),
dataType: "jsonp",
data:onDataSendAnalysisID,
}
},
}
}
}
}
}
}
}
});
Using above code I am getting structure as below
Where Initiate and Analyze are Local DataSource and Monto Carlo is Remote DataSource but I don't want the node again to be Monto Carlo under it that should be the direct remote DataSource from Database
so help me in this to solve
Thanks in Advance!!!
you can change your read property to a function:
read: function(options) { /* here you can do the ajax call for the remote dataSource and then you can merge the local dataSource with the remote dataSource, you can create a new array to accomplish this. */ }
You can see a example in here.
The idea is to use options.success(result); the result is the merged dataSource (remote and local).
I have been struggling with this issue and hit a roadblock. I have a kendo grid that has a dropdownlist.
Problem
When i edit a record by selecting a value in the DropdownList, the
field is not updated.
When i select the Add Command from the toolbar, a different
template tries to render and raises the error "Uncaught ReferenceError:
ParentMenu is not defined" in Chrome debugs. So nothing happens consequently.
When i comment out "values: parentRef" from the kendogrid columns definition all commands[Add,Edit] display properly
I have demonstrated the error i am experiencing here http://jsfiddle.net/BlowMan/5tNQy/
JS Code
$(function () {
var mbModel = kendo.data.Model.define({
id: "MenuId",
fields: {
"MenuId": {
type: "number"
},
"DisplayText": {
type: "string"
},
"MenuOrder": {
type: "number"
},
"MenuStatus": {
type: "boolean"
},
"HasKids": {
type: "boolean"
},
"ParentMenu": {
type: "number",
defaultValue: 1
}
}
});
var mbDataSource = new kendo.data.DataSource({
data: [{
"MenuId": 1,
"DisplayText": "Home",
"MenuOrder": 0,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}, {
"MenuId": 2,
"DisplayText": "Finance",
"MenuOrder": 1,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}]
});
var parentRef = [{
"value": 1,
"text": "Finance"
}, {
"value": 2,
"text": "Corp. Services"
}];
$("#menuBuilder1").kendoGrid({
columns: [{
field: "MenuId",
title: "Menu",
editable: true
}, {
field: "DisplayText",
title: "Name",
editable: true
}, {
field: "MenuOrder",
title: "Order",
editable: true
}, {
field: "MenuStatus",
title: "MenuStatus",
editable: true
}, {
field: "HasKids",
title: "Depends",
editable: true
}, {
field: "ParentMenu",
title: "ParentMenu",
values: parentRef
}, {
title: "Action",
command: ["edit"]
}],
toolbar: ["create"],
editable: "popup",
schema: {
model: mbModel
}
});
var mbObject = new kendo.data.ObservableObject({
data: mbDataSource,
//parentRef:[]
});
kendo.bind($("#menuBuilder1"), mbObject);
mbDataSource.bind("change", function (e) {
});
var grid = $("#menuBuilder1").data("kendoGrid");
grid.bind("save", function (e) {
var that = this;
that.refresh();
});
grid.bind("edit", function (e) {
});
$.ajax({
url: "/MenuBuilder/GetMenuWithKids",
dataType: "json",
type: "GET",
success: function (ret) {
mbObject.set("parentRef", ret);
}
});
});
HTML Code
<div id="menuBuilder1" data-bind="source:data"></div>
Am in a tight corner and any help will be much appreciated.
MustafaP solved Problem 1.
For problem 2,
I realised that i had placed the schema definition at the wrong place within the kendoGrid. I placed it at the bottom after the toolbar.
It should rather be placed just after the kendoGrid brackets
$("#menuBuilder1").kendoGrid({
schema: {
model: mbModel
},
columns: [{
field: "MenuId",
title: "Menu",
editable: true
I wanted to replace dojox.grid.DataGrid with new Dgrid but I have trouble with it. I'm using Dojo 1.9.1 and here is excerpts of my code:
HTML:
<script type="text/javascript"><!--
require({
baseUrl: "/res/js/",
packages: [
{ name: "dojo", location: "dojo/dojo" },
{ name: "dijit", location: "dojo/dijit" },
{ name: "dojox", location: "dojo/dojox" },
{ name: "put-selector", location: "put-selector" },
{ name: "xstyle", location: "xstyle" },
{ name: "dgrid", location: "dgrid" },
{ name: "allwins", location: "allwins" }
]
},[
"allwins/Admin",
"dojo/parser",
"dojo/domReady!"
],function(admin, Parser){
admin.initUi(/*...*/);
});
</script>
<!-- ... -->
<div data-dojo-id="invoicesTab2"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="region: 'center',
title: 'Faktury 2'">
<div id=invoicesGridTab2"></div>
</div>
JavaScript:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID" },
user_id: { label: "UID" },
invoice_no: { label: "Číslo" },
user_fullname: { label: "Plátce" },
created_formatted: { label: "Vystavena" },
payment_date_formatted: { label: "Splatnost" },
payment_total: { label: "Částka" }
}
}, "invoicesGridTab2");
grid.startup();
});
I can add few more things:
List item
I have no errors at the JavaScript console
data source is already tested with using older dojox.grid.DataGrid
it seems that main problem is with the rendering
Thanks for any help or advice!
You need to specify the field attribute in your columns that match with the response data object, for example:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID", field: "invoice_id" },
user_id: { label: "UID", field: "user_id" },
invoice_no: { label: "Číslo", field: "invoice_no" },
user_fullname: { label: "Plátce", field: "user_fullname" },
created_formatted: { label: "Vystavena", field: "created_formatted" },
payment_date_formatted: { label: "Splatnost", field: "payment_date_formatted" },
payment_total: { label: "Částka", field: "payment_total" }
}
}, "invoicesGridTab2");
grid.startup();
});
I do not know if those field names are correct, but I assume you would. :)