Hi All,
I am new to Hierarchical grid.I tried to display parent and child record using Hierarchical grid.The parent row gets displayed but while clicking on the expand icon I'm getting javascript error "Uncaught Error: Syntax error, unrecognized expression: #hierarchicalGrid_002/000003_Child_child_scroll".
Please find the code and JSON format data.
$("#hierarchicalGrid").igHierarchicalGrid({ initialDataBindDepth: 1, dataSource: @Session["BatchesData"], dataSourceType: "json", responseDataKey: "NewDataSet.Parent",
autoGenerateColumns: false, primaryKey: "BatchReferenceNumber", columns: [ { headerText: "BatchReferenceNumber", key: "BatchReferenceNumber", width: "100px", dataType: "string" }, { headerText: "ProcessingType", key: "ProcessingType", width: "100px", dataType: "string" }, { headerText: "IncurredFromDate", key: "IncurredFromDate", width: "100px", dataType: "string" }, { headerText: "IncurredThruDate", key: "IncurredThruDate", width: "100px", dataType: "string" }, { headerText: "ReceivedDate", key: "ReceivedDate", width: "100px", dataType: "string" }, { headerText: "ReceivedDate", key: "ReceivedDate", width: "100px", dataType: "string" }, { headerText: "TotalCharge", key: "TotalCharge", width: "100px", dataType: "number" }
], autoGenerateLayouts: false, defaultChildrenDataProperty: "Child", columnLayouts: [ { name: "Child", responseDataKey: "Child", childrenDataProperty: "Child", autoGenerateColumns: false, primaryKey: "BatchReferenceNumber", columns: [ { key: "BatchReferenceNumber", headerText: "BatchReferenceNumber", width: "100px", dataType: "string" }, { key: "PatientLastName", headerText: "PatientLastName", width: "100px", dataType: "string" }, { key: "PatientFirstName", headerText: "PatientFirstName", width: "150px", dataType: "string" }, { key: "SSN", headerText: "SSN", width: "155px", dataType: "string" }, { key: "MemberID", headerText: "MemberID", width: "155px", dataType: "string" }, { key: "ProviderName", headerText: "ProviderName", width: "155px", dataType: "string" } ] } ] });
JSON Data:
{"NewDataSet":{"Parent":{"BatchReferenceNumber":"002 /000003","ProcessingType":"i","IncurredFromDate":"02/01/2007","IncurredThruDate":"02/01/2007","ReceivedDate":"02/20/2007","TotalCharge":"211.21"},"Child":{"BatchReferenceNumber":"002 /000003","PatientLastName":"DUCKBILL ","PatientFirstName":"DUCKY ","SSN":"12609991","MemberID":"100001112 ","ProviderName":"SCOTT BAKER MD "}}}
Please help to resolve the issue as soon as possible.
Thanks,
Pradeep SE
Hi Pradeep,
Thank you for posting in our forums!
The igHierarchicalGrid control is a hierarchical jQuery Grid control and you can bind the igHierarchicalGrid to a variety of data sources including JSON,
I made a sample project which demonstrate how to bind igHierarchicalGrid to JSON data source.
The here is a fiddle link:
http://jsfiddle.net/gh/get/jquery/1.9.1/igniteuisamples/jsfiddle-samples/tree/master/EN/HtmlSamples/hierarchical-grid/json-binding/
As you are new to hierarchal Grid the following API link demonstrates capability to display hierarchical grid and its features.
http://www.igniteui.com/hierarchical-grid/overview
I have tried the sample code it was working fine.My requirement was to dynamically convert the datatable to JSON format and bind to Hierarchical grid.I tried to convert the datatable to XML and then convert the XML to JSON format using Newtonsoft. I binded the json data to igHierarchical grid.The final output was I can able to see the Parent record but the child record was completely blank.I tried many options but I cant able to render child row.
Please find the code and JSON data.
DataSet dsFinalBatchDetails = BuildDocumentNumberBatchGrid(dtBatchesData);
XmlDocument doc = new XmlDocument(); doc.LoadXml(dsFinalBatchDetails.GetXml()); string jsonText = JsonConvert.SerializeXmlNode(doc).Replace("null", "\"\"").Replace("'", "\'");
var jsonString = new HtmlString(jsonText);
Session["BatchesData"] = jsonString;
autoGenerateColumns: false, primaryKey: "ProcessingType", columns: [ { headerText: "BatchReferenceNumber", key: "BatchReferenceNumber", width: "100px", dataType: "string" }, { headerText: "ProcessingType", key: "ProcessingType", width: "100px", dataType: "string" }, { headerText: "IncurredFromDate", key: "IncurredFromDate", width: "100px", dataType: "string" }, { headerText: "IncurredThruDate", key: "IncurredThruDate", width: "100px", dataType: "string" }, { headerText: "ReceivedDate", key: "ReceivedDate", width: "100px", dataType: "string" }, { headerText: "ReceivedDate", key: "ReceivedDate", width: "100px", dataType: "string" }, { headerText: "TotalCharge", key: "TotalCharge", width: "100px", dataType: "number" }
], autoGenerateLayouts: false, defaultChildrenDataProperty: "Child", columnLayouts: [ { key: "Child", //name: "Child", responseDataKey: '', childrenDataProperty: "Child", autoGenerateColumns: true, primaryKey: "SSN", foreignKey: "BatchReferenceNumber", columns: [ { key: "BatchReferenceNumber", headerText: "BatchReferenceNumber", width: "100px", dataType: "string" }, { key: "PatientLastName", headerText: "PatientLastName", width: "100px", dataType: "string" }, { key: "PatientFirstName", headerText: "PatientFirstName", width: "150px", dataType: "string" }, { key: "SSN", headerText: "SSN", width: "155px", dataType: "string" }, { key: "MemberID", headerText: "MemberID", width: "155px", dataType: "string" }, { key: "ProviderName", headerText: "ProviderName", width: "155px", dataType: "string" } ] } ] });
Json data:
{"NewDataSet":{"Parent":{"BatchReferenceNumber":"002/000004","ProcessingType":"i","IncurredFromDate":"02/01/2007","IncurredThruDate":"02/01/2007","ReceivedDate":"02/20/2007","TotalCharge":"2131.23"},"Child":{"BatchReferenceNumber":"002/000004","PatientLastName":"DUCKBILL","PatientFirstName":"DORIS","SSN":"12609990","MemberID":"100001112","ProviderName":"LORRETA LYNN"}}}
Please try to resolve this issue as soon as possible.
Regards,
Pradeep
The sample project which you have provided I am not getting the parent and child records, both are completely blank?
You are dynamically converting the datatable to JSON data format which is not in collection format. when you bind the data to grid it should be collection object and because of the difference in format you are not getting records.
I have the sample I used to test this, here it binds the JSON data to hieraticaldatagrid, you can compare the data formats.
http://help.infragistics.com/jQuery/2015.2/ui.ighierarchicalgrid
Please note you are converting datatable in XML format instead of converting it to JSON format you can bind XML data to hierarichalGrid.
Following sample demonstrates how to bind igHierarchicalGrid to XML data source.
http://www.igniteui.com/hierarchical-grid/xml-binding
Here is one more API doc demonstrate igGrid/igDataSource Architecture Overview
http://www.igniteui.com/help/iggrid-igdatasource-architecture-overview