jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Tool Tip for Column
This topic contains 5 replies, has 3 voices, and was last updated by Christophe Opoix 12 years, 1 month ago.
-
AuthorTool Tip for Column Posts
-
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,
/SRKHello 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,
DimitarjQWidgets team
http://www.jqwidgets.com/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,
/SRKHi,
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') } ]
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 ?
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.
-
AuthorPosts
You must be logged in to reply to this topic.