jQuery UI Widgets › Forums › Grid › context menu – add row
Tagged: addrow, contextmenu, grid, jqxgrid
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 5 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Authorcontext menu – add row Posts
-
Hi,
I have to add a row within context menu in 2 different way: above and below. How can I do it?Best regards
Hello aldo86,
Please, find below an example which shows how to add a new row via a context menu:
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Right-Click on a jqxGrid Row to open a Context Menu.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.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/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.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="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = generatedata(5); var source = { localdata: data, datatype: "array", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' } ], 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); } }; // initialize the input fields. $("#firstName").addClass('jqx-input'); $("#lastName").addClass('jqx-input'); $("#product").addClass('jqx-input'); $("#firstName").width(150); $("#firstName").height(23); $("#lastName").width(150); $("#lastName").height(23); $("#product").width(150); $("#product").height(23); if (theme.length > 0) { $("#firstName").addClass('jqx-input-' + theme); $("#lastName").addClass('jqx-input-' + theme); $("#product").addClass('jqx-input-' + theme); } $("#quantity").jqxNumberInput({ width: 150, height: 23, decimalDigits: 0, spinButtons: true }); $("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, columns: [ { text: 'First Name', datafield: 'firstname', width: 200 }, { text: 'Last Name', datafield: 'lastname', width: 200 }, { text: 'Product', datafield: 'productname', width: 190 }, { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' }, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' } ] }); // create context menu var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup' }); $("#jqxgrid").on('contextmenu', function () { return false; }); // handle context menu clicks. $("#Menu").on('itemclick', function (event) { var args = event.args; var rowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); if ($.trim($(args).text()) == "add Row") { editrow = rowindex; $("#jqxgrid").jqxGrid('addrow', null, {}); } }); $("#jqxgrid").on('rowclick', function (event) { if (event.args.rightclick) { $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex); var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop); return false; } }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#Cancel").jqxButton({ theme: theme }); $("#Save").jqxButton({ theme: theme }); // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { if (editrow >= 0) { var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(), quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal')) }; var rowid = $("#jqxgrid").jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('updaterow', rowid, row); $("#popupWindow").jqxWindow('hide'); } }); }); </script> </head> <body class='default'> Right Click on the Grid to open the context menu <div id='jqxWidget'> <div id="jqxgrid"></div> <div style="margin-top: 30px;"> <div id="cellbegineditevent"></div> <div style="margin-top: 10px;" id="cellendeditevent"></div> </div> <div id="popupWindow"> <div>Edit</div> <div style="overflow: hidden;"> <table> <tr> <td align="right">First Name:</td> <td align="left"><input id="firstName" /></td> </tr> <tr> <td align="right">Last Name:</td> <td align="left"><input id="lastName" /></td> </tr> <tr> <td align="right">Product:</td> <td align="left"><input id="product" /></td> </tr> <tr> <td align="right">Quantity:</td> <td align="left"><div id="quantity"></div></td> </tr> <tr> <td align="right">Price:</td> <td align="left"><div id="price"></div></td> </tr> <tr> <td align="right"></td> <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td> </tr> </table> </div> </div> <div id='Menu'> <ul> <li>add Row</li> </ul> </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.