extend jqgrid for colModel edittype

Question

I am going to use JqGrid for many different web pages. And I have some custom formatter, and custom edittype for example, I want to use datepicker to edit dates

so, instead of using colModel's edittype as custom, and provide custom functions to do that, I would like "if possible" to write an extension to jqgrid edittype, so I can just write "date", and I will write an extension to replace it with the datepickeer. As I said, it is for re-usability, so instead of doing custom edit type for every web page/jqgrid, I could do it only once in that place. Is there any documentation on how to extend jqgrid?

Answer 1

I would start with custom formatter. jqGrid support predefined formatters like formatter: "integer", formatter: "date". You can "register" your custom formatter and unformatter as one more value which you can use. For example if you want to register formatter: "myCheckbox" you need define $.fn.fmatter.myCheckbox as formetter function and $.fn.fmatter.myCheckbox.unformat as unformatter function.

$.extend($.fn.fmatter, {
    myCheckbox: function (cellValue, options, rowObject) { 
        // the code of the custom formatter is here
        ...
    }
});
$.extend($.fn.fmatter.myCheckbox, {
    unformat: function (cellValue, options, elem) {
        // the code of the custom unformatter is here
        ...
    }
});

The code from here uses Font Awesome 4.x and register new formatter: "checkboxFontAwesome4". "Registering" of custom formatters can simplify your code.

The next feature. jqGrid supports column templates starting with version 3.8.2 jqGrid (see the old answer). It allows you to define common settings used in colModel as one object and to use template property in colModel. For example if you have many columns which contains numbers you can define for example numberTemplate object as

var numberTemplate = {
        formatter: "number", align: "right", sorttype: "number", width: 60,
        searchoptions: {
            sopt: ["eq", "ne", "lt", "le", "gt", "ge"]
        }
    };

then you can define tree columns "tax", "amount" and "total" as

colModel: [
    ...
    { name: "tax", template: numberTemplate },
    { name: "amount", template: numberTemplate },
    { name: "total", width: 70, template: numberTemplate },
    ...
]

In the way you defines columns where all the properties from numberTemplate will be applied in the columns. The default width: 60 defined in numberTemplate will be overwritten to the value width: 70 for the column "total".

The usage of column templates allows you to define once in your code templates for dates which uses jQuery UI Datepicker for example and uses in every column of every grid of your project just the corresponding reference on the template.

The current version of jqGrid on github supports "registering" of templates as strings. So the next version (higher as 4.6.0), which I hope will be soon released, will support the following syntax:

$.extend($.jgrid, {
    cmTemplate: {
        myNumber: {
            formatter: "number", align: "right", sorttype: "number",
            searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }
        }
    }
});

(in the example I didn't included width in the template)

colModel: [
    ...
    { name: "tax", width: 52, template: "number" },
    { name: "amount", width: 75, template: "number" },
    { name: "total", width: 60, template: "number" },
    ....
]

See the pull request for more details.

Answer 2

As with any jQuery plugin, you can extend the plugin with $.extend() like this:

(function($) {
    var extensionMethods = {
        // ...
    };

    $.extend(true,$.jgrid, extensionMethods);

})(jQuery);