jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

TUTO advanced formatter

11/07/2013
00:24

bouks

Member

Members

Forum Posts: 30

Member Since:
24/05/2011

Offline

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".

{
    label: 'balance', name: 'balance', index: 'balance',
    formatter: isDebt
}

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) {
    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. 🙂

11/07/2013
14:04

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

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 or rowattr to change CSS style or other attributes (like custom title) of the cell or of the row.

See the answer or the answer for code examples of usage cellattr and this one for the corresponding code examples.

Best regards
Oleg

11/07/2013
14:45

bouks

Member

Members

Forum Posts: 30

Member Since:
24/05/2011

Offline

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 🙂 )

- i want to have access to the whole grid (set alert or message on toolbar for example) and elements

With isBirth example function using formatter, i have quick access to another cell to get its value.

So i use it like a cellInit which i think is not existing.

Maybe you have better example for me ?

What about "This would be awesome if this forum have some kind of tuto and script 'forum'. With code formatting plugin please."

It would be great to complete the documentation.

11/07/2013
15:49

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

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 will be a little other.

The callbacks cellattr and rowattr have optional parameters which you can use to access the content of other items of the row (like rowObject option of custom formatter). So all warks exactly like with costom formatter.

If you have long defintions for columns in colModel I would recommend you to use column templates. See the answer for more information. The feature can dramatically reduce the size of the colModel, makes your code more readable and easy to maintain because you will have less duplicates of the code.

Best regards
Oleg

12/07/2013
05:11

bouks

Member

Members

Forum Posts: 30

Member Since:
24/05/2011

Offline

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.

12/07/2013
10:06

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

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 (rawObject).

If you need to change the content of cell (the content of <td>) then you should use custom formatter.

If you need to include new column which data not exist in the server response, but which can be calculated from content of other columns (like sum from some other columns or like Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25)) expression) you should better do this inside of beforeProcessing callback. In the way you set really only the value (like in isBirth). You can combime the approatch with loadonce: true or use some predefined formatter for the column.

I don't want to cotinue the discussion further. I wrote above my opinion about the best way usage of some jqGrid features.

Regards
Oleg

12/07/2013
14:46

bouks

Member

Members

Forum Posts: 30

Member Since:
24/05/2011

Offline

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 ( 😀 ) ...

Just permit me to post this answer, to not confuse readers and really make them an opinion (i did this for "tuto" purpose) on these different povs. Also I made a mistake in my if statement, i have to correct it for people, so if they copy/paste they have expected result.

Note to jqGrid purists ( 😀 ) : the goal is not using formatter to change cell style. The goal is to do smarter code on some cases.

The following, i recommend (this is for a formatter for an age column) :

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

The following is the way you recommend. See i really try to do like you recommend but i'm not sure such dependencies are really good...

function ageFormatter(cellValue, options, rowObject) {
    d2 = new Date();
    d1 = new Date(rowObject.birth);
    var diff = d2.getTime() - d1.getTime();
    if (d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()) {
        rowObject.myConfigVar.Anniversary = 'lalala';
    }
    return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));
}

function ageCellattr(rowId, value, rowObject, colModel, arrData) {
    if (rowObject.myConfigVar.Anniversary === 'lalala') {
	return 'class="annniversary-background-color"';
    }
}

Unless you have better implementation to tell me.

12/07/2013
16:00

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

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 isBirth and ageFormatter formatter. The better to post small demo and I would modify the demo to the way which I would prefer.

I wrote initially to your post just to help you to find better was of usage some jqGrid features. I did it in a pause in my main job. I don't wanted to start long discussion because of a few time now. I have to provide working solution for the project on which I'm working now next week (it has no relation to jqGrid and to web defelopment at all like the most of my main job). Only because of few time I wanted to stop the discussion.

German is foreign language for me like English. So we can't speak about any "complicated relations between frenchs and germans". By the way I though about some problem only at the time of leaving in Russia. If I visit my friends in France I seen some such problems too, but I never seen any such problem during my living in Germany (last 20 years). German people are really opened to to all foreigner.

12/07/2013
16:22

bouks

Member

Members

Forum Posts: 30

Member Since:
24/05/2011

Offline

Ho. Ho.

That was just a joke about history and politics.

Good luck with your project.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
33 Guest(s)

Currently Browsing this Page:
1 Guest(s)