Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Guru
205
Binding Complex JSON to igGrid
posted

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

Parents
  • 6279
    Verified Answer
    posted

    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 

Reply Children