Custom dropdown formatter for jQuery jqGrid

Question

I am trying to format a cell on jqGrid so that when the user edits it they are presented with a custom implementation of a combobox (called activecombo) as the select html component is ugly.

I have read this and looked at the demos but they don't seem to do quite what I want. Here's what I have tried:

    var maritalStatusPickerFunction = function(cellvalue, options,
            rowObject) {
        var optionsArray = [ {
            "id" : 1,
            "status" : "Married"
        }, {
            "id" : 2,
            "status" : "Divorced"
        }, {
            "id" : 3,
            "status" : "Separated"
        }, {
            "id" : 4,
            "status" : "Widowed"
        }, {
            "id" : 5,
            "status" : "Unmarried"
        }

        ];
        var comboInput = $("<input type='text' value='" + cellvalue
                + "' />");
        comboInput.activecombo( {
            source : optionsArray
        });
        return comboInput;
    };

    $('#relationshipsGrid').jqGrid( {
        datatype : "local",
        colNames : [ 'Contact', 'Relationship' ],
        colModel : [ {
            name : 'contact',
            index : 'contact',
            width : 420
        }, {
            name : 'relationship',
            index : 'relationship',
            editable : true,
            formatter : maritalStatusPickerFunction,
            width : 120
        } ],
        width : 600,
        height : 100,
        cellEdit : true,
        editurl : "server.php"
    });

But that's obviously not what I am supposed to do as this just displays Object object in an input in a cell.

Can anyone give me any pointers?

Thanks,

Amy

score 5 · Accepted Answer · edited May 23 '17 at 12:34

If you need implement the custom implementation of a combobox during editing of the cell you should use the custom editing control instead of the custom formatter.

Custom formatters are used to build HTML representation of the cell as string. Custom editing controls are used to create custom DOM element which will be placed inside the <span> element of the editing field. As an example see this, this and this old answers.

I don't know activecombo plugin, but it seems to me that you could don't write custom editing control. Instead of that you can try to define dataInit event handle inside of editoptions like

editoptions: {
    dataInit : function (elem) { 
        $(elem).activecombo( {
            source : optionsArray
        }); 
    } 
}

or if ou will has any problem like

editoptions: {
    dataInit : function (elem) { 
        setTimeout(function(){
            $(elem).activecombo( {
                source : optionsArray
            }); 
        },100);
    } 
}

By the way you can do the same for the searching. Then the user will have use the same advantages in the searching/filtering dialog.

Custom dropdown formatter for jQuery jqGrid

1 Answers1