jQWidgets Forums

Tagged: column, grid, Header, jqxgrid, renderer, Tooltip

This topic contains 5 replies, has 3 voices, and was last updated by Christophe Opoix 12 years, 1 month ago.

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

Author

Tool Tip for Column Posts

October 25, 2012 at 2:00 pm Tool Tip for Column #10039

SRK

Participant

Hi,

There was a property to set Tool tip for Grid Row, similar way could we able to set tool tip for Grid column?.

Regards,
/SRK

October 26, 2012 at 5:44 am Tool Tip for Column #10051

Dimitar

Participant

Hello SRK,

In jqxGrid, tooltips are available to cells after the enabletooltips property is set to true. If by columns you mean column headers, tooltips are not shown there by default, so you need to set the renderer column property. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Tab-delimited text
        also known as tab-separated values (TSV).</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var url = '../sampledata/homeprices.txt';
            // prepare the data
            var source =
            {
                datatype: "tab",
                datafields: [
                    { name: 'Year', type: 'int' },
                    { name: 'HPI', type: 'float' },
                    { name: 'BuildCost', type: 'float' },
                    { name: 'Population', type: 'float' },
                    { name: 'Rate', type: 'float' }
                ],
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var headerTooltipRenderer = function (columnHeaderElement) {
                return "<div style='margin-left: 10px; margin-top: 5px;' title='" + columnHeaderElement + "'>" + columnHeaderElement + "</div>";
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columnsresize: true,
                theme: theme,
                enabletooltips: true,
                columns: [
                  { text: 'Year', datafield: 'Year', width: 100, minwidth: 90, maxwidth: 150, renderer: headerTooltipRenderer },
                  { text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer },
                  { text: 'Build Cost', datafield: 'BuildCost', cellsformat: 'f2', width: 180, renderer: headerTooltipRenderer },
                  { text: 'Population', datafield: 'Population', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer },
                  { text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100, renderer: headerTooltipRenderer }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

December 19, 2012 at 9:53 am Tool Tip for Column #12569

SRK

Participant

Hi Dimitar,

Thanks for the reply, for the above method tool tip would be displaying for the Text mentioned in the Grid Column like

columns: [
{ text: ‘Year’, …..}

Then Grid Column is diplaying Tool tip as “Year”

But requirement is default display text should be short and on mouse over it should display abbrevation of the text

Ex : Grid Column Name : “US”
And on Mouse over of the “US” column it should display “United States”

is that possible in Jqxgrid?

Regards,
/SRK

January 16, 2013 at 11:02 am Tool Tip for Column #13692

Christophe Opoix

Participant

Hi,

You can pass parameters to functions that return functions, like this :

var headerTooltipRenderer = function(text) {
    return function (columnHeaderElement) {
        return "<div style='margin-left: 10px;margin-top: 5px' title='" + text + "'>" + columnHeaderElement + "</div>";
    };
};

Then define your columns like this :

columns: [
    { text: 'Y', datafield: 'Year', width: 100, minwidth: 90, maxwidth: 150, renderer: headerTooltipRenderer('The Year') },
    { text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer('The HPI') },
    { text: 'Cost', datafield: 'BuildCost', cellsformat: 'f2', width: 180, renderer: headerTooltipRenderer('The Build Cost') },
    { text: 'Pop', datafield: 'Population', cellsformat: 'f2', width: 100, renderer: headerTooltipRenderer('The Population') },
    { text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100, renderer: headerTooltipRenderer('The Rate') }
 ]

January 17, 2013 at 9:47 am Tool Tip for Column #13750

Christophe Opoix

Participant

There is a small problem though.
The tooltip is only displayed on the first part of the column header, the iconscontainer div blocks the tooltip display.

Is there a way to redefine the iconscontainer title or apply the title on the parent div ?

January 17, 2013 at 2:04 pm Tool Tip for Column #13801

Christophe Opoix

Participant

Ok. Managed to get something working this way :

var headerTooltipRenderer = function(text) {
    return function (columnHeaderElement) {
        return "<div class='renderedColumn' style='margin-left: 5px; margin-top: 5px;' title='" + text + "'>" + columnHeaderElement + "</div>";
    }
};

And added this code to the ready function :

$("div .renderedColumn").each(function() { this.parentElement.title = this.title;});

There should be something cleaner though.

Author

Posts

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

You must be logged in to reply to this topic.