jQWidgets Forums

Tagged: Column Header, grid, Tooltip

This topic contains 2 replies, has 2 voices, and was last updated by frida 6 years, 2 months ago.

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

Author

Tooltip not shown on narrow column header Posts

February 11, 2019 at 11:46 am Tooltip not shown on narrow column header #103924

February 12, 2019 at 10:05 pm Tooltip not shown on narrow column header #103940

Peter Stoev

Keymaster

Hi frida,

How do you attach tooltips to column headers in our Data Grid?

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

February 18, 2019 at 12:43 pm Tooltip not shown on narrow column header #104024

frida

Participant

Hello,

I send the code.
On “Units In Stock” column the tooltip is not displayed.

Thank you,
Frida

<!DOCTYPE html>

<html lang="en">

<head>

    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 

    </title>

    <meta name="description" content="JavaScript Grid with rich support for Data Filtering, Paging, Editing, Sorting and Grouping" />

    <link rel="stylesheet" href="jqx.base.css" type="text/css" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />

    <script type="text/javascript" src="jquery-1.12.4.js"></script>

    <script type="text/javascript" src="jqxcore.js"></script>

    <script type="text/javascript" src="jqxdata.js"></script> 

    <script type="text/javascript" src="jqxbuttons.js"></script>

    <script type="text/javascript" src="jqxscrollbar.js"></script>

    <script type="text/javascript" src="jqxmenu.js"></script>

    <script type="text/javascript" src="jqxcheckbox.js"></script>

    <script type="text/javascript" src="jqxlistbox.js"></script>

    <script type="text/javascript" src="jqxdropdownlist.js"></script>

    <script type="text/javascript" src="jqxgrid.js"></script>

    <script type="text/javascript" src="jqxgrid.sort.js"></script> 

    <script type="text/javascript" src="jqxgrid.pager.js"></script> 

    <script type="text/javascript" src="jqxgrid.selection.js"></script> 

    <script type="text/javascript" src="jqxgrid.edit.js"></script> 
	<script type="text/javascript" src="demos.js"></script>
    <script type="text/javascript" src="jqxtooltip.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var url = "products.xml";

            // prepare the data

            var source =

            {

                datatype: "xml",

                datafields: [

                    { name: 'ProductName', type: 'string' },

                    { name: 'QuantityPerUnit', type: 'int' },

                    { name: 'UnitPrice', type: 'float' },

                    { name: 'UnitsInStock', type: 'float' },

                    { name: 'Discontinued', type: 'bool' }

                ],

                root: "Products",

                record: "Product",

                id: 'ProductID',

                url: url

            };

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {

                if (value < 20) {

                    return '<span style="margin: 4px; margin-top:8px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';

                }

                else {

                    return '<span style="margin: 4px; margin-top:8px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';

                }

            };

            var tooltiprenderer = function (element) {

                //$(element.parent()).jqxTooltip({ position: 'mouse', content: $(element).text() });
                $(element).jqxTooltip({ position: 'mouse', content: $(element).text() });
                return;

            };

            var dataAdapter = new $.jqx.dataAdapter(source, {

                downloadComplete: function (data, status, xhr) { },

                loadComplete: function (data) { },

                loadError: function (xhr, status, error) { }

            });

            // initialize jqxGrid

            $("#grid").jqxGrid(

            {

                width: "700px",

                source: dataAdapter,                

                pageable: true,

                autoheight: true,

                sortable: true,

                altrows: true,

                enabletooltips: true,

                editable: true,

                selectionmode: 'multiplecellsadvanced',

                columns: [

                    { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', rendered: tooltiprenderer, width: 50 },

                    { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', rendered: tooltiprenderer, width: 200 },

                    { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', rendered: tooltiprenderer, width: 200 },

                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, rendered: tooltiprenderer, width: 30 },

                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', rendered: tooltiprenderer }

                ],

                columngroups: [

                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }

                ]

            });

        });

    </script>

</head>

<body class='default'>

    <div id="grid">

    </div>

</body>

</html>

Author

Posts

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

You must be logged in to reply to this topic.