Hi All,
I have a requirement in showing the grid in parent and child rows.So I tried igHierarchial Grid sample using JSON format.
I was not able to render the grid when I bind the grid with JSON data, also please find the JSON data and Hierarchial grid code given below.
$.ig.loader({
scriptPath: '@Url.Content("~/Content/Scripts")',
cssPath: '@Url.Content("~/Content/css")',
resources: 'igHierarchicalGrid.*',
ready: function () {
$.getJSON("@Url.Content("~/VoucherSearch/GetAll")",null, function (data) {
$("#hierarchicalGrid").igHierarchicalGrid({
initialDataBindDepth: 1,
dataSource: jsonData,
dataSourceType: "json",
responseDataKey: "",
autoGenerateColumns: false,
primaryKey: "depcode",
columns: [
{ headerText: "Depcode", key: "depcode", width: "50px", dataType: "string" },
{ headerText: "Claimworksheetnumber", key: "claimworksheetnumber", width: "80px", dataType: "string" },
{ headerText: "Claimstatuscode", key: "claimstatuscode", width: "80px", dataType: "string" },
{ headerText: "Incurredfromdate", key: "incurredfromdate", width: "90px", dataType: "string" },
{ headerText: "Incurredthrudate", key: "incurredthrudate", width: "90px", dataType: "string" },
{ headerText: "Received Date", key: "receiveddate", width: "90px", dataType: "string" },
{ headerText: "Totalsubmittedcharges", key: "totalsubmittedcharges", width: "90px", dataType: "string" },
],
autoGenerateLayouts: false,
defaultChildrenDataProperty: "details",
columnLayouts: [
{
name: "details",
childrenDataProperty: "details",
primaryKey: "claimworksheetnumber",
{ key: "claimworksheetnumber", headerText: "Claimworksheetnumber", width: "25px" },
{ key: "batchreferencenumber", headerText: "Batchreferencenumber", width: "90px" },
{ key: "benifittype", headerText: "Benifit Type",width: "55px" },
{ key: "diagnosisdesc", headerText: "Diagnosis Desc",width: "55px" },
{ key: "provideridsuffix", headerText: "Providerid/Suffix",width: "55px" },
{ key: "providername", headerText: "Provider Name",width: "55px" },
{ key: "enrollee", headerText: "Enrollee", width: "55px" }
]
}
});
and JSON data.
"depcode": "e",
"claimworksheetnumber": "80003873/01",
"claimstatuscode": "f/f",
"incurredfromdate": "12/31/2008",
"incurredthrudate": "12/31/2008",
"receiveddate": "02/12/2009",
"totalsubmittedcharges": "500.00",
"counter": "0",
"details": [
"batchreferencenumber": " /0",
"benefittype": "M ",
"diagnosisdesc": "DIABETES MELLITUS ",
"provideridsuffix": "000000002",
"providername": "ST. ELIZABETH HOSP ",
"enrollee": "FLINTROCK ,FRED ",
"membername": "FRED "
},
"claimworksheetnumber": "80003874/01",
"enrollee": "AX ,ALPHA ",
"counter": "1",
"membername": "ALPHA "
PLease try to resolve this issue as soon as possible so that it will be helpful for us.
Thanks,
Pradeep
Hello Pradeep,
Let me know if you were able to resolve your issue.
Best regards,Martin PavlovInfragistics, Inc.
I see 3 possible problems:
1. Your Ajax call returns data property and I guess that you should bind the igHierarchicalGrid to it so try changing the "dataSource: jsonData" to "dataSource: data".2. The "name: "details"" should be changed to "key: 'details'"3. The "defaultChildrenDataProperty: "details"" is not needed
If the proposed changes don't help, let me know which version of Ignite UI you're using so I can test with it (to get the Ignite UI version execute the following code in the browser console: $.ui.igHierarchicalGrid.version).
Hope this helps,Martin PavlovInfragistics, Inc.