jQuery Grid Plugin - jqGridForum

Topic RSS

Custom cell tooltips used 'title' property of colModel as the function

31/01/2011
16:50

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello Tony,

I answered on many questions where one asked for the setting of some custom tooltips on the cell. The problem is that sometime it would be very nice to have the custom tooltip which shows information built from some other columns (sometime from the hidden columns) of the same row.

The current implementation of jqGrid has separate implementation of cell formatter and the setting of the title attribute on the cell (see the line 896 (formatCol function) of the grid.base.js. As the small side effects one have sometime empty tooltips (title="") even for some predefined formatter (for the checkbox formatter for example).

To overwrite tooltips one have to set title attribute inside of loadComplete or gridComplete function. The disadvantage of the way is: the changes effects DOM of the page which is much more slowly especial in the case of large grid.

I suggest to introduce the possibility to define title property of colModel not only as boolean like it is now, but also as the function. The function could has parameters close to the custom formatter and it should returns the string which will be used as the value of the title attribute of the corresponding grid cell.

To implement the behavior one should make the following changes in the grid.base.js:

1) the line 1983 should be changed from

if(typeof(ts.p.colModel[i].title) !== "boolean") { ts.p.colModel[i].title = true; }

if(typeof(ts.p.colModel[i].title) !== "boolean" && !$.isFunction(ts.p.colModel[i].title)) {
ts.p.colModel[i].title = true;
}

2) In the line 922 one should add additional parameter srvr to the formatCol call: change the line from

prp = formatCol( pos,irow, v);

prp = formatCol(pos,irow,v,srvr);

3) The line 896 (in the formatCol function)

result += "\"" + (clas !== undefined ? (" class=\""+clas+"\"") :"") + ((cm.title && tv) ? (" title=\""+$.jgrid.stripHtml(tv)+"\"") :"");

one should replace to the following lines

result += "\"" + (clas !== undefined ? (" class=\""+clas+"\"") :"");
var tooltip;
if ($.isFunction(cm.title)) {
   tooltip = cm.title.call(this,tv,rowObject,cm);
} else if (cm.title && tv) {
   tooltip = $.jgrid.stripHtml(tv);
}
if (tooltip) {
   result += " title=\""+tooltip+"\"";
}

In the last changes I included also a small fix which don't create more tooltips with the empty title attribute (title="").

The following demo demonstrate the working of the changes. The first column of the grid create custom tooltip based on the contain of another grid column.

Best regards
Oleg

19/02/2011
15:33

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Oleg,

Thank you very much for the code.

I think that we should think a litte bit deeper.

IMHO the better idea is to realize user defined formatter for the cell properties.

This way we can oprerate not only on title, but on the classes and all allowed attributes for the cell (td).

Moreover this way we will solve the problem for dynamc adding of the cell classes

I'm going to realize it…… let see what will be

Anyway thank you again for all your help and code contributions

Big Thanks Oleg.

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

19/02/2011
15:43

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

This is a great idea Oleg.

Thank you again. The implementation as usual is simple and we can solve this way a lot of problems

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

19/02/2011
16:08

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hi Tony!

I like that you think in the same direction as I am. I thought also about custom cell/column properties, but want not do too large changes because I don't known your opinion about this. Moreover the current implementatin of jqGrid has already implementation of the title attribute and it work even with custom formatters. So from the aspect of compatibility with the existing code I thought to implement first of all a solution for the title attribute and then suggest some more general solution for any attributes or properties.

It is important to define which properties can be used by the general custom properties. For example it should be clear for the developer which use jqGrid how all work if he use for example class property for the column in the colModel and use new custom way which ovewrite the property. I mean that itwould be nice to have less paremeters in colModel and have less situation when one colModel property ovewrite the other property. Nevertheless I think that one can solve the problem or at least include the corresponding part in the documentation. So I think that one general way to set any attribute or property of the column (cells of the column) would be the best way.

A general way for custom classes like changes of color or background color is very typical requirement. In the way one can reduce the requirement to write custom formatter for the date for example if one only need to change the color of some dates.

I am glad, that you like the idea.

Best regards
Oleg

P.S. I have some ideas about functions like dataInit and dataEvents used for the column at the end of grid loaging process (before loadComplete). The main idea is to fill the grid data as text in gridview:true mode, and then make some initializations after interting the text on the page. So one could make some work with DOM elemnts of grid. It could reduce the usage afterInsertRow in the most cases and makting some bindings. In the way one can use unobtrusive style of links or use some custom controls like raty plugin see the demo.

The main implementation idea is to use selectors like in the answer. It would be better that I describe all more exactly in the next post. I will try to do this today or tomorrow.

23/10/2014
19:20

JuanPC

New Member

Members

Forum Posts: 1

Member Since:
23/10/2014

Offline

HelloÂ

I haveÂ an issue with theÂ colmodelÂ cellattr attribute. I use it to set a title/tooltip for each cell in the grid, the tooltipÂ text is a concatenated of 2 other grid's columns.Â

In the code of theÂ formatCol() function, there is a split of the result value:

celp.split(/[^-]style/)

, based on the text: 'style', and i have some rows which have the word 'style' as part of the textÂ used in the tooltip/title, then the data is not displayed in the grid.

IÂ am currently using the version 4.5.2. I have applied some ofÂ the changes to the code suggested by OlegK in a previous reply on this post.Â Then I can set theÂ title attribute of a column as a function, then the text value for the title is not 'treated' in the formatcol function anymore, so the issue does not happen.

I would like to have your advise about this approach, is thisÂ advisableÂ or there could be a better way ?.. maybe in recent versions (4.6.x) this issue is not present, the code of formatCol was already changed

Please advise.

Thanks

Juan PCÂ