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