jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Registering a customer formatter

20/11/2009
06:17

SimonL

Member

Members

Forum Posts: 39

Member Since:
23/07/2009

Offline

Hi,

I wrote a custom formatter and it works perfectly well. I want to use it in all my grids in my application so I decided to 
use the extends function to register it  (I'm using version 3.5 of jqGrid). But when I run my application firebug tells me that the  
editButtonFormatter function is not defined. 

I have the following code that runs after jqGrid javascript file is loaded. 

<script type="text/javascript">
        $.extend($.fn.fmatter, {
        editButtonFormatter: function(cellvalue, options, rowObject) {
                return "Edit Link";
                //  Note: I've edited out the real code here just to make it very simple - but it still doesn't get registered
                //                var editURL = $(gridSelector).getGridParam('editURL');
                //                return "<a href=" + editURL + getPrimaryKey(rowObject) + ">" + "Edit" + "</>";
            }
        });
</script>

Can you tell me what I'm doing wrong please.

Regards,
Simon

21/11/2009
08:12

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

How you call it into the code?

Maybe you will call it this way:

colModel[

{name'some'... formatter:'editButtonFormatter'...},

...

]

...

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.

21/11/2009
09:45

SimonL

Member

Members

Forum Posts: 39

Member Since:
23/07/2009

Offline

Hi Tony,

Yes thats how I call it in my grid code:

colModel[

{

...

name: 'editLink', search: false, sortable: false, hidden: false, index: 'editLink', width: 20, align: 'center', formatter: editButtonFormatter },

...

]

But this causes the "editButtonFormatterfuntion is not defined" error.

When I was creating the function initially I just added a function underneath my grid code like so:


function editButtonFormatter (cellvalue, options, rowObject) {
 return "Edit Link";
           //  Note: I've edited out the real code here just to make it very simple - but it still doesn't get registered     
           //                var editURL = $(gridSelector).getGridParam('editURL');
           //                return "<a href=" + editURL + getPrimaryKey(rowObject) + ">" + "Edit" + "</>";            }       
 });

and called it from the grid model as described above and everything worked fine.

I then removed the function and defined it with the

$.extend($.fn.fmatter, ......

as described in the previous post. Even if I add the $.extend($.fn.fmatter, ...... code immediately before my grid definition code, 
I still get the error.

Regards,
Simon

21/11/2009
10:54

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

IMHO this should work.

Instead can you try this way

$.fn.fmatter.editButtonFormatter = function(cellval,opts) {

// do something here

}

Tony

P.S. I will try to reproduce your code.

Regards

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.

21/11/2009
11:22

SimonL

Member

Members

Forum Posts: 39

Member Since:
23/07/2009

Offline

Hi Tony,

I tried you suggestion but unfortunately I still get the error.

My code ...

        $.fn.fmatter.editButtonFormatter = function(cellval,opts) {
                return "Edit Link";
        };

        jQuery(gridSelector).jqGrid({
                url: '/Admin/StockOwner/GetListData/',
                editURL: '/Admin/StockOwner/Edit/',
                deleteURL: '/Admin/StockOwner/Delete/',
                datatype: 'json',
....

colModel: [
{ name: 'editLink', search: false, sortable: false, hidden: false, index: 'editLink', width: 20, align: 'center', formatter: editButtonFormatter },

....

Regards,

Simon

21/11/2009
11:47

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Testing your exact example brig to not working code:

The reason is this pice of code (I will correct it in 3.6.1)

    function fireFormatter(formatType,cellval, opts, rwd, act) {
        formatType = formatType.toLowerCase();
        var v=cellval;

        if ($.fn.fmatter[formatType]){
            v = $.fn.fmatter[formatType](cellval, opts, act);
        }

return v;
};

In other word - make your function with lowecase words - i.e editbuttonformatter (and call it with lower cases) and it will work.

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.

21/11/2009
12:37

markw65

Member

Members

Forum Posts: 179

Member Since:
30/07/2009

Offline

Tony wrote:

In other word – make your function with lowecase words – i.e editbuttonformatter (and call it with lower cases) and it will work.

I think that's half the answer. But the other half is here:

{ name: 'editLink', search: false, sortable: false, hidden: false, index: 'editLink', width: 20, align: 'center', formatter: editButtonFormatter }

I believe you need to pass in a string:

formatter: "editButtonFormatter"

(and I dont think the case matters here, just in the definition).

Mark

23/11/2009
08:04

SimonL

Member

Members

Forum Posts: 39

Member Since:
23/07/2009

Offline

Thank you Tony and Mark for your replies. A combination of your two solutions does help. the editButtonFormatter function is at least now being called, but there seem to still be soome issues. Originally when I called the editButtonFormatter by just adding the function to my code without going dow the $.fn.fmatter.editButtonFormatter route the cellValue parameter was undefined,

the options parameter held values of the colModel etc and rowObject held the values of the other columns on the row. I'm using a value in the rowObject to pick out a particular column value so rowObject is important to me.

However, when I define the editButtonFormatter via $.fn.fmatter.editButtonFormatter and wrap it in quotes in the colModel. Then when editButtonFormatter is called the cellvalue parameter is undefined, the options parameter does hold the colModel details but the rowObject contains "add" and not the values of the other columns in the row. So there do still appear to be some problems.

Is there anything else I should try?

Regards,

Simon

23/11/2009
12:08

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Simon,

Thanks for this too. There was another bug regrading this. Also I have fixed this and you can download the 3.6.1 release with the fix.

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

23/11/2009
12:11

SimonL

Member

Members

Forum Posts: 39

Member Since:
23/07/2009

Offline

Thanks Tony, I will download 3.6.1 tomorrow and give it a try, thanks again for you quick response.

Regards,

Simon

24/11/2009
05:00

SimonL

Member

Members

Forum Posts: 39

Member Since:
23/07/2009

Offline

Thanks Tony, I've downloaded 3.6.1 and I can now set my custom formatters as defaults, thanks again.

Also, is it possible to set columns as defaults. I have two columns (the edit and delete button columns described above) that appear on every grid in my application. I've quickly tried using

...

$.extend($.jgrid.defaults, {

                colNames: [
                'Edit', 'Delete'
                colModel: [
                  { name: 'editLink', fixed: true, resizable: false, search: false, sortable: false, hidden: false, index: 'editLink', width: 30, align: 'center', formatter: 'editButtonFormatter' },
                  { name: 'delButton', fixed: true, resizable: false, search: false, sortable: false, hidden: false, index: 'delButton', width: 60, align: 'center', formatter: 'deleteButtonFormatter' }

]

...

but without success. Before I spend too much time on it, is it actally possible to do this.

Regards,

Simon

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
66 Guest(s)