jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • February 18, 2019 at 12:43 pm in reply to: Tooltip not shown on narrow column header 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 1 post (of 1 total)