ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: kavyasetty on November 27, 2013, 06:59:11 pm

Title: Message on cell hover
Post by: kavyasetty on November 27, 2013, 06:59:11 pm

is it possible to show a message on cell hover in pqgrid?

Title: Re: Message on cell hover
Post by: paramvir on November 28, 2013, 02:16:27 pm

apply title attr to the desired cell $.attr()

and use jQueryUI tooltip.

Title: Re: Message on cell hover
Post by: kavyasetty on November 28, 2013, 06:29:10 pm

thanks, it worked.

Title: Re: Message on cell hover
Post by: Rufus on February 10, 2016, 04:11:00 am

Is it possible to have a tooltip that is specific to the data in each cell of the table?

For example, if using the table to load test grades (97%, 100%, 80%, etc.), I'd like to show the point value for that test when you hover over the score. So, if a test was worth 50 points and the grade was a 98%, I'd like the tooltip to show "49 Points out of 50".

Is it possible to load this in with the data in some way, similar to how you can load cellCls?

Thanks in advance for any help!

Title: Re: Message on cell hover
Post by: paramvir on February 11, 2016, 10:15:10 am

add title attribute to cell in column.render

Code: [Select]

column.render = function( ui ){
  return '<span title="add title specific to this cell based on ui.rowData">' + ui.cellData + '</span>';
}


Title: Re: Message on cell hover
Post by: Rufus on February 14, 2016, 08:36:27 am

Thanks for the help here but I'm not quite sure what to do with this code....I tried inserting it directly in just before the following:


    var $grid = $("#grid_row_styles").pqGrid(obj);

But I'm not having any luck....

However, based upon the render method that you mentioned, I came across some other info and worked up the following:

   $.extend(obj.colModel[3], {
         render: function (ui) {
            var rowData = ui.rowData; ;
            return "<span title='tooltip'>" + ui.rowData[3] + "</span>";
         }
   } );

This code does get the tooltip to show over all of the cells in that column....but the data in that column now shows as "undefined".

Thoughts on what I'm missing?

Additionally, assuming I can get this code to work, how would I modify it to include info from a hidden column as the tooltip instead of a constant like the "tooltip" I'm currently using?

Many thanks in advance!

Title: Re: Message on cell hover
Post by: Rufus on February 14, 2016, 09:02:29 am

Update..... :) :)

The following:

       $.extend(newObj.colModel[7], {
         render: function (ui) {
            var rowData = "<span title='tooltip test'>" + ui.cellData + "</span>";
            return rowData;
         }
   } );

Gets me the correct data in the cells and the static "tooltip" text when hovering....but I need each tooltip to be the value from another (hidden) column....so here's what I've tried.

       $.extend(newObj.colModel[7], {
         render: function (ui) {
            var rowData = "<span title='" + ui.cellData[6] + "'>" + ui.cellData + "</span>";
            return rowData;
         }
   } );

But this is giving me "undefined" as the tooltip....

Title: Re: Message on cell hover
Post by: paramvir on February 16, 2016, 08:46:53 am

It's ui.rowData[ dataIndx ] instead of ui.cellData[ dataIndx ]