Hi,
I need to bind the below json format data in IgGrid. Please let me know how to do it.
<script> var products = []; products[0] = { "ProductID": 1, "ProductDetail": { "ProductName": "ABC", "ProductNumber": "ABC001" }; </script>
<table id=”grid1”></table>
<script>$(function () { $("#grid1").igGrid({ columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number" }, { headerText: "Product Name", key: "ProductName", template: "${ProductDetail.ProductName}" }, { headerText: "Product Number", key: "ProductNumber", template: "${ProductDetail.ProductNumber}" }, ], width: '500px', dataSource: products });});</script>
Hello Gurusamy,
By default igGrid can see only the columns which are explicitly configured in its columns collection, thus the templating cannot see the ProductDetail data. You have two options to overcome this:
1.Declare the ProductDetail column and hide it
2.Use the igGrid.localSchemaTransform option and set it to true. igGrid.localSchemaTransform controls what data igGrid can see:
If igGrid.localSchemaTransform = FALSE the grid can see all the data in the data source
If igGrid.localSchemaTransform = TRUE the grid can see only the columns data which are declared in the grid columns collection.
Here is a sample code for the second approach:
var products = [];
products[0] = { "ProductID": 1, "ProductDetail": { "ProductName": "ABC", "ProductNumber": "ABC001" }};
$("#grid1").igGrid({
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number" },
{ headerText: "Product Name", key: "ProductName", template: "${ProductDetail.ProductName}", unbound: true },
{ headerText: "Product Number", key: "ProductNumber", template: "${ProductDetail.ProductNumber}", unbound: true },
],
width: '500px',
dataSource: products,
localSchemaTransform: false
});
Hope this helps,
Martin Pavlov
Infragistics, Inc.
Thanks Martin.
I already went with the second approach. But this approach works for normal ig grid. But it didn't work for Hierarchical grid.