jQWidgets Forums

jQuery UI Widgets › Forums › TreeGrid › Treegrid hanging

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  phill.oflynn 10 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Treegrid hanging Posts
  • June 6, 2015 at 12:28 am Treegrid hanging #72107

    phill.oflynn
    Participant

    I’m experimenting with a treegrid using the “javascript-tree-grid-inline-editing.htm” example as template. The script hangs after loading the data and displaying the grid but before loading the menu.

    The treegrid works when I follow the “javascript-tree-grid-cell-editing.htm” example as a template. So I know the server side functionality works. (server updates not implemented).

    The php source produces a tab separated output.

    Code below. The commented out lines are used to identify the first hang point which seems to occur at
    addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));

    What have I done wrong? I can’t see it!!

    <?php
    session_start();
    ?>
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=”Description”>Todo List</title>
    <meta name=”description” content=”todo List”>
    <link rel=”stylesheet” href=”../css/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../lib/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxdatatable.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxtreegrid.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxtooltip.js”></script>
    <script type=”text/javascript” src=”../lib/jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var newRowID = null;

    // prepare the data
    var source =
    {
    dataType: “tab”,
    dataFields: [
    { name: “ID”, type: “string” },
    { name: “mpath”, type: “string” },
    { name: “ProjectName”, type: “string” },
    { name: “DueDate”, type: “date” },
    { name: “Priority”, type: “string” },
    { name: “Notes”, type: “string” }
    ],
    hierarchy:
    {
    keyDataField: { name: ‘ID’ },
    parentDataField: { name: ‘mpath’ }
    },
    id: ‘ID’,
    url: ‘./todo_select.php’,
    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.
    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: 850,
    source: dataAdapter,
    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 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);

    toolBar.append(container);
    addButton.jqxButton({cursor: “pointer”, enableDefault: false, disabled: true, 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: true, enableDefault: false, 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’)) {
    // $(“#treeGrid”).jqxTreeGrid(‘expandRow’, rowKey);
    // // add new empty row.
    // $(“#treeGrid”).jqxTreeGrid(‘addRow’, null, {}, ‘first’, rowKey);
    // // select the first row and clear the selection.
    // $(“#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);
    // }
    // });

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

    // }
    // });
    },
    columns: [
    { text: ‘ID’, dataField: “ID”, align: ‘left’, width: ‘10%’},
    { text: ‘PID’, dataField: “mpath”, align: ‘left’, width: ‘10%’},
    { text: ‘Project Name’, dataField: “ProjectName”, align: ‘left’, width: ‘50%’},
    { text: ‘DueDate’, dataField: “DueDate”, align: ‘right’, width: ‘10%’},
    { text: ‘Priority’, dataField: “Priority”, align: ‘center’, width: ‘10%’},
    { text: ‘Notes’, dataField: “Notes”, align: ‘left’, width: ‘10%’}
    ]
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=”treeGrid”></div>
    </body>
    </html>

    June 6, 2015 at 6:36 am Treegrid hanging #72108

    Peter Stoev
    Keymaster

    Hi phill.oflynn,

    Share jsfiddle.net sample which demonstrates an issue. The provided code is not sufficient for testing your scenario. It’s mostly a copy-paste from working demo available online.

    Regards,
    Peter Stoev

    June 8, 2015 at 12:42 pm Treegrid hanging #72162

    phill.oflynn
    Participant

    Yes it is mostly a copy of the online example. So it should work. But it doesn’t.

    The data is generated from a php page and the column names are different. But that’s about it

    Not used jsfiddle. So I’ll have to look into it

    Phill

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

You must be logged in to reply to this topic.