Guriddo » Topic: TUTO advanced formatter

TUTO advanced formatter

Guriddo
TUTO advanced formatter

This topic has 8 replies, 2 voices, and was last updated 12 years, 9 months ago by bouks.

Creator

Topic

July 11, 2013 at 12:24 am #81098

bouks

Participant

You can do much more than format the value with the formatter option as see in the doc. Let see with simple examples.

You want to change the css (color, font things…) of a cell in regard of his value.

“i want to have a red color for this cell if my client owe me money”.

{<br />
label: &#39;balance&#39;, name: &#39;balance&#39;, index: &#39;balance&#39;,<br />
formatter: isDebt<br />
}<br />

{

label: 'balance', name: 'balance', index: 'balance',

formatter: isDebt

}

function isDebt(cellValue, options, rowObject) {<br />
if (cellValue !== Math.abs(cellValue)){<br />
options.colModel.classes = &#39;red-color&#39;;<br />
}<br />
}<br />

function isDebt(cellValue, options, rowObject) {

if (cellValue !== Math.abs(cellValue)){

options.colModel.classes = 'red-color';

}

You want to change the css (color, font things…) of a cell in regard of another cell value.

Example “i want to have the background color of the age cell if this is the user anniversary (that is in column birth)”

function isBirth(cellValue, options, rowObject) {<br />
d2 = new Date();<br />
d1 = new Date(rowObject.birth);<br />
var diff = d2.getTime() - d1.getTime();<br />
if (d1.toDateString() === d2.toDateString()) {<br />
options.colModel.classes = &#39;annniversary-background-color&#39;;<br />
}<br />
return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));<br />
}<br />

function isBirth(cellValue, options, rowObject) {

d2 = new Date();

d1 = new Date(rowObject.birth);

var diff = d2.getTime() - d1.getTime();

if (d1.toDateString() === d2.toDateString()) {

options.colModel.classes = 'annniversary-background-color';

}

return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));

}

You have access to the whole row, values and properties.

You want more ? There it is.

$('#' + options.gid).jqGrid…

Enjoy.

PS: This would be awesome if this forum have some kind of tuto and script 'forum'. With code formatting plugin please. 🙂

Creator

Topic

Viewing 8 replies - 1 through 8 (of 8 total)

Author

Replies
July 11, 2013 at 2:04 pm #101207

OlegK
Participant

I think it's not good to use custom formatter to change CSS of the cell. jqGrid provide cellattr for the purpose. One can use additionally rowattr to set CSS on the whole row of grid instead of changing the style of the cell only. It allows to use some formatter (like formatter: “currency”) to format the content of the cell and use cellattr

July 11, 2013 at 2:45 pm #101208

bouks
Participant

I understand your argument.

Why have i been choosing this way :

– i don't want to multiply functions if not necessary.

With isBirth example function using formatter, i don't have to write 3 functions for doing what i'm doing.

– i want to minimize colmodel definition (which is very long and boring 🙂 )

July 11, 2013 at 3:49 pm #101209

OlegK
Participant

Sorry, but I can't full follow your last arguments. You don't need to define can define cellattr or rowattr as anonymous function. You can use function statement or save anonymous function to variable and use the name of function/variable as the value of cellattr or rowattr. In other words you can do almost the same what you do with formatter property, but use cellattr instead. The implementation of cellattr

July 12, 2013 at 5:11 am #101213

bouks
Participant

Sure I'll use templating, Oleg.

For the cellattr I really don't understand.

– formatter can change value but celattr can't

– formatter can change css (by class) as well as cellattr. (also defining class is really better than style)

– The second argument of formatter's function (containing gid) is not in cellattr's arguments. You can't access outside the row.

So i'll be curious to see how you write my birth function, please.

July 12, 2013 at 10:06 am #101216

OlegK
Participant

Sorr, but I don't understand what you don't understand.

If you need to change the style of the cell like in isDebt example then you should use cellattr. The main advantage is that you can still use some predefined formatter for the column. For example you can use formatter: “number” or formatter: “date”. So the number can be displayed with thousand separator and decimal separator defined in locale. You still can access to the whole data of rows using third parameter of cellattr

July 12, 2013 at 2:46 pm #101218

bouks
Participant

Okay Oleg.

I understand you don't want to continue this discussion.

Maybe it's a misunderstood of english foreign langage peoples, maybe it's the view of theory against the practice one, maybe it's due to complicated relations between frenchs and germans ( 😀 )

July 12, 2013 at 4:00 pm #101219

OlegK
Participant

Sorry, but it's not what I would recommend you. Could you post more full code which you use: at least one line of input data is required. You should post the colModel definition too where you use

July 12, 2013 at 4:22 pm #101220

bouks
Participant

Ho. Ho.

That was just a joke about history and politics.

Good luck with your project.
Author

Replies