I have a JSON which has the following schema
[ { "ProductID": 1, "Name": "Adjustable Race", "ProductDetails": { "Number": "AR-5381", "Desc": "Description text" }, "StandardCost": 0 }, { "ProductID": 2, "Name": "Bearing Ball", "ProductDetails": { "Number": "BA-8327", "Desc": "Description text" }, "StandardCost": 0 }, { "ProductID": 3, "Name": "BB Ball Bearing", "ProductDetails": { "Number": "BE-2349", "Desc": "Description text" }, "StandardCost": 0 }, { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductDetails": { "Number": "BE-2908", "Desc": "Description text" }, "StandardCost": 0 }]
I am trying to bind this data to the grid using following column definition
columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number" }, { headerText: "Product Name", key: "Name", dataType: "string" }, { headerText: "Product Number", key: "ProductDetails.Number", dataType: "string" }, { headerText: "Standard Cost", key: "StandardCost", dataType: "number" }, ]
Its not showing anything on the Product Number column. Please let me know how I can do this.
Thanks
Guru
Hi Borislav,
so far I have tried to display properties from a transferred json object as you have described. It works.
I would like now also to sort remote on this column, but the problem is that the column key has only the objectname like in your example "ProductDetails", but I have to send the whole propertyname "ProductDetails.Number" to the server.
Do you have an idea to implement this?
Kind regrds,
Damir
Hello,
It was mentioned that binding to an object might be supported in the future. This post was quite a long time ago, so has anything happened? Is there any other way to bind to nested data?
I also want to use nested data like this in a DataChart, how do I achieve that ?
Allen
Sorry for the bump, and please excuse my english... but I have a similar/more complex problem. I cannot use return val.Number because my "Number" column is dynamic.
I set headers inside a loop and at each iteraction it fetches a new ".Number" to identify the column. I can't seem to find a way to pass the column name to the formatter function because it only runs after the loop end. This causes it to always use the last column value. I'm a bit desperate can you help me out? I have a open a thread in here https://es.infragistics.com/community/forums/f/ignite-ui-for-javascript/83536/binding-data-to-dynamic-structure#417369
thank you
Hi Guru,Binding to a an object's node (or property) isn't supported out of the box at the moment (but it will be in a future release (hopefully)).At the moment the workaround I can suggest is to use a formatter function on the ProductDetails node so that you access the Number node like so:
{ headerText: "Product ID", key: "ProductID", dataType: "number" }, { headerText: "Product Name", key: "Name", dataType: "string" }, { headerText: "Product Number", key: "ProductDetails", dataType: "object", formatter: function(val) { return val.Number; } }, { headerText: "Standard Cost", key: "StandardCost", dataType: "number" }
PS: If you need to perform operations such as sorting, filtering or summaries on the ProductDetails.Number column, you will need to define a custom sorting/filtering of summary-calculating function. Hope this helps,Borislav