jQuery UI Widgets › Forums › Grid › grid mouseover popup window
Tagged: Button, columntype, grid, jqxgrid, jqxTooltip, jqxwindow, mouseover, Tooltip, window
This topic contains 12 replies, has 3 voices, and was last updated by Dimitar 10 years, 10 months ago.
-
Author
-
How do I open a window above the grid row?
thank you
Hello Serdar,
We recommend you to use jqxTooltip instead, as demonstrated in the forum topic Grid tooltip.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/thank you
Dimitarhello but I have a problem
tooltip does not support gridHi Serdar,
Please check out the example in the following forum post:
http://www.jqwidgets.com/community/topic/grid-tooltip/#post-46399Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
Can you please help out over grid-view button, Ho to add the tool-trip to say L to “LOST” when go over mouse om button.
thanks
-Sumit.Hi Dimitar,
I want to add tool trip on jqxgrid in side button eg. Button text L to Say when go over mouse “LOST”. Please help me here ASAP.
Thanks
-sumitHello sumit,
By button do you mean columntype: ‘button’?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks for reply.
I have added button in side gridview,but i want to add tool-trip on button when user mouse over on button that should be say like “This button for delete the grid rows”
Thanks
-Sumit.i want to add tool trip in below code however i don’t know, Please help me here.
{
text: ”, datafield: ‘Lost’,
columntype: ‘button’, width: ‘5%’,
cellsrenderer: function () {
return “L”;
},
buttonclick: function (row) {
editrow = row;
var dataRecord = $(“#jqxgridCheckout”).jqxGrid(‘getrowdata’, editrow);
$(‘#Lostpopup’).fadeTo(1000, 1);
$(‘#Lostpopup’).show();
//alert(patronID);
//alert(dataRecord.HoldingsID);
HoldingID = ”;
HoldingID = dataRecord.HoldingsID;
GetPatronLostItemInfo(patronID, dataRecord.HoldingsID);
$(‘#LostTitle’).html(dataRecord.Title);
$(‘#LostAuthor’).html(dataRecord.Author);
$(‘#lBarcode’).html(dataRecord.Barcode);
$(‘#LostCallNumber’).html(dataRecord.CallNumber);}
},Hi sumit,
Here is an example, based on the demo Popup Editing:
<!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.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="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.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(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").jqxInput({ theme: theme }); $("#lastName").jqxInput({ theme: theme }); $("#product").jqxInput({ theme: theme }); $("#firstName").width(150); $("#firstName").height(23); $("#lastName").width(150); $("#lastName").height(23); $("#product").width(150); $("#product").height(23); $("#quantity").jqxNumberInput({ spinMode: 'simple', width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true }); $("#price").jqxNumberInput({ spinMode: 'simple', symbol: '$', width: 150, min: 0, height: 23, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, pageable: true, selectionMode: 'singlecell', autoheight: true, cellhover: function (element, pageX, pageY) { // update tooltip. if (!element.button) { $("#jqxgrid").jqxTooltip({ content: element.innerHTML }); } else { $("#jqxgrid").jqxTooltip({ content: "Button to open pop-up" }); }; // open tooltip. $("#jqxgrid").jqxTooltip('open', pageX + 15, pageY + 15); }, 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', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { return "Edit"; }, buttonclick: function (row) { // open the popup window when the user clicks a button. editrow = row; 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('open'); } } ] }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#popupWindow").on('open', function () { $("#firstName").jqxInput('selectAll'); }); $("#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'> <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/Hi Dimitar,
First thanks fro reply.
I want to add the tool trip, not popup here. But scenario is my button is in side of grid-view, i want to add the tool trip over on button.
Hi sumit,
Please try the example and you will see that a tooltip is added to the buttons in the button column (and the other cells) with the following code:
cellhover: function (element, pageX, pageY) { // update tooltip. if (!element.button) { $("#jqxgrid").jqxTooltip({ content: element.innerHTML }); } else { $("#jqxgrid").jqxTooltip({ content: "Button to open pop-up" }); }; // open tooltip. $("#jqxgrid").jqxTooltip('open', pageX + 15, pageY + 15); },
The pop-up is part of the example and you can remove it if you wish.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.