jQuery UI Widgets › Forums › Grid › Edit Imagebutton in Grid
This topic contains 9 replies, has 5 voices, and was last updated by saurabhshah 7 years, 9 months ago.
-
AuthorEdit Imagebutton in Grid Posts
-
How can i display an edit mage icon on Edit button of Jqwidget Grid
Hello basumrinmoy,
Please check out the forum topic Grid with a menu column where there is an example that might be helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for quick reply. But I want Image button as a column in Grid. In your Edit Button in Grid demo button text is edit I want an image replace of edit text.
Hi basumrinmoy,
Here is an example:
<!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.8.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="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", 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 failder. commit(true); } }; // initialize the input fields. $("#firstName").addClass('jqx-input'); $("#lastName").addClass('jqx-input'); $("#product").addClass('jqx-input'); $("#firstName").addClass('jqx-rc-all'); $("#lastName").addClass('jqx-rc-all'); $("#product").addClass('jqx-rc-all'); $("#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); $("#firstName").addClass('jqx-rc-all-' + theme); $("#lastName").addClass('jqx-rc-all-' + theme); $("#product").addClass('jqx-rc-all-' + 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( { width: 620, source: dataAdapter, theme: theme, pageable: true, autoheight: true, 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', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Edit', datafield: 'Edit', width: 50, columntype: 'number', cellsrenderer: function () { return '<div style="width: 100%"><img src="../../../Custom Images/pencil.png" style="margin-left: 25%" /></div>'; } }, ] }); // 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'); } }); $("#jqxgrid").on("cellclick", function (event) { var column = event.args.column; var rowindex = event.args.rowindex; var columnindex = event.args.columnindex; if (columnindex == 5) { // open the popup window when the user clicks a button. editrow = 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'); }; }); }); </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,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you for your reply
Hi I have tried add a column with an image as demonstrated here in this thread. I have got it to work, but the issue I’m having is each time I click in the grid I get X number of clicks. So the first time I get 1 click and the second time I get 2 click events etc. Does anybody have any thoughts on how to stop this or what I maybe doing wrong?
Hi daktmacfan,
If you get X numbers of clicks, then you must be binding to the cellclick event X number of times. My suggestion is to check your code for that and bind only once to the event.
Best Regards,
Peter StoevNever mind I figured out what I was doing wrong. I was handling the cellclick event each time that I was loading data into the grid. I’m very green at this MCC/jquery programming
Hi daktmacfan,
Thanks for the update.
Best Regards,
Peter StoevjQWidgets team
http://www.jqwidgets.com/Hi Peter,
I have just started using jqx components on my application.
I have a question right here.$(“#jqxgrid”).on(“cellclick”, function (event) {
var column = event.args.column;
var rowindex = event.args.rowindex;
var columnindex = event.args.columnindex;
if (columnindex == 5)right here, column index is getting changed when i group by any column, so for example ,if I drag first column to group by, column index becomes 4, for button column. How to resolve this issue?
-
AuthorPosts
You must be logged in to reply to this topic.