This topic contains 21 replies, has 11 voices, and was last updated by  Hristo 10 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Grid tooltip Posts
  • 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.

    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

    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' }
    ]
    });
    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

    Grid tooltip #3804

    mail2harisha
    Member

    Thanks Peter. Its working.

    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

    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

    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

    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

    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

    Grid tooltip #49304

    mallepaddi
    Participant

    HI

    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

    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/

    Grid tooltip #49420

    mallepaddi
    Participant

    HI

    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

    Grid tooltip #49421

    mallepaddi
    Participant

    Hi

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

    Thanks

    Grid tooltip #64502

    letos07
    Participant

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

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

You must be logged in to reply to this topic.