jQuery UI Widgets Forums Grid grid mouseover popup window

This topic contains 12 replies, has 3 voices, and was last updated by  Dimitar 10 years, 10 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • grid mouseover popup window #51959

    Serdar
    Participant

    How do I open a window above the grid row?

    thank you

    grid mouseover popup window #52023

    Dimitar
    Participant

    Hello Serdar,

    We recommend you to use jqxTooltip instead, as demonstrated in the forum topic Grid tooltip.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    grid mouseover popup window #52300

    Serdar
    Participant

    thank you
    Dimitar

    grid mouseover popup window #52320

    Serdar
    Participant

    hello but I have a problem
    tooltip does not support grid

    grid mouseover popup window #52323

    Dimitar
    Participant

    Hi Serdar,

    Please check out the example in the following forum post:
    http://www.jqwidgets.com/community/topic/grid-tooltip/#post-46399

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    grid mouseover popup window #52349

    sumit
    Participant

    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.

    grid mouseover popup window #52357

    sumit
    Participant

    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
    -sumit

    grid mouseover popup window #52380

    Dimitar
    Participant

    Hello sumit,

    By button do you mean columntype: ‘button’?

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    grid mouseover popup window #52428

    sumit
    Participant

    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.

    grid mouseover popup window #52439

    sumit
    Participant

    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);

    }
    },

    grid mouseover popup window #52463

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    grid mouseover popup window #52543

    sumit
    Participant

    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.

    grid mouseover popup window #52546

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.