How can I mapping nested Json to Kendo UI grid? - javascript

I use a web api to send data to display in Kendo UI grid. my web api return a nested json.
As follows:
{
"SearchRequest": {
"Term": null,
"SortDirection": "Desc",
"Total": 0,
"PageIndex": 1,
"PageSize": 10,
"CurrentSort": null
},
"OperationalRisks": [
{
"LocationCode": 224.0,
"RegisterDate": "1/01/01"
},
{
"LocationCode": 211.0,
"RegisterDate": "1/01/01"
}
]
}
After that, I will try to display the data in the following way :
columns: [
{ field: "OperationalRisks.LocationCode", title: "#" },
{ field: "OperationalRisks.RegisterDate", title: "#" }
]
And:
schema: {
model: {
fields: {
"OperationalRisks.LocationCode": { type: "number" },
"OperationalRisks.RegisterDate": { type: "number" }
}
}
}
But the data isn't bind to grid

My problem was easily solved and I would like to share this with you
first of all you should define:
var json_data;
and after that:
$("#grid").kendoGrid{{
datasource:{
type:"json",
data:json_data.OperationalRisks,
.
.
.
columns: [
{ field: "LocationCode", title: "#" },
{ field: "RegisterDate", title: "#" }
],
.
.
.
schema: {
model: {
fields: {
"LocationCode": { type: "number" },
"RegisterDate": { type: "number" }
}
}
}

Related

ag-grid Tree Data stay loading until data recibed

I'm trying to create a tree view of data in server side, my data come from server with this structure:
IdObjectA: 1
NameObjectA: "NameA"
ObjectB: [{
IdObjectB: 1
NameObjectB: "NameB"
ObjectC: [{
IdObjectC: 1
NameObjectC: "NameC"
Data: [
{
...
}
]
}]
}]
I use ajax to get the response and if I debug, the data comes sucesfuly:
function createServerSideDatasource() {
return {
rowCount: undefined,
getRows: (params) => {
const response = $.ajax({
type: "POST",
url: "/Controller/GetAllDataFromDatabase",
data: { filterElementsToDatabase },
success: function (data) {
/*Get the data OK*/
var rowsData = JSON.parse(data);
params.successCallback(rowsData);
},
error: function (e, ts, et) {
params.fail();
}
});
}
};
}
The columDefs are:
const columnDefs = [
{
headerName: 'ObjectB',
children: [
{
field: 'ObjectB.IdObjectB',
headerName: "IdObjectB",
hide: true
},
{
field: "ObjectB.NameObjectB",
headerName: "NameObjectB"
},
{
headerName: 'ObjectC',
children: [
{
field: 'ObjectB.ObjectC.IdObjectC',
headerName: "IdObjectC"
},
{
field: "ObjectB.ObjectC.NameC",
headerName: "NameC",
},
{
headerName: 'Data',
children: [
{ field: 'ObjectB.ObjectC.Data.Param1', sortable: true, headerName: "Param1" },
{ field: 'ObjectB.ObjectC.Data.Param2', sortable: true, headerName: "Param2" },
{ field: 'ObjectB.ObjectC.Data.Param3', sortable: true, headerName: "Param3" },
]
}
]
}
]
}
];
and the grid options are:
gridOptions = {
rowModelType: 'serverSide',
serverSideInfiniteScroll: true,
treeData: true,
cacheBlockSize: 100,
cacheOverflowSize: 15,
maxConcurrentDatasourceRequests: 1,
infiniteInitialRowCount: 100,
maxBlocksInCache: 10,
columnDefs: columnDefs,
defaultColDef: {
sortable: true,
resizable: true,
filter: true,
enableFilter: true,
floatingFilter: true,
enableValue: true,
enableRowGroup: true,
width: 200,
},
groupHeaderHeight: 0,
suppressDragLeaveHidesColumns: true,
sideBar: {
toolPanels: [
{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
suppressSyncLayoutWithGrid: true,
suppressColumnMove: true,
},
},
],
defaultToolPanel: 'columns',
},
enableCharts: true,
enableRangeSelection: true,
autoGroupColumnDef: {
field: 'Lineas.IdCelula',
},
isServerSideGroup: (dataItem) => {
debugger;
// indicate if node is a group
var group = !!dataItem.ObjectC
return group;
},
getServerSideGroupKey: (dataItem) => {
debugger;
// specify which group key to use
return dataItem.ObjectB.ObjectC.NameC;
},
};
But when load this happen and in console don't apear exceptions or warnings about, and stay with the spinner of loading in all rows.
Find the problem, was in the server object, was with multiple elements inside like:
IdObjectA: 1
NameObjectA: "NameA"
ObjectB: [{ //<-- Array
IdObjectB: 1
NameObjectB: "NameB"
ObjectC: [{ //<-- Other Array
IdObjectC: 1
NameObjectC: "NameC"
Data: [ //<-- Other Array
{
...
}
]
}]
}]
But, you can't have a multidimensional object with arrays inside, you have to create an array of objects like:
{
IdObjectA: 1
NameObjectA: "NameA"
ObjectB: {
IdObjectB: 1
NameObjectB: "NameB"
ObjectC: {
IdObjectC: 1
NameObjectC: "NameC"
Data:
{
...
}
}
}
},
{
IdObjectA: 1
NameObjectA: "NameA"
ObjectB: {
IdObjectB: 1
NameObjectB: "NameB"
ObjectC: {
IdObjectC: 2
NameObjectC: "NameC"
Data:
{
...
}
}
}
}
Then ag-grid recieve the data and load correctly the table.

How to bind the local and Remote data together to Kendo DataSource

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.

Local and Remote DataSource to Kendo Treeview

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).

KendoUI: one multi-level JSON dataSource for multiple grids

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.

Kendo Grid DropdownList And Insert template Error

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

Categories

Resources