jQuery UI Widgets › Forums › TreeGrid › ask question before delete item
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 10 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
hi,
is it possible to ask a question before to delete an item ??
thanks
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.