jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid with a menu column
Tagged: grid menu context, jqxgrid
This topic contains 2 replies, has 2 voices, and was last updated by Mark 12 years, 9 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorGrid with a menu column Posts
-
Hi,
I would like to put a menu as the first column on the grid as an icon, and when clicked it will display options (such as delete, edit etc) for the row on which the icon was clicked. I have looked through the documentation and forum but cannot see any example of this – the only reference was columntypes of checkbox or dropdown. Is this possible and if so any pointers would be greatly appreciated.
Hello Mark,
Here is an example that answers your question:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes click the 'Cancel' button in the popup dialog.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../scripts/jquery-1.7.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/gettheme.js"></script> <script type="text/javascript" src="../demos/jqxgrid/generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; // 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, theme: theme, decimalDigits: 0, spinButtons: true }); $("#price").jqxNumberInput({ width: 150, height: 23, theme: theme, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; var imagerenderer = function () { return '<img style="margin-left: 5px;" src="../images/icon-right.png"/>'; } // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, columns: [ { text: 'Edit', datafield: 'edit', width: 50, cellsrenderer: imagerenderer }, { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 190 }, { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' }, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' } ] }); // bind cellclick to grid $("#jqxgrid").bind('cellclick', function (event) { if (event.args.columnindex == 0) { var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); editrow = event.args.rowindex; var rowsheight = $("#jqxgrid").jqxGrid('rowsheight'); var top = $("#jqxgrid").offset().top + (2 + editrow) * rowsheight; var left = $("#jqxgrid").offset().left; $("#jqxmenu").jqxMenu('open', left + 5 + scrollLeft, top + 5 + scrollTop); }; }); // bind itemclick to menu $("#jqxmenu").bind('itemclick', function (e) { var ET = $(e.args).text(); if (ET == "Edit") { // open the popup window when the user clicks Edit. var offset = $("#jqxgrid").offset(); $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#firstName").val(dataRecord.firstname); $("#lastName").val(dataRecord.lastname); $("#product").val(dataRecord.productname); $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity }); $("#price").jqxNumberInput({ decimal: dataRecord.price }); // show the popup window. $("#popupWindow").jqxWindow('show'); } else if (ET == "Delete") { // delete the row if the user clicks Delete var rowid = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('deleterow', rowid); }; $("#jqxmenu").jqxMenu('close'); }); // initialize the menu, popup window and buttons. var contextMenu = $("#jqxmenu").jqxMenu({ autoCloseOnClick: false, width: '100px', height: '60px', autoOpenPopup: false, mode: 'popup' }); $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, 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')) }; $('#jqxgrid').jqxGrid('updaterow', editrow, row); $("#popupWindow").jqxWindow('hide'); } }); }); </script></head><body class='default'> <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='jqxmenu'> <ul> <li>Edit</li> <li>Delete</li> </ul> </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></body></html>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/Excellent Dimitar – I have just tested this and it was exactly what I was looking for. Thanks again
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.