Grid tooltip - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: cellhover, component, custom, grid, jqxGrid ;, jqxTooltip, Tooltip

This topic contains 21 replies, has 11 voices, and was last updated by Hristo 5 years, 5 months ago.

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

Author

Grid tooltip Posts

April 30, 2012 at 2:37 pm Grid tooltip #3765

mail2harisha

Member

How to put tool tip to each element of jqgrid?

if grid contains 2 rows and 5 columns, i want to insert unique tooltip to each element i.e., 2 * 5 = 10 elements.

April 30, 2012 at 3:17 pm Grid tooltip #3766

Peter Stoev

Keymaster

The Grid component supports only built-in tooltips. You can enable them by setting the enabletooltips property to true.

For example:

$("#jqxgrid").jqxGrid(
{
    source: dataAdapter,
    enabletooltips: true,
    columns: [
        { text: 'First Name', dataField: 'firstname', width: 100 },
        { text: 'Last Name', dataField: 'lastname', width: 100 },
        { text: 'Product', dataField: 'productname', width: 180 },
        { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
    ]
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 1, 2012 at 11:28 pm Grid tooltip #3795

mail2harisha

Member

But our requirement is, we have to insert tooltip to each column of every row and tooltip will be different to each other. Also, the value of tooltip for each row will be retrieved from server and will not be available while declaring the jqgrid.

Example:

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    //create tooltip for this element, tooltip would be = value + "" + row
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsrenderer: cellsrenderer },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsrenderer: cellsrenderer, cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

May 2, 2012 at 4:23 am Grid tooltip #3796

Peter Stoev

Keymaster

As you are using custom cells rendering, you can provide a tooltip by setting the title attribute to the returned HTML string.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 2, 2012 at 9:28 am Grid tooltip #3804

mail2harisha

Member

Thanks Peter. Its working.

December 12, 2013 at 9:39 am Grid tooltip #46395

fabbiob

Participant

Hello and thanks in advice

Is now possible to create complex tooltip on grid cell?

Sadly i need to do that.
if not is there any way to catch the rendered event on grid cell and manage manually the creation of the tooltip?

regards

Fabio

December 12, 2013 at 11:17 am Grid tooltip #46399

Peter Stoev

Keymaster

Hi Fabio,

The feature is still not implemented, but there’s at least a workaround since ver. 3.0.4.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <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.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> 

    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();

            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];

            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];

            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];

            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];

            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);

                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;

                data[i] = row;
            }

            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' },
                    { name: 'total', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            // create tooltip.
            $("#jqxgrid").jqxTooltip();
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                selectionMode: 'singlecell',
                columnsresize: true,
                // trigger cell hover.
                cellhover: function (element, pageX, pageY)
                {
                    // update tooltip.
                    $("#jqxgrid").jqxTooltip({ content: element.innerHTML });
                    // open tooltip.
                    $("#jqxgrid").jqxTooltip('open', pageX + 15, pageY + 15);
                },
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 12, 2013 at 1:19 pm Grid tooltip #46413

fabbiob

Participant

thanks peter for your fast answer
Is there any way to manage the event just on some cell?
due to the fact that event is fired on every cell in the grid,
does the workaround work also for cellclick?

thanks again
fabio

December 12, 2013 at 1:29 pm Grid tooltip #46415

Peter Stoev

Keymaster

Hi Fabio,

The “element” param is the “element” under the mouse cursor. That means that you can check whether to display or not a tooltip for that “element” using a custom logic.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 12, 2013 at 2:02 pm Grid tooltip #46418

fabbiob

Participant

thanks for the explanation,

i successfully implemented onclick on grid.
Can i force the tooltip to open on click and not on over?

fabio

February 11, 2014 at 8:43 am Grid tooltip #49304

mallepaddi

Participant

cellhover: function (element, pageX, pageY)
{
// update tooltip.
$(“#jqxgrid”).jqxTooltip({ content: element.innerHTML });
// open tooltip.
$(“#jqxgrid”).jqxTooltip(‘open’, pageX + 15, pageY + 15);
},

from above code .. how do i get actual content of “cell”, i need to edit for showing it as a tooltip and any idea on applying styling.

Thanks

February 12, 2014 at 7:24 am Grid tooltip #49355

Dimitar

Participant

Hello mallepaddi,

Your question has been answered in the forum topic tooltip styling for a grid column.

Best Regards,
Dimitar

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

February 13, 2014 at 1:21 am Grid tooltip #49420

mallepaddi

Participant

From above advice, I’m using custom cellrendering and coucl you please help on how to set title attribute to an element ?

cellsrenderer:qtyCell……

function qtyCell (row, column, value, defaultHtml) {
var element = $(defaultHtml);
element.css(‘color’, ‘#AAAAAA’);
element.title = ‘Hello ………’;

return element[0].outerHTML;
}

it doesn’t work,

Thanks

February 13, 2014 at 1:22 am Grid tooltip #49421

mallepaddi

Participant

it works like ..element[0].title = ‘Hello ………’;

Thanks

December 19, 2014 at 10:17 pm Grid tooltip #64502

letos07

Participant

mallepaddi,please can you give me all code which decide this problem?

Author

Posts

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

You must be logged in to reply to this topic.