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
Related
I have a Kendo UI grid, that will only display values like [object object] even if the type is "string". I have the datasource for the grid working with a graph, so I know there is data, and that it should be showing other values.
I'm using MVVM
Datasource:
var dataSource = new kendo.data.DataSource({
type: "everlive",
autoSync: true,
serverFiltering: true,
filter: {
field: "DeviceID",
operator: "eq",
value: device.uuid
},
transport: {
// binding to the Order type in Everlive
typeName: "BreakPoint"
},
schema: {
model: {
id: "Id",
fields: {
// default Everlive fields
CreatedBy: {
type: "string"
},
CreatedAt: {
type: "date"
},
ModifiedAt: {
type: "date"
},
// type fields
Energi: {
type: "number"
},
Note: {
type: "string"
},
activity_green: {
type: "bool"
},
activity_yellow: {
type: "bool"
},
activity_red: {
type: "bool"
}
}
}
}
});
HTML:
<div data-role="grid"
data-theme="silver"
date-scrollable="true"
data-pageable="true"
data-columns="[
{ 'field': 'CreatedAt', template:'#= formatAddress(data) #'},
{ 'field': 'Note' },
{ field: 'Energi', format:'{0:c}'},
{ field: 'activity_green', title: 'Grøn Aktivitet', format:'{0:c}'},
{ field: 'activity_yellow', title: 'Gul Aktivitet', format:'{0:c}'},
{ field: 'activity_red', title: 'Rød Aktivitet', format:'{0:c}'}
]"
data-bind="source: ds"
style="height: 200px"></div>
I am facing issue with categoryAxis when any one item is missing in the grouping. I have modified the code in below fiddle
http://jsfiddle.net/v8tsQ/9/
I have replaced the javascript as below:-
var dr =
[{
"currency":"AUD",
"paymenttype":"0",
"amount":"10"
},
{
"currency":"AUD",
"paymenttype":"3",
"amount":"11"
},
{
"currency":"CAD",
"paymenttype":"1",
"amount":"24"
},
{
"currency":"CAD",
"paymenttype":"0",
"amount":"23"
},
{
"currency":"CAD",
"paymenttype":"3",
"amount":"22"
}]
var ds = new kendo.data.DataSource({
data: dr,
group: {
field: "paymenttype"
},
sort: [{
field: "paymenttype",
dir: "asc"
}, {
field: "currency",
dir: "asc"
}]
})
$("#chart").kendoChart({
dataSource: ds,
seriesDefaults: {
type: 'column',
labels: {
visible: true,
template: "#=kendo.format('{0:0}', value)#"
}
},
legend: {
visible: true,
position: "bottom"
},
series: [{
field: "amount"
}],
categoryAxis: {
field: "currency"
},
tooltip: {
visible: true,
template: "#= dataItem.currency#"
}
});
Issue :
The CAD currency is showing under AUD for type 1, which does not exists for currency AUD.
Please suggest.
Thanks
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'm currently implementing a kendo grid and i'm populating it with local data.
That is; I have generated a JSON string from my action and supplying that string on the view page.
In the end i would like to know if it is possible to implement full CRUD functions with local data?
here's a sample of the code written so far;
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
var myData = ${coursemodules},
dataSource = new kendo.data.DataSource({
data: myData,
batch: true,
pageSize: 30,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true},
name: { type: "string", validation: { required: true }},
qualificationLevel: { type: "string", validation: { required: true }},
description: { type: "string", validation: { required: true }},
published: { type: "boolean" },
gateApprove: { type: "boolean" },
duration: { type: "number", validation: { min: 1, required: true } },
academicBody: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 350,
scrollable: true,
sortable: true,
pageable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "id",
title: "ID",
width: '3%'
},
{
field: "name",
title: "Course Title",
width: '20%'
},
{
field: "description",
title:"Description",
width: '35%'
},
{
field: "published",
title: "Published",
width: '7%'
},
{
field: "gateApprove",
title: "Gate Approve",
width: '7%'
},
{
field: "duration",
title: "Duration",
width: '5%'
},
{
field: "academicBody.shortName",
title: "Academic Body",
width: '10%'
}
],
editable: true
});
});
</script>
</div>
I have realise that for the datasource, you have to declare transport to implement the CRUD. However, I need to declare "data". I tried declaring both transport and data. That doesn't seem to work.
Yes you can Here is JSFiddle Hope this will help you.
// this should be updated when new entries are added, updated or deleted
var data =
[{
"ID": 3,
"TopMenuId": 2,
"Title": "Cashier",
"Link": "www.fake123.com"},
{
"ID": 4,
"TopMenuId": 2,
"Title": "Deposit",
"Link": "www.fake123.com"}
];
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
options.success(data);
},
create: function(options) {
alert(data.length);
},
update: function(options) {
alert("Update");
},
destroy: function(options) {
alert("Destroy");
alert(data.length);
}
},
batch: true,
pageSize: 4,
schema: {
model: {
id: "ID",
fields: {
ID: {
editable: false,
nullable: true
},
TopMenuId: {
editable: false,
nullable: true
},
Title: {
editable: true,
validation: {
required: true
}
},
Link: {
editable: true
}
}
},
data: "",
total: function(result) {
result = result.data || result;
return result.length || 0;
}
}
},
editable: true,
toolbar: ["create", "save", "cancel"],
height: 250,
scrollable: true,
sortable: true,
filterable: false,
pageable: true,
columns: [
{
field: "TopMenuId",
title: "Menu Id"},
{
field: "Title",
title: "Title"},
{
field: "Link",
title: "Link"},
{
command: "destroy"}
]
});
When binding local data, the Grid widget utilizes an abstraction that represents a local transport. Therefore, it does not require a custom transport; modifications made in the grid are reflected to the bound data source. This includes rollbacks through a cancellation.
There is fully functional example of this in telerik documentation
What you need is define transport block in dataSource object with custom CRUD funtions which update local source.
transport: {
create: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.data.ID = localData[localData.length-1].ID + 1;
localData.push(options.data);
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
read: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.success(localData);
},
update: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID == options.data.ID){
localData[i].Value = options.data.Value;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
destroy: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID === options.data.ID){
localData.splice(i,1);
break;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(localData);
},
}
(i posted this on the extjs forum too but recon SO is probably busier)
HI
I'm passing down the following json to a direct store:
{
"type": "rpc",
"tid": 2,
"action": "DirectReportDesigner",
"method": "GetReports",
"result": {
"total": 1,
"data": [{
"id": 1,
"FullTypeName": null,
"title": "test",
"useGroupedColConfig": false,
"groupTextTemplate": "{'ProviderName': ' Contract Number -- {gvalue}','ProviderName': ' Provider Name -- {gvalue}'}",
"groupHeaders": null,
"groupFields": "['CostElement2', 'CostElement3', 'CostElement4']",
"groupedHeaders": false,
"jsonUrl": "report/BudgetManagerBudgetData.rails",
"menuType": "rptmid",
"actualType": "rptmid",
"ignoreCols": "1",
"getRowClass": "settings.utils.highlightRowWhenCellEmptyClass",
"deleted": false,
"fitToScreen": false,
"isCopyOf": 0
}]
}
}
here is what the js code looks like:
Ext.extend(Ideal.ReportDesigner.ReportGrid, Ideal.UI.BaseGrid, {
pageSize: 25,
afterRender: function() {
this.getStore().load({
params: {
start: 0,
limit: 25
}
});
Ideal.ReportDesigner.ReportGrid.superclass.afterRender.apply(this, arguments);
},
header: false,
view: new Ext.grid.GridView({
autoFill: true
}),
cm: new Ideal.UI.ColumnModel([{
header: 'Report Name',
id: 'nameCol',
sortable: true,
dataIndex: 'title'
}, {
header: 'Json URL',
sortable: true,
dataIndex: 'jsonUrl'
}, {
header: 'Group Text Template',
sortable: true,
dataIndex: 'groupTextTemplate'
}, {
header: 'Group Headers',
sortable: true,
dataIndex: 'groupHeaders'
}, {
header: 'Group Fields',
id: 'groupFieldsCol',
sortable: true,
dataIndex: 'groupFields'
}, {
header: 'Grouped Headers',
sortable: true,
dataIndex: 'groupedHeaders'
}, {
header: 'Fit to Screen',
sortable: true,
dataIndex: 'fitToScreen'
}, {
header: 'Ignore Cols',
sortable: true,
dataIndex: 'ignoreCols'
}, {
header: 'Get Row Class',
sortable: true,
dataIndex: 'getRowClass'
}
]),
initComponent: function() {
var ds = new Ext.data.DirectStore({
directFn: DirectReportDesigner.GetReports,
paramsAsHash: false,
paramOrder: 'start|limit|sort|dir',
root: 'data',
idProperty: 'id',
totalProperty: 'total',
sortInfo: {
field: 'title',
direction: 'ASC'
},
fields: [{
name: 'id'
}, {
name: 'title'
}, {
name: 'useGroupedColConfig'
}, {
name: 'groupTextTemplate'
}, {
name: 'groupHeaders'
}, {
name: 'groupFields'
}, {
name: 'groupedHeaders'
}, {
name: 'jsonUrl'
}, {
name: 'menuType'
}, {
name: 'actualType'
}, {
name: 'fitToScreen'
}, {
name: 'ignoreCols'
}, {
name: 'getRowClass'
}, {
name: 'isCopyOf'
}
],
remoteSort: true
});
var pager = new Ext.PagingToolbar({
store: ds,
displayInfo: true,
pageSize: this.pageSize
});
var config = {
store: ds,
bbar: pager
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ideal.ReportDesigner.ReportGrid.superclass.initComponent.apply(this, arguments);
}
});
the grid renders ok, the server code to get the json fires ok, but the store never loads the data. i know it's being passed back as i can see it in firebug and that's how i pasted it above.
can anyone see anything obvious here?
cheers
w://
I've always defined store's fields as an array of strings, not as objects.
fields: ['id','title','useGroupedColConfig', ...]
i managed to sort this - it was the name of the c# variable that was getting serialized that was throwing it - why i have no idea!!!