Hi,
we have a licenced package for the "NetAdvantage for WinFomrs" which is truely great, and the support is the best i've seen !! and now i am evaluating the "NetAdvantage for JQuery" - in specific the igHierarchicalGrid, to decide weather to purchase it.
i've encounted an issue that i having some trouble with and wanted to see if you can shed some light on the subject.
in the WinFomrs i used the UltraWinGrid , i gave it a DataSet with two tables and a DataRelation between these tables. i.e.:
***************************
DataSet ds = ...getDataFromDB();
DataRelation dRel = new DataRelation("ParentChild",ds.Tables[0].Columns["ID"],ds.Tables[1].Columns["ID"]);dRel.Nested = true;ds.Relations.Add(dRel);
myUltraGrid.Datasource = ds;
********************
because the DataSet had a DataRelation between the tables then the UltraWinGrid knew how to create the hierarchical levels and to bind the relevent child rows to the parent row. works perfect.
however i am not able to do the same in the JQuery
*********************************************
DataRelation dRel = new DataRelation("ParentChild",ds.Tables[0].Columns["ID"],ds.Tables[1].Columns["ID"])dRel.Nested = true;ds.Relations.Add(dRel);var jsonString = new HtmlString(convertor.Serialize(ds));
ViewData["mystring"] = jsonString;
aspx :
$("#myJQueryGrid").igHierarchicalGrid({initialDataBindDepth: 1,dataSource: @ViewData["mystring"],dataSourceType: 'json',
....
**********************************************
it does convert it to JSON format and the web page does display the grid, but it fails when i try to expand the parent row inorder to see the child rows, the spinning loader keeps spinning.
i searched for examples for JQuery igHierarchicalGrid and i found some, here is one :
http://help.infragistics.com/Help/NetAdvantage/jQuery/2012.1/CLR4.0/html/igHierarchicalGrid_Initializing.html#initializing_jquery
the json format in that example is each parent row has an array of child rows specifically for that parent row.
my question can the JQuery igHierarchicalGrid DataSource accept json that has two tables one after the other (not "interlaced") and know to bind the relevent child rows to the parent row , without additional effort, exactly as the UltraWinGrid ? if yes can you point to me to the right place / example?i found this post http://stackoverflow.com/questions/7917320/convert-dataset-with-relation-to-json-string which shows how to convert it to a "nested" json which does the job but not to the exact format as in the example i mentioned (http://help.infragistics.com/Help/NetAdvantage/jQuery/2012.1/CLR4.0/html/igHierarchicalGrid_Initializing.html#initializing_jquery)
many thanks
nevermind,
solved it
it was just a manner setting the correct primarykey,forienkey and responseDataKey on parent level and child level.
if anyone is intrested here is my solution ...
----------- server side -----------------
DataRelation dRel = new DataRelation("ParentChild",ds.Tables[0].Columns["ID1"],ds.Tables[1].Columns["ID2"])dRel.Nested = true; // <-- importantds.Relations.Add(dRel);
// convert to xml in a nested format and then from xml to json
XmlDocument doc = new XmlDocument();doc.LoadXml(ds.GetXml());string jsonText = JsonConvert.SerializeXmlNode(doc).Replace("null", "\"\"").Replace("'", "\'");
var jsonString = new HtmlString(jsonText); ViewData["gridData"] = jsonString;
------------- client side -----------
<script type="text/javascript">
$.ig.loader(function () {
$("#myGrid").igHierarchicalGrid({ initialDataBindDepth: 1, dataSource: @ViewData["gridData"], dataSourceType: 'json', responseDataKey: 'NewDataSet.Table', // <-- important width: "700px",
autoGenerateColumns: true, primaryKey: "ID1", // <-- important // columns: [ // { key: "CategoryID", headerText: "Category ID", dataType: "number" }, // { key: "CategoryName", headerText: "Category Name", dataType: "string" }, // { key: "Description", headerText: "Description", dataType: "string" } // ], autoGenerateLayouts: true, columnLayouts: [ { key: "Table1", // <-- important responseDataKey: '', // <-- this is not double quite this is two single qoutes autoGenerateColumns: true, primaryKey: "ID2", // <-- important foreignKey: "ID1" // <-- important // columns: [ // { key: "ProductID", dataType: "number" }, // { key: "ProductName", dataType: "string" }, // { key: "QuantityPerUnit", dataType: "string" } // ] } ] });
});
Hi Sharon,I' super glad to see that you've managed to get the hierarchical grid configuration right! :)Setting up primary and foreign keys may seem tedious, but the benefits of having them can range from proper binding to the ability to use child grid loading on demand (for example).
Just to let you know that when you're defining child grids bound to a DataSet's DataTables, you might also want to set the DataMember property as well - it has to be the name of child grid's corresponding DataTable.The hierarchical grid can infer it but I strongly suggest assigning it as well in order to avoid possible problems. Also, you might also be interested to hear that we've published a couple of help topics that can help you cope with problems and questions when binding to DataTables:
Hope this helps!Cheers,Borislav
I have a question relating using parent/child dataset, XML, and JSON for this example. What if a particular parent entry does not have any corresponding entries for the child table? Then there would be no entries for "table1" details for this parent row and parsing would fail for the hierarchical grid. Is there a way to handle cases where not every parent row may have child entries?
Thanks!
Chiman said:What if a particular parent entry does not have any corresponding entries for the child table?
I checked my xml and json outputs more thoroughly and think found the issue. It looks like the translated xml does not contain the child node tags when there is no entry. So the column header cells are also missing in the json translation and that's probably why it fails to parse.
My source code is very similiar to that posted above by Sharik and my output looks something like the following. The parent table is "Master" and child table is "Detail".
XML output:
And the JSON output looks like this:
{
"NewDataSet": {
"Master": [
"ID": "7",
"StartDate": "2002-01-01T00:00:00-05:00",
"Gid": "100",
"Strat": "CC",
"Detail": {
"SPT_ID": "7",
"Sid": "101"
}
},
"ID": "8",
"Gid": "101",
"Strat": "FIN"
]
As you can see the second data row has no Detail entries at all (no tags in xml and no column headers in JSON). Could I be missing something in the Dataset.GetXml() call?
(I apologize if the formatting turns out to be a little weird. Had some trouble copy/paste my source here)
Thanks Borislav, will try your suggestion!
Hi,This is actually a requirement of the igGrid (and the igHierarchicalGrid)'s databinding logic: if the appointed data is not present, it has to be indicated by either an empty XML node or an empty JS array.Examples with your code:
<?xml version="1.0"?> <NewDataSet> <Master> <ID>7</ID> <StartDate>2002-01-01T00:00:00-05:00</StartDate> <GId>100</GId> <Strat>CC</Strat> <Detail> <SPT_ID>7</SPT_ID> <Sid>101</Sid> </Detail> </Master> <Master> <ID>8</ID> <StartDate>2002-01-01T00:00:00-05:00</StartDate> <GId>101</GId> <Strat>FIN</Strat> <Detail></Detail> </Master>
{ "NewDataSet": { "Master": [ { "ID": "7", "StartDate": "2002-01-01T00:00:00-05:00", "Gid": "100", "Strat": "CC", "Detail": { "SPT_ID": "7", "Sid": "101" } }, { "ID": "8", "StartDate": "2002-01-01T00:00:00-05:00", "Gid": "101", "Strat": "FIN", "Detail": [] // notice that this should be an array, not an object } ] } }
So I suggest altering your DataTables so that Detail becomes Details, thus it has to be a List<Detail> (for example) not just property being an object of the Detail class.Hope this helps!Cheers,BorislavPS: No worries about the copy-paste - we all know that the forum post form's behaves like a brat when it comes to pasting syntax-highlighted text.