jQuery UI Widgets Forums Navigation Tree Adding subitems in dataAdapter.records

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Elia 12 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Adding subitems in dataAdapter.records #7003

    Elia
    Member

    Hi!

    I’m filling a Tree in 2 steps: first the roots and second de subitems. The following code is for filling the subitems (I do it in this way because is a webservice which provide me the data, I have no option to get all information at once).

    So, I thought to add all subitems to the records array, which has the roots also, and then update de tree. Is it the right way? Is it posible?

    I get the debuggin error when ‘records.Add(records2)’.

    Thanks in advance!!
    Elia

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    var records = dataAdapter.records;
    var length = records.length;

    for (var i = 0; i < length; i++) {

    var record = records[i];

    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘assemblyGroupNodeId’ },
    { name: ‘parentNodeId’ },
    { name: ‘assemblyGroupName’ },
    { name: ‘hasChilds’ }
    ],
    id: ‘assemblyGroupNodeId’
    };

    $.ajax({
    type: “POST”,
    url: “Data.aspx/getLinkedChildNodesAllLinkingTarget”,
    data: ‘{“vehicle”: ‘ + vehicle + ‘, “parentNode”: ‘ + record.assemblyGroupNodeId + ‘ }’,
    async: true,
    contentType: “application/json; charset=utf-8”,
    dataType: “json”,
    success: function (msg) {

    source.localdata = msg.d;

    var dataAdapter2 = new $.jqx.dataAdapter(source);
    dataAdapter2.dataBind();
    var records2 = dataAdapter2.getRecordsHierarchy(‘assemblyGroupNodeId’, ‘parentNodeId’, ‘items’, [{ name: ‘assemblyGroupName’, map: ‘label’}]);

    //Insertar aquests records
    records.Add(records2);

    },
    error: function (mens) {
    alert(mens);
    }

    });
    }
    $(‘#jqxWidget’).jqxTree({ source: records, theme: theme });

    Adding subitems in dataAdapter.records #7058

    Peter Stoev
    Keymaster

    Hi Elia,

    I’ve prepared a small sample for you based on our jqxTree’s binding to json sample. The modified sample uses 2 dataadapters similar to your scenario and merges the second dataAdapter’s records into the first dataAdapter’s records before populating the jqxTree.

    Here’s the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = '';
    var data = [
    { "id": "2",
    "parentid": "1",
    "text": "Hot Chocolate"
    }, {
    "id": "3",
    "parentid": "1",
    "text": "Peppermint Hot Chocolate"
    }, {
    "id": "4",
    "parentid": "1",
    "text": "Salted Caramel Hot Chocolate"
    }, {
    "id": "5",
    "parentid": "1",
    "text": "White Hot Chocolate"
    }, {
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1"
    }, {
    "id": "6",
    "text": "Espresso Beverage",
    "parentid": "-1"
    }, {
    "id": "7",
    "parentid": "6",
    "text": "Caffe Americano"
    }, {
    "id": "8",
    "text": "Caffe Latte",
    "parentid": "6"
    }, {
    "id": "9",
    "text": "Caffe Mocha",
    "parentid": "6"
    }, {
    "id": "10",
    "text": "Cappuccino",
    "parentid": "6"
    }, {
    "id": "11",
    "text": "Pumpkin Spice Latte",
    "parentid": "6"
    }]
    var data2 = [{
    "id": "12",
    "text": "Frappuccino",
    "parentid": "-1"
    }, {
    "id": "13",
    "text": "Caffe Vanilla Frappuccino",
    "parentid": "12"
    }, {
    "id": "15",
    "text": "450 calories",
    "parentid": "13"
    }, {
    "id": "16",
    "text": "16g fat",
    "parentid": "13"
    }, {
    "id": "17",
    "text": "13g protein",
    "parentid": "13"
    }, {
    "id": "14",
    "text": "Caffe Vanilla Frappuccino Light",
    "parentid": "12"
    }];
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'id' },
    { name: 'parentid' },
    { name: 'text' }
    ],
    id: 'id',
    localdata: data
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    dataAdapter.dataBind();
    source.localdata = data2;
    var dataAdapter2 = new $.jqx.dataAdapter(source);
    dataAdapter2.dataBind();
    $.each(dataAdapter2.records, function () {
    dataAdapter.records.push(this);
    });
    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
    $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>
    </body>
    </html>

    Hope this helps.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Adding subitems in dataAdapter.records #7089

    Elia
    Member

    Thank you very much!

    It was exactly what I needed. I’m new in jquery, javascript, ajax and json… however jqwidgets tutorials and APIs are great and help me a lot!

    Thanks Peter!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.