jQuery Grid Plugin - jqGrid - Topic: Registering a customer formatter

SimonL on Registering a customer formatter

Tue, 24 Nov 2009 05:00:12 +0200

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

SimonL on Registering a customer formatter

Mon, 23 Nov 2009 12:11:46 +0200

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

Regards,

Simon

tony on Registering a customer formatter

Mon, 23 Nov 2009 12:08:55 +0200

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

SimonL on Registering a customer formatter

Mon, 23 Nov 2009 08:04:58 +0200

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

markw65 on Registering a customer formatter

Sat, 21 Nov 2009 12:37:43 +0200

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

tony on Registering a customer formatter

Sat, 21 Nov 2009 11:47:07 +0200

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

SimonL on Registering a customer formatter

Sat, 21 Nov 2009 11:22:30 +0200

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

tony on Registering a customer formatter

Sat, 21 Nov 2009 10:54:59 +0200

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

SimonL on Registering a customer formatter

Sat, 21 Nov 2009 09:45:09 +0200

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

tony on Registering a customer formatter

Sat, 21 Nov 2009 08:12:11 +0200

Hello,

How you call it into the code?

Maybe you will call it this way:

colModel[

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

...

]

...

SimonL on Registering a customer formatter

Fri, 20 Nov 2009 06:17:44 +0200

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