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,
We had an issue with using a templating in the root layout of igHierarchicalGrid which we fixed in the latest SR 13.1.20131.2292.
You can upgrade to the latest SR and see if it works for you.
You can view the 13.1.20131.2292 Service Release notes from the following blog post:
Ignite UI Release Notes - October: 12.2, 13.1 Service Releases
Best regards,Martin PavlovInfragistics, 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.
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.