ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: bsolteam on August 01, 2014, 06:25:44 pm

Title: Tooltip in pq-grid-header
Post by: bsolteam on August 01, 2014, 06:25:44 pm

Hi,
     I want to show a tooltip when I click the Header part. Is there any event is available for header click. Am not seeing any where. I have used the following code to get the alert for clicking the header part.

Code: [Select]

$( "#grid_json .pq-grid-header-table  tbody tr:nth-child(2) td.pq-grid-col:nth-child(2)" ).click(function() {
alert("Header");
}); This is working for second header. But this is not working on data is remote. For local data only it is working. I need for data location is remote.  Also I need a proper thing to know which column header am selecting.  Please give some ideas.

Title: Re: Tooltip in pq-grid-header
Post by: paramvir on August 04, 2014, 08:22:55 pm

Tooltips are displayed on mouseover and they can be defined in the markup of column.title property as

colModel: [ { title: '<span title = "tooltip title">Column Title</span>' , other properties ...  }]

Title: Re: Tooltip in pq-grid-header
Post by: argo on October 31, 2015, 01:47:44 am

This doesn't allow the entire header to have a tooltip, only the text itself. For example, if the column header is two rows in size but one column is only a single row of text, the entire blank area below the header text won't trigger the tooltip.

Is there a way to add a tooltip to the entire column header rather than just the content within the title?

Title: Re: Tooltip in pq-grid-header
Post by: paramvir on November 02, 2015, 12:45:34 pm

Tooltips can be added to entire header cells in refreshHeader event.

Code: [Select]

refreshHeader: function(){               
  var $cell = $(this).pqGrid( 'getCellHeader' , {colIndx: 0});
          //var $cell = this.getCellHeader( {colIndx: 0}); //for version 3.2.0
          $cell.attr("title", "my tooltip").tooltip();
},

Example: http://jsfiddle.net/9tL0xr06/1/

Title: Re: Tooltip in pq-grid-header
Post by: argo on November 02, 2015, 10:01:56 pm

Awesome. Thanks!