jQuery UI Widgets › Forums › Navigation › Tree › Knockout example with tree

Tagged: ,

This topic contains 4 replies, has 3 voices, and was last updated by  Peter Stoev 12 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Knockout example with tree Posts
  • June 7, 2012 at 9:36 pm Knockout example with tree #4703

    grendo
    Member

    Hi,

    does anyone have a sample how to use the tree control with knockout ?

    June 8, 2012 at 8:32 am Knockout example with tree #4709

    Peter Stoev
    Keymaster

    Hi grendo,

    What kind of sample are you looking for? Adding/Removing Tree Items with Knockout or something else?

    Looking forward to your reply.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    June 9, 2012 at 10:02 pm Knockout example with tree #4742

    grendo
    Member

    What I am trying to do is

    I have a java script model of system that runs a series of tasks on the server. The object structure looks something like

    Job
    Tasks
    Task 1
    Task 2
    Job
    Tasks
    Task3
    Task4

    Each task has various properties, like success, error log, which I use on the tree view nodes

    I regularly update the model using a ajax call

    I want to bind this model to the tree view control and when I update properties in the model have knockout update the tree view.

    Any basic example of binding a model to the tree view via knockout would get me going.

    Thanks

    June 10, 2012 at 12:26 am Knockout example with tree #4748

    Kynao
    Participant

    I’m interested into this too.
    Your documention with PHP integration is excellent and this would be interesting to add this case to the doc.

    June 10, 2012 at 12:19 pm Knockout example with tree #4769

    Peter Stoev
    Keymaster

    This sample demonstrates how to add new Items to the jqxTree widget with Knockout.

    <!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/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/knockout-2.1.0.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/jqxtree.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">
            $(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"
                    }, {
                        "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"
                    }]
                var id = 18;
                var ViewModel = function (data) {
                    this.items = ko.observableArray(data);
                    this.add = function () {
                        this.items.push({
                            "id": id++,
                            "text": "Item" + id,
                            "parentid": "1"
                        });
                    };
                };
                var updateTree = function (data) {
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'id' },
                            { name: 'parentid' },
                            { name: 'text' }
                        ],
                        id: 'id',
                        localdata: data
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    dataAdapter.dataBind();
                    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                    $('#jqxTree').jqxTree({ source: records});
                }
                ko.bindingHandlers.tree = {
                    update: function (element, valueAccessor) {
                        var options = valueAccessor() || {};
                        updateTree(options.items());
                    }
                }
                ko.applyBindings(new ViewModel(data));
            });
        </script>
    </head>
    <body class='default'>
        <div data-bind="foreach: items, tree: {items:items}" id='tree'>
            <div id="jqxTree"></div>
        </div>
        <button data-bind="click: add">
            Add Item</button>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.