jQWidgets Forums

jQuery UI Widgets › Forums › TreeGrid › Adding 1 child to the only line in the treeGrid

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Adding 1 child to the only line in the treeGrid Posts
  • January 17, 2014 at 9:58 pm Adding 1 child to the only line in the treeGrid #48032

    hrc
    Participant

    Hi Peter,

    following is a sample where I have problem when I add a child to the first and only row:

    
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Create, Remove and Update commands in jqxTreeGrid.</title>
    <meta name="description" content="Create, Remove and Update commands - JavaScript Tree Grid Demo | jQWidgets">    
    
    <link rel="stylesheet" type ="text/css" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" />
    <link rel="stylesheet" type="text/css" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.metro.css" />

    <script type="text/javascript" src="/Scripts/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="/Scripts/jqx-all.js"> </script>
    
     
    <script type="text/javascript">
        $(document).ready(function() {
            var theme = "metro";
            var newRowID = null;
            // prepare the data
            var source =
            {
                dataType: "tab",
                dataFields: [
                    { name: "Id", type: "number" },
                    { name: "Name", type: "string" },
                    { name: "ParentID", type: "number" },
                    { name: "Population", type: "number" }
                ],
                hierarchy:
                {
                    keyDataField: { name: 'Id' },
                    parentDataField: { name: 'ParentID' }
                },
                id: 'Id',
                url: '../sampledata/locations_1_row.tsv',
                addRow: function(rowID, rowData, position, parentID, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    alert("parentID: " + parentID + " rowID: " + rowID);
                    commit(true);
                    newRowID = rowID;
                },
                updateRow: function(rowID, rowData, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                },
                deleteRow: function(rowID, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
                //, {
                //loadComplete: function () {
                //    // data is loaded.
                //}
            //});
            $("#treeGrid").jqxTreeGrid(
            {
                width: 500,
                source: dataAdapter,
                theme : "metro",
                pageable: true,
                editable: true,
                showToolbar: true,
                altrows: true,
                //ready: function () {
                //    // called when the DatatreeGrid is loaded.         
                //},
                pagerButtonsCount: 8,
                toolbarHeight: 35,
                renderToolbar: function (toolBar) {
                    var toTheme = function(className) {
                        if (theme == "") return className;
                        return className + " " + className + "-" + theme;
                    };
                    // appends buttons to the status bar.
                    var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
                    var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
                    var addButton = $(buttonTemplate);
                    var infoButton = $(buttonTemplate);
                    var editButton = $(buttonTemplate);
                    var deleteButton = $(buttonTemplate);
                    var cancelButton = $(buttonTemplate);
                    var updateButton = $(buttonTemplate);
                    container.append(addButton);
                    container.append(editButton);
                    container.append(deleteButton);
                    container.append(cancelButton);
                    container.append(updateButton);
                    container.append(infoButton);
                    toolBar.append(container);
                    infoButton.jqxButton({ cursor: "pointer", enableDefault: true, disabled: false, height: 25, width: 25 });
                    infoButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
                    infoButton.jqxTooltip({ position: 'bottom', content: "Info" });
                    addButton.jqxButton({ cursor: "pointer", enableDefault: true, disabled: false, height: 25, width: 25 });
                    addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
                    addButton.jqxTooltip({ position: 'bottom', content: "Add" });
                    editButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false, height: 25, width: 25 });
                    editButton.find('div:first').addClass(toTheme('jqx-icon-edit'));
                    editButton.jqxTooltip({ position: 'bottom', content: "Edit" });
                    deleteButton.jqxButton({ cursor: "pointer", disabled: false, enableDefault: true, height: 25, width: 25 });
                    deleteButton.find('div:first').addClass(toTheme('jqx-icon-delete'));
                    deleteButton.jqxTooltip({ position: 'bottom', content: "Delete" });
                    updateButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false, height: 25, width: 25 });
                    updateButton.find('div:first').addClass(toTheme('jqx-icon-save'));
                    updateButton.jqxTooltip({ position: 'bottom', content: "Save Changes" });
                    cancelButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false, height: 25, width: 25 });
                    cancelButton.find('div:first').addClass(toTheme('jqx-icon-cancel'));
                    cancelButton.jqxTooltip({ position: 'bottom', content: "Cancel" });
                    var updateButtons = function(action) {
                        switch (action) {
                        case "Select":
                            //addButton.jqxButton({ disabled: false });
                            //deleteButton.jqxButton({ disabled: false });
                            editButton.jqxButton({ disabled: false });
                            cancelButton.jqxButton({ disabled: true });
                            updateButton.jqxButton({ disabled: true });
                            break;
                        case "Unselect":
                            //addButton.jqxButton({ disabled: true });
                            //deleteButton.jqxButton({ disabled: true });
                            editButton.jqxButton({ disabled: true });
                            cancelButton.jqxButton({ disabled: true });
                            updateButton.jqxButton({ disabled: true });
                            break;
                        case "Edit":
                            //addButton.jqxButton({ disabled: true });
                            //deleteButton.jqxButton({ disabled: true });
                            editButton.jqxButton({ disabled: true });
                            cancelButton.jqxButton({ disabled: false });
                            updateButton.jqxButton({ disabled: false });
                            break;
                        case "End Edit":
                            //addButton.jqxButton({ disabled: false });
                            //deleteButton.jqxButton({ disabled: false });
                            editButton.jqxButton({ disabled: false });
                            cancelButton.jqxButton({ disabled: true });
                            updateButton.jqxButton({ disabled: true });
                            break;
                        }
                    };
                    var rowKey = null;
                    $("#treeGrid").on('rowSelect', function (event) {
                        var args = event.args;
                        rowKey = args.key;
                        updateButtons('Select');
                    });
                    $("#treeGrid").on('rowUnselect', function (event) {
                        updateButtons('Unselect');
                    });
                    $("#treeGrid").on('rowEndEdit', function (event) {
                        updateButtons('End Edit');
                    });
                    $("#treeGrid").on('rowBeginEdit', function (event) {
                        updateButtons('Edit');
                    });
                    addButton.click(function (event) {
                        if (!addButton.jqxButton('disabled')) {
                            alert("rowKey: " + rowKey);
                            $("#treeGrid").jqxTreeGrid('expandRow', rowKey);
                            // add new empty row.
                            $("#treeGrid").jqxTreeGrid('addRow', null, {}, 'first', rowKey);
                            // select the first row and clear the selection.
                            alert("newRowID: " + newRowID);
                            $("#treeGrid").jqxTreeGrid('clearSelection');
                            $("#treeGrid").jqxTreeGrid('selectRow', newRowID);
                            // edit the new row.
                            $("#treeGrid").jqxTreeGrid('beginRowEdit', newRowID);
                            updateButtons('add');
                        }
                    });
                    cancelButton.click(function (event) {
                        if (!cancelButton.jqxButton('disabled')) {
                            // cancel changes.
                            $("#treeGrid").jqxTreeGrid('endRowEdit', rowKey, true);
                        }
                    });
                    updateButton.click(function (event) {
                        if (!updateButton.jqxButton('disabled')) {
                            // save changes.
                            $("#treeGrid").jqxTreeGrid('endRowEdit', rowKey, false);
                            $("#treeGrid").jqxTreeGrid('updateBoundData');
                        }
                    });
                    editButton.click(function () {
                        if (!editButton.jqxButton('disabled')) {
                            $("#treeGrid").jqxTreeGrid('beginRowEdit', rowKey);
                            updateButtons('edit');
                        }
                    });
                    deleteButton.click(function () {
                        if (!deleteButton.jqxButton('disabled')) {
                            var selection = $("#treeGrid").jqxTreeGrid('getSelection');
                            if (selection.length > 1) {
                                var keys = new Array();
                                for (var i = 0; i < selection.length; i++) {
                                    keys.push($("#treeGrid").jqxTreeGrid('getKey', selection[i]));
                                }
                                $("#treeGrid").jqxTreeGrid('deleteRow', keys);
                            }
                            else {
                                $("#treeGrid").jqxTreeGrid('deleteRow', rowKey);
                            }
                            updateButtons('delete');
                        }
                    });
                    infoButton.click(function () {
                        var rows = $("#treeGrid").jqxTreeGrid('getRows');
                        var rowsData = "";
                        var traverseTree = function (rows) {
                            for (var i = 0; i < rows.length; i++) {
                                rowsData += rows[i].Name + " " + rows[i].Population + "\n";
                                if (rows[i].records) {
                                    traverseTree(rows[i].records);
                                }
                            }
                        };
                        traverseTree(rows);
                        alert(rowsData);
                    });
                },
                columns: [
                  { text: 'Location Name', dataField: "Name", align: 'center', width: '50%' },
                  { text: 'Population', dataField: "Population", align: 'right', cellsAlign: 'right', width: '50%' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
      <div id="treeGrid"></div>
</body>
</html>

    the tab file is populated with just 1 line:

    34 Europe null 731000000.00

    When the app start, I try to add a child to this element (the first and only), after updating the child, everything seems ok, but when I try to collapse the “Europe” element, the new element (the child of Europe) is not collapesed inside Europe element.

    May you help me diagnose this problem?

    Best regards,

    D.

    January 19, 2014 at 3:08 pm Adding 1 child to the only line in the treeGrid #48057

    Peter Stoev
    Keymaster

    Hi hrc,

    The scenario looks like to be not supported. We will look into it for the next version. If you want to dynamically add items, you may consider using the TreeGrid Virtual Mode.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.