jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Popup editing option in row click › Reply To: Popup editing option in row click
Hi Naga,
The following sample opens a Popup Edit Window when the user selects a cell. The sample is a modification of our Popup Edit demo.
<!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.7.1.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="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; // initialize jqxGrid $("#jqxgrid").jqxGrid( { source: dataAdapter, theme: theme, pageable: true, autoheight: true, selectionmode: 'singlecell', columns: [ { 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' } ] }); $("#jqxgrid").bind('cellselect', function (event) { // open the popup window when the user clicks a button. editrow = event.args.rowindex; 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'); }); // initialize the popup window and buttons. $("#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="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,
Peter Stoev
jQWidgets Team
http://www.jqwidgets.com