jQWidgets Forums

Tagged: datagrid with column tooltips, jqwidgets tooltips

This topic contains 5 replies, has 2 voices, and was last updated by Klaus H 11 years, 9 months ago.

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

Author

jqxGrid combined with jqxTooltip Posts

August 21, 2013 at 3:26 pm jqxGrid combined with jqxTooltip #27301

Participant

Hello,

I would like to use a jqxTooltip combined with the jqxGrid to display a static text at some columns (e.g. the header). But as far as I can see the generated column headers don’t have an id I could use for the header and I don’t see a way in the API to set one.

I also tried another approach:

$('#columntablejqxGrid').children()
and
$('#columntablejqxGrid').find('.jqx-grid-column-header')

But both return an empty array and I am not sure why. As far as I can tell, they should return the column headers and I should be able to work with that.

So you have any idea how to implement the tooltips or is there a standard way I overlooked?

Kind regards
Klaus

August 21, 2013 at 3:51 pm jqxGrid combined with jqxTooltip #27302

Klaus H

Participant

Okay, my first mistake was not putting the source code in the read function of the grid.

After doing that, I can find $(‘#columntablejqxGrid’) but I still cannot add a Tooltip to a child.

August 21, 2013 at 7:26 pm jqxGrid combined with jqxTooltip #27316

Peter Stoev

Keymaster

Hi Klaus,

Please, find below a small sample which illustrates how to use jqxTooltip with jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/beverages.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var jqxGridToolTips = {
                "Name": "Name",
                "Beverage Type": "Beverage Type",
                "Calories": "Calories",
                "Total Fat": "Total Fat",
                "Protein": "Protein"
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                ready: function()
                {
                    $("#jqxgrid .jqx-grid-column-header").each(function () {
                        if (jqxGridToolTips[$(this).text()])
                            $(this).jqxTooltip({ position: 'mouse', content: jqxGridToolTips[$(this).text()] });
                    });
                },
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

August 22, 2013 at 7:32 am jqxGrid combined with jqxTooltip #27361

Klaus H

Participant

Hello Peter,

your example works like a charm, but once I copy the logic to my grid, the tooltips are not shown anymore. I used the same jQuery version and the same jqWidgets Version for both. The tooltips are attached, I can see them in the html view, but the event to display them aren’t triggered when I move the mouse over my grid column header. I also stripped my grid of all additional functionality like filtering and paging, but the tooltips always stay invisible.

I even used a div with an id as the text property of my grid column and attached a tooltip to it, the tooltip shows up in the html but again is not triggered. A second tooltip that I attached to another element just to be sure that tooltip is working in my environment worked. So it’s a mystery to me right now, might have something to do with my html/css. I’ll try another solution.

Thanks for your help.

August 22, 2013 at 7:36 am jqxGrid combined with jqxTooltip #27368

Peter Stoev

Keymaster

Hi Klaus H,

If you do some kinds or re-rendering in the Grid i.e Dynamic Re-binding or Server Processing, you may need to use the “rendered” callback instead of “ready” in your scenario.

Best Regards,
Peter Stoev

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

August 22, 2013 at 8:15 am jqxGrid combined with jqxTooltip #27383

Klaus H

Participant

Hello Peter,

thank you very much, that solved the problem.

Kind Regards
Klaus

Author

Posts

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

You must be logged in to reply to this topic.