jQuery UI Widgets Forums TreeGrid ask question before delete item

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • ask question before delete item #69564

    lolodev
    Participant

    hi,

    is it possible to ask a question before to delete an item ??

    thanks

    ask question before delete item #69574

    Dimitar
    Participant

    Hi lolodev,

    Here is an example, based on the demo Inline Row. We hope it is helpful to you.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxdatatable.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                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.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.
                        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.
                    }
                });
    
                var rowKey = null;
    
                $("#treeGrid").jqxTreeGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    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 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;
    
                            }
                        }
    
                        $("#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 () {
                            $('#jqxwindow').jqxWindow('open');
                        });
                    },
                    columns: [
                      { text: 'Location Name', dataField: "Name", align: 'center', width: '50%' },
                      { text: 'Population', dataField: "Population", align: 'right', cellsAlign: 'right', width: '50%' }
                    ]
                });
    
                var rowToDelete = undefined;
                $('#jqxwindow').jqxWindow({ width: 200, height: 100, autoOpen: false, isModal: true, cancelButton: $('#no') });
                $('#yes, #no').jqxButton({ width: 50 });
                $('#yes').click(function () {
                    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);
                    }
                    $('#jqxwindow').jqxWindow('close');
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="treeGrid">
        </div>
        <div id='jqxwindow'>
            <div>
                Delete a row</div>
            <div>
                <table>
                    <tr>
                        <td colspan="2">
                            Are you sure you wish to delete this row?
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">
                            <button id="yes">
                                Yes</button>
                        </td>
                        <td style="text-align: center;">
                            <button id="no">
                                No</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.