Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
sharon
1935
igHierarchicalGrid - DataSet with two DataTables and DataRelation between them
posted

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 

*********************************************

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);

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

Parents
No Data
Reply
  • 1935
    Suggested Answer
    posted

    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 -----------------

    DataSet ds = ...getDataFromDB();

    DataRelation dRel = new DataRelation("ParentChild",ds.Tables[0].Columns["ID1"],ds.Tables[1].Columns["ID2"])
    dRel.Nested = true; // <-- important

    ds.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" }
            //            ]
                    }
                ]   
            });

        });

Children