jQuery Grid Plugin - jqGridForum

Topic RSS

setCell from inside fmatter

12/01/2010
14:02

ari

Member

Members

Forum Posts: 10

Member Since:
12/01/2010

Offline

I have a cell which I'd like to format based on the value of the contents. You know, the usual thing: make the background red if the text has a certain value. It seems to me that the obvious approach is something like this:

jQuery.extend(jQuery.fn.fmatter , {
    myFormatter : function(cellvalue, options, rowdata) {
        jQuery("#my_list").setCell(rowdata.rowNum, 'colName', '', 'redcss');
        return cellvalue;
    }
});

Is this approach doomed to failure? Is there a way of getting the current row number out of the rowdata? I could hardcode the column name, but that would be nice too.

Any ideas?

Thanks

Ari

13/01/2010
18:41

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

This will not work written this way. Also in the formatter do not use jQuery commands that are related to grid contents)

One possible solutionis to use afterInsertRow event - it will work with yor code

What you mean with row number?

Regards

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.

13/01/2010
22:03

newperson

Member

Members

Forum Posts: 27

Member Since:
28/12/2009

Offline

This post has been made many times and with a little forum searching you could find answer.

your js file.js

...

colModel: [

...

{ name: 'Items', index: 'item_count', width: 80, align: "center", searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'] }, formatter: highlight },

...

    function highlight (cellvalue, options, rowObject)
    {
        var color = (parseInt(cellvalue) < 10000) ? "red" : "green";
        var cellHtml = "<span style='color:" + color + "' originalValue='" + cellvalue + "'>" + cellvalue + "</span>";
        return cellHtml;
    }

http://gyazo.com/f6958571ed5ac5102327e0608d35ab83.png

This screenshot shows it in action, it will only change the color for cells with values under 100000 in red all others in green

14/01/2010
02:47

ari

Member

Members

Forum Posts: 10

Member Since:
12/01/2010

Offline

@newperson

Thanks for your help and example. I did Google this for hours, and found only something similar to your idea on stackoverflow.com. Your example works well for certain things, but it doesn't do what I want which is to apply css to the tr or the td, rather than just inserting html. And it also doesn't work for setting the background colour.

@tony

afterInsertRow might be a better approach and I'll explore that. Thanks. You might like to add newperson's example to your docs since I'm sure that will help a lot of people (just not what I want to do here). Ideally, I wanted to apply a style to the tr so that certain rows are bold or have a different background, depending on the value of one column. So afterInsertRow may do the trick.

14/01/2010
04:16

ari

Member

Members

Forum Posts: 10

Member Since:
12/01/2010

Offline

For anyone finding this thread, there is a way to get the rowId. That info is carried in the options. So options.rowId can give you a hook for jQuery to then addClass to. I found that here:

http://www.trirand.com/blog/?p.....8;search=1

14/01/2010
20:16

newperson

Member

Members

Forum Posts: 27

Member Since:
28/12/2009

Offline

ari:

my example does have limitations, if you find a solution to yours can you share your code? Thanks!

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
62 Guest(s)