<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
	<title>jQuery Grid Plugin - jqGrid - Topic: Adding title attribute to Grid Table Headers</title>
	<link>http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers</link>
	<description><![CDATA[Grid plugin]]></description>
	<generator>Simple:Press Version 5.7.5.3</generator>
	<atom:link href="http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>OlegK on Adding title attribute to Grid Table Headers</title>
        	<link>http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p15324</link>
        	<category>Feature Request</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p15324</guid>
        	        	<description><![CDATA[<p>Hello Tony,</p>
</p>
<p>what I like in jqGrid mostly is that the development politic is user friendly. I mean, that you implement features which be asked. Because of that, it&#39;s pleasantly to use jqGrid.</p>
</p>
<p>Thanks and best regards<br />Oleg</p>
]]></description>
        	        	<pubDate>Wed, 03 Mar 2010 03:42:36 +0200</pubDate>
        </item>
        <item>
        	<title>tony on Adding title attribute to Grid Table Headers</title>
        	<link>http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p15301</link>
        	<category>Feature Request</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p15301</guid>
        	        	<description><![CDATA[<p>Hello,</p>
<p>Also this is done with option.</p>
<p>More details here:</p>
<p><a href="http://github.com/tonytomov/jqGrid/commit/140d848be56a0d608e581cc02018e833abcece95" rel="nofollow" target="_blank"><a href="http://github.com/tonytomov/jq" rel="nofollow">http://github.com/tonytomov/jq</a>.....33abcece95</a></p>
</p>
<p>Best Regards</p>
<p>Tony</p>
]]></description>
        	        	<pubDate>Tue, 02 Mar 2010 17:14:16 +0200</pubDate>
        </item>
        <item>
        	<title>tony on Adding title attribute to Grid Table Headers</title>
        	<link>http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p14865</link>
        	<category>Feature Request</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p14865</guid>
        	        	<description><![CDATA[<p>Hello,</p>
<p>Sure - will do it.</p>
<p>Regards</p>
<p>Tony</p>
]]></description>
        	        	<pubDate>Wed, 17 Feb 2010 11:43:14 +0200</pubDate>
        </item>
        <item>
        	<title>OlegK on Adding title attribute to Grid Table Headers</title>
        	<link>http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p14824</link>
        	<category>Feature Request</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p14824</guid>
        	        	<description><![CDATA[<p><!--  /* Font Definitions */  @font-face 	{font-family:"MS Mincho"; 	panose-1:2 2 6 9 4 2 5 8 3 4;} @font-face 	{font-family:"MS Mincho"; 	panose-1:2 2 6 9 4 2 5 8 3 4;} @font-face 	{font-family:Calibri; 	panose-1:2 15 5 2 2 2 4 3 2 4;} @font-face 	{font-family:"@MS Mincho"; 	panose-1:2 2 6 9 4 2 5 8 3 4;}  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal 	{margin-top:0cm; 	margin-right:0cm; 	margin-bottom:10.0pt; 	margin-left:0cm; 	line-height:115%; 	font-size:11.0pt; 	font-family:"Calibri","sans-serif";} p 	{margin-right:0cm; 	margin-left:0cm; 	font-size:12.0pt; 	font-family:"Times New Roman","serif";} .MsoChpDefault 	{font-family:"Calibri","sans-serif";} .MsoPapDefault 	{margin-bottom:10.0pt; 	line-height:115%;} @page WordSection1 	{size:595.3pt 841.9pt; 	margin:70.85pt 70.85pt 2.0cm 70.85pt;} div.WordSection1 	{page:WordSection1;} --></p>
<div class="WordSection1">
<p style="margin-top:0cm;margin-right:0cm;margin-bottom:12.0pt;margin-left: 0cm"><span style="font-size:11.0pt;font-family:" lang="EN-US">Hi Klaus!</span></p>
<p style="margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt;margin-left: 0cm"><span style="font-size:11.0pt;font-family:" lang="EN-US">I find your idee very good! I have a lot of tables with a long header and short contain. So I choose a short width for such columns, but place tooltips </span><span style="font-size:11.0pt;font-family:" lang="EN-US">generaly on all headers of jqGrid columns. To do so, I use following own small function:</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">Testportal.setTooltipsOnAllColumnHeaders = <span style="color: blue;">function</span>(grid) {</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; <span style="color:blue">var</span> thd = $(<span style="color: #a31515;">"thead:first"</span>, grid.hdiv).<span style="color: blue;">get</span>(0);</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; <span style="color:blue">var</span> colNames = grid.getGridParam(<span style="color:#A31515">&#39;colNames&#39;</span>);</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; <span style="color:blue">if</span> (colNames !== undefined &#38;&#38; colNames !== <span style="color:blue">null</span>) {</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color:blue">for</span> (<span style="color: blue;">var</span> i = 0; i &#60; colNames.length; i++) {</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color:blue">var</span> name = colNames[i];</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color:blue">if</span> (name !== undefined &#38;&#38; name.length != 0)</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; $(<span style="color:#A31515">"tr th:eq("</span> + i + <span style="color:#A31515">")"</span>, thd).attr(<span style="color:#A31515">"title"</span>, name);</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160;&#160;&#160;&#160;&#160; }</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; }</span></p>
<p class="MsoNormal"><span style="font-size:8.0pt;line-height:115%; font-family:" lang="EN-US">};</span></p>
<p class="MsoNormal" style="margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm;line-height:normal"><span lang="EN-US">Because sometimes </span>it is needed <span lang="EN-US">a tooltip another as column header, I use one more short function</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">Testportal.setTooltipsOnColumnHeader = <span style="color:blue">function</span>(grid,iColumn,text) {</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; <span style="color:blue">var</span> thd = $(<span style="color: #a31515;">"thead:first"</span>, grid.hdiv).<span style="color: blue;">get</span>(0);</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; $(<span style="color:#A31515">"tr th:eq("</span> + iColumn + <span style="color:#A31515">")"</span>, thd).attr(<span style="color: #a31515;">"title"</span>, text);</span></p>
<p class="MsoNormal"><span style="font-size:8.0pt;line-height:115%;font-family:">};</span></p>
<p class="MsoNormal" style="margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm;line-height:normal"><span lang="EN-US">to overwride header&#39;s tooltip.</span></p>
<p class="MsoNormal" style="margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm;line-height:normal"><span lang="EN-US">The idea of Klaus is very good, but the implementation works only if one use &#8220;label&#8221; property of colModel. Corresponds to jqGrid documentation the column header can also come from colNames array or from &#8220;name&#8221; property of colModel. If colNames exists, its names have preference. If no colNames defined, jqGrid fills colNames array itself corresponding on described rules (from &#8220;label&#8221; or &#8220;name&#8221; property) and at the place suggested by Klaus we can use this array (see line 1268 of grid.base.js):</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">for</span><span style="font-size:8.0pt; font-family:" lang="EN-US"> (i = 0; i &#60; <span style="color:blue">this</span>.p.colNames.length; i++) {</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; var</span><span style="font-size:8.0pt; font-family:" lang="EN-US"> curName = ts.p.colNames[i], curModel = ts.p.colModel[i];</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; thead += <span style="color:#A31515">"&#60;th role=&#39;columnheader&#39; class=&#39;ui-state-default ui-th-column ui-th-"</span> + dir + <span style="color:#A31515">"&#39;"</span></span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; + (curName.length != 0 ? <span style="color:#A31515">" title=&#39;"</span> + curName + <span style="color:#A31515">"&#39;"</span> : <span style="color:#A31515">""</span>) + <span style="color:#A31515">"&#62;"</span>;</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; idn = curModel.index &#124;&#124; curModel.name;</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; thead += <span style="color:#A31515">"&#60;div id=&#39;jqgh_"</span> + curModel.name + <span style="color:#A31515">"&#39; "</span> + tdc + <span style="color:#A31515">"&#62;"</span> + curName;</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; <span style="color:blue">if</span> (idn == ts.p.sortname) {</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160;&#160;&#160;&#160;&#160; ts.p.lastsort = i;</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; }</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:" lang="EN-US">&#160;&#160;&#160; thead += imgs + <span style="color:#A31515">"&#60;/div&#62;&#60;/th&#62;"</span>;</span></p>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;text-autospace:none"><span style="font-size:8.0pt;font-family:">}</span></p>
<p class="MsoNormal" style="margin-top:6.0pt;margin-right:0cm;margin-bottom:6.0pt; margin-left:0cm;line-height:normal"><span lang="EN-US">This code works, by the way, also if &#8220;rn&#8221; column exists (rownumbers property is true).</span></p>
<p class="MsoNormal" style="margin-bottom:6.0pt;line-height:normal"><span lang="EN-US">Personally I see only advantages in tooltips on column headers and place there on all my tables. To be more flexible, it would be probably to define additional parameter of grid, which defines wither a tooltips for headers should be set. Another parameter defines whether tooltips should set to any table cell (currently default behavior). It&#8217;s conceivable to introduce a new columnTooltip parameter in the colModel (like currently exists &#8220;label&#8221; property).</span></p>
<p class="MsoNormal" style="margin-bottom:6.0pt;line-height:normal"><span lang="EN-US">I find that in forums exist a lot of questions about tooltips on table cells and headers. Introducing corresponding parameters and easy functions to get/set such tooltips close the discussion and save your Tony time for reading forum and writing responds.</span></p>
<p class="MsoNormal" style="margin-bottom:6.0pt;line-height:normal"><span lang="EN-US">Best regards<br /> Oleg</span></p>
</div>
]]></description>
        	        	<pubDate>Mon, 15 Feb 2010 22:03:39 +0200</pubDate>
        </item>
        <item>
        	<title>tony on Adding title attribute to Grid Table Headers</title>
        	<link>http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p14557</link>
        	<category>Feature Request</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p14557</guid>
        	        	<description><![CDATA[<p>Hello,</p>
<p>Thanks Klaus - I will consider your recommendation.</p>
<p>Best Regards</p>
<p>Tony</p>
]]></description>
        	        	<pubDate>Fri, 05 Feb 2010 11:21:20 +0200</pubDate>
        </item>
        <item>
        	<title>Klaus on Adding title attribute to Grid Table Headers</title>
        	<link>http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p14541</link>
        	<category>Feature Request</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers#p14541</guid>
        	        	<description><![CDATA[<p>Hello!</p>
<p>I&#39;ve added the title-attribute to the grid table header cells (th) so that the browser also displays a tooltip for the headers and not only for the cells.</p>
<p>Note: a special handling for table headers displaying checkboxes requires using the .label attribute (or is there a better way to avoid wrong tooltips for such special header columns)</p>
<p><input type='button' class='sfcodeselect' name='sfselectit1354' value='Select Code' data-codeid='sfcode1354' /></p>
<div class='sfcode' id='sfcode1354'>in grid.base.js:<br />&#160; &#8230;<br />&#160; for(i=0;i&#60;this.p.colNames.length;i++) {<br />&#160;&#160;&#160; <strong>var tooltip = ts.p.colModel[i].label ? &#34; title=&#39;&#34;+ts.p.colModel[i].label+&#34;&#39;&#34; : &#34;&#34;;</strong><br />&#160;&#160;&#160; thead += &#34;&#60;th role=&#39;columnheader&#39; class=&#39;ui-state-default ui-th-column ui-th-&#34;+dir+&#34;&#39;&#34; <strong>+ tooltip + </strong>&#34;&#62;&#34;;<br />&#160; &#8230;</div>
</p>
<p>Kind regards, <br />Klaus.</p>
]]></description>
        	        	<pubDate>Thu, 04 Feb 2010 11:52:34 +0200</pubDate>
        </item>
</channel>
</rss>