jQuery UI Widgets › Forums › Grid › column header's tooltip

Tagged: , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 10 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    column header's tooltip Posts
  • November 21, 2014 at 12:13 pm column header's tooltip #63136

    viji
    Participant

    Hi,

    How to set tooltip for column headers other than the header text.
    For ex, ‘ID’ as Column Header text and ‘Description’ as tooltip for that Column Header.

    Thanks,
    Viji

    November 21, 2014 at 1:22 pm column header's tooltip #63139

    Nadezhda
    Participant

    Hello Viji,

    Please, find the following example which shows how to set tooltip content on each column in jqxGrid. You can achieve it with ‘rendered’ callback function that is called when the column is rendered.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.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 () {
            var url = "../sampledata/orders.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url,
                sortcolumn: 'ShipName',
                sortdirection: 'asc'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                height: 450,
                source: dataAdapter,
                sortable: true,
                altrows: true,
                columns: [
                  {
                      text: 'Ship Name', datafield: 'ShipName', width: 250,
                      rendered: function (element) {
                          $(element).jqxTooltip({ position: 'mouse', content: "Ship Name tooltip!" });
                      }
                  },
                  {
                      text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd',
                      rendered: function (element) {
                          $(element).jqxTooltip({ position: 'mouse', content: "Shipped Date tooltip!" });
                      }
                  },
                  { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.