I have a JSON dataSource that looks like this:
var productDataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'http://...',
dataType: "json"
}
},
pageSize: 10
});
And returns something like this:
{
"ProdSet1":[
{
"Name": "Product 1-1",
"Price": 20,
"Quantity": 50,
"Change": 4
},
{
"Name": "Product 1-2",
"Price": 14,
"Quantity": 74,
"Change": 5
}
],
"ProdSet2":[
{
"Name": "Product 2-1",
"Price": 15,
"Quantity": 12,
"Change": 2
}
]
}
Then I have multiple grids that use this one dataSource:
$("#prodSet1").kendoGrid({
dataSource: productDataSource,
columns: [
{ field: "ProdSet1[0].Name", title: "Name" },
{ field: "ProdSet1[0].Price", title: "Price" },
{ field: "ProdSet1[0].Quantity", title: "Quantity" },
{ field: "ProdSet1[0].Change", title: "Change" }
]
});
$("#prodSet2").kendoGrid({
dataSource: productDataSource,
columns: [
{ field: "ProdSet2[0].Name", title: "Name" },
{ field: "ProdSet2[0].Price", title: "Price" },
{ field: "ProdSet2[0].Quantity", title: "Quantity" },
{ field: "ProdSet2[0].Change", title: "Change" }
]
});
But doing { field: "ProdSet1[0].Name" ...} isn't working.
How can I reference the correct product data?
Since the collections are named in the return object, you can set the schema.data property to each ProdSet, and bind a grid to it.
I would manually fetch the data from the datasource, with a datasource.read()
var datafromService = productDataSource.read();
Documentation... http://docs.telerik.com/kendo-ui/documentation/api/framework/datasource#methods-read
Then bind each grid to that datafromService, with each specifying the collection inside the JSON object to bind to.
$("#prodSet1").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet1'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
and
$("#prodSet2").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet2'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
Now they will be bound to the same set of data, just displaying different collections from the JSON data.
See sample... http://jsbin.com/dokub/1/edit
If you are needing full CRUD operations, that gets into another bag of cats.
Related
I am very new to NVC working on an existing solution. We are using a dxDataGrid, and I am trying to add a column with custom buttons. I am using the following documentation as reference:
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/columns/buttons/
and
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CommandColumnCustomization/jQuery/Light/
The existing implementation of the grid is as follows:
$(function () {
$("#branchDataGrid")
.dxDataGrid({
dataSource: {
store: dxMvcStore({
key: "ID",
})
},
showBorders: true,
noDataText: "No Branch Selected",
editing: {
mode: "batch",
allowAdding: false,
allowUpdating: true,
allowDeleting: true
},
paging: { enabled: true, pageSize: 10 },
showRowLines: true,
sorting: { mode: "none" },
columns: [
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
],
onInitialized: e => {
self.companiesNodeDataGrid = e.component as DevExpress.ui.dxDataGrid;
},
onRowExpanding: e => {
// Only show one detail view at a time.
self.companiesNodeDataGrid.collapseAll(-1);
},
onRowInserting: e => {
// self.saveCompanyResult(e, true);
},
onRowUpdating: e => {
// self.saveCompanyResult(e, false);
}
}).dxDataGrid("instance");
});
I am trying to add my column with the buttons as shown in the documentation. Here is a snippet:
columns: [
{
type: "buttons",
buttons: [{
name: "save",
cssClass: "my-class"
}]
},
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
]
The problem is that I am getting a compiler error in the line where it says "type: "buttons". Please see the below screenshot for reference:
I have done some searching but cannot seem to find any posts with similar issues. If anyone might have some advice for me where to look for a solution, or point out what I am doing wrong, I would be very grateful.
I have managed to continue using a different approach of adding custom markup to a column, as shown in the below link:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CellCustomization/jQuery/Light/
I have a kendo grid with a custom popup editor. I have defined the edit body as a kendo template using mvvm binding, but I think I must be missing something because the behaviour of the popup is not as expected.
When clicking Edit, the popup editor appears, but if I close the popup using the cancel button, then click Edit on the same row again, the editor does not appear.
In addition, changes do not seem to be occurring as expected for the field using the dropdown measureStatusId, unless it is not null to begin with.
I would prefer to use mvvm here, I don't think this scenario is unusual enough to need to roll my own edit pop up?
See this JSBin.
var model = {
"title": "Active Community",
"measures": [
{
"measureId": 3,
"completed": false,
"measureStatusId": null,
"measureStatus": null,
"progress": null,
"target": "Council provides a wide range of accessible and well-maintained sports facilities to increase levels of participation in sport and active recreation"
},
{
"measureId": 4,
"completed": false,
"measureStatusId": null,
"measureStatus": null,
"progress": null,
"target": "Council funds and works in partnership with external recreation organisations to help increase levels of participation in sport and active recreation"
}
],
"measureStatuses": [
{
"text": "Green",
"value": "1",
"selected": false
},
{
"text": "Orange",
"value": "2",
"selected": false
},
{
"text": "Red",
"value": "6",
"selected": false
}
]
},
PNCC = {};
$(document).ready(function () {
PNCC.viewModel = new kendo.observable(model);
$("#Measures").kendoGrid({
dataSource: {
data: PNCC.viewModel.measures,
schema: {
model: {
id: "measureId",
fields: {
measureId: { type: "number", editable: false },
target: { type: "string", editable: false },
completed: { type: "boolean" },
measureStatusId: { type: "string" },
measureStatus: { type: "string" },
progress: { type: "string" }
}
}
},
sort: { field: "target", dir: "asc" }
},
"columns": [
{
"title": "Performance Measures & Targets",
"field": "target"
},
{
"title": "Year to date progress and next steps",
"field": "progress"
},
{
"title": "Status",
"field": "measureStatus"
},
{
"title": "Complete?",
"field": "completed"
},
{ command: ["edit"], title: " " }
],
"filterable": false,
"scrollable": true,
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
}
});
});
I think the problem is with the observable object you created for your datasource
Please check this Jsbin
PNCC.viewModel = new kendo.observable(model);
$("#Measures").kendoGrid({
dataSource: {
data: model.measures,
schema: {
model: {
id: "measureId",
fields: {
measureId: { type: "number", editable: false },
target: { type: "string", editable: false },
completed: { type: "boolean" },
measureStatusId: { type: "string" },
measureStatus: { type: "string" },
progress: { type: "string" }
}
}
},
sort: { field: "target", dir: "asc" }
},
"columns": [
{
"title": "Performance Measures & Targets",
"field": "target",
width: "150px"
},
{
"title": "Year to date progress and next steps",
"field": "progress",
width: "150px"
},
{
"title": "Status",
"field": "measureStatus",
width: "150px"
},
{
"title": "Complete?",
"field": "completed",
width: "150px"
},
{ command: ["edit"], title: " ", width: "75px" }
],
filterable: false,
scrollable: true,
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
}
});
Some changes:
Make measureStatusId be a number in model and the grid schema.
Change the grid status column from measureStatus to measureStatusId
Alter the html declaration of the dropdown to include data-value-primitive="true"
Change the observable to include measures as a datasource, and update the grid declaration to use that directly, rather than create a new datasource.
I think the critical change here was to make both the grid and the popup refer to a single object, rather than two separate objects. The rest of the issues seem to stem from mismatching datatype configuration.
The change to the observable object is shown below.
PNCC.viewModel = new kendo.observable({
measures: new kendo.data.DataSource({
data: model.measures,
schema: {
model: {
id: "measureId",
fields: {
measureId: { type: "number", editable: false },
target: { type: "string", editable: false },
measureStatusId: { type: "number" },
progress: { type: "string" }
}
}
},
sort: { field: "target", dir: "asc" }
}),
measureStatuses: model.measureStatuses
});
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 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
So I have the grid.Panel here :
Ext.require([
'Ext.direct.*',
'Ext.data.*',
'Ext.grid.*'
]);
Ext.define('PersonalInfo', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email']
});
Ext.onReady(function() {
// create the Grid
Ext.create('Ext.grid.Panel', {
store: {
model: 'PersonalInfo',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'app/data/users.json',
reader: {
type: 'json',
root: 'users'
}
}
},
columns: [{
dataIndex: 'name',
width: 50,
text: 'ID'
}],
height: 450,
width: 700,
title: 'Velociraptor Owners',
renderTo: Ext.getBody()
});
});
And the users.json file here, who's extension is app/data/users.json:
{
"users": [
{ "name": "Name 1" , "email": "email#site.com" },
{ "name": "Name 2" , "email": "email#site.com" },
{ "name": "Name 3" , "email": "email#site.com" },
{ "name": "Name 4" , "email": "email#site.com" },
{ "name": "Name 5" , "email": "email#site.com" }
]
}
The grid displays on my browser (Firefox. IE9 doesn't display anything) but is not displaying the "name" field like I told it to. Any ideas?