JqGrid : Checkbox formatter

Question

I'm trying to apply the checkboxes on my columns. All i want to know is how to check or uncheck the boxes depending on the values. For example, check the box if the column's value is '1' however the box is must unchecked if the column's value is '0' or 'null'.

The code below is the part of my whole jqgrid code.

coleModel[{
    name: 'MENU1', 
    index: 'MENU1', 
    editable: true, 
    sortable: false, 
    search: false, 
    edittype:'checkbox',
    editoptions: { value:"1:0"},
    formatter: function (cellValue, options, rowObject) {
        if (cellValue == '1') {
            return 'Enabled';
        }else if(cellValue == '0') {
            return 'Disabled';
        }else{
            return cellValue;
        }
    }
}]

This column is showed 'Enabled' or 'Disabled' in list very well. I have no idea how to showing the check marks. Please let me know how to do it. Thank you.

----------------------------------------------------------------------------------------

sorry for the wrong question. It is hard to describe to me. Uhm.. could you guys reference the website "http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing". The picture below the 'editGridRow'. The column named 'closed' is what i'm looking for. I'm not an expert in this field so i can't explain clearly. so sorry.

Solution

It's very difficult to understand you because you use existing terminology in a wrong way. Formatter will be only used to place data in the grid cell based on input value. For example you used custom formatter in your code which place the string "Enabled" in the column if the input data is "1" and it places the string "Disabled" in the column if the input data is "0".

From the late discussion in the comments to your question I could understand (I hope that now I understand you correctly), that you have just problems with the usage of edittype: 'checkbox' in the edit form.

It's important to understand that editing form will be build based on the values from the column. If you use the custom formatter which placed "Enabled" or "Disabled" in the column then you can use

edittype: "checkbox", editoptions: { value: "Enabled:Disabled" }

The demo demonstrates the solution.

Another gut rule would be to define always unformatter together with the formatter. For example you can use the following in combination with your existing formatter code

unformat: function (cellvalue) {
    switch (cellvalue) {
        case "Enabled":
            return "1";
        case "Disabled":
            return "0";
        default:
            return "0";
    }
},
edittype: "checkbox", editoptions: { value: "1:0" }

The demo uses the code.

One more option is to remove custom formatter. If the input data need be replaced to the string then you can use predefined formatter: "select". In the case the definition of the column will contains the following properties

formatter: "select", formatoptions: { value: "0:Disabled;1:Enabled" },
edittype: "checkbox", editoptions: { value: "1:0", defaultValue: "1" }

Because all predefined formatters defines unformatter too, then the value option of edittype: "checkbox" will be "1:0".

The demo uses the properties and the the look of jqGrid is the same as in previous demos.

I personally find one thing not logically. You display "Enabled" or "Disabled" in the grid, but you use checkbox in the editing form. It seems to me not consequent. Either you should use formatter: "checkbox" in the grid too and to place the checkboxes in the grid or you should use edittype: "select" instead of edittype: "checkbox". In the last case the user will works only with texts "Enabled" and "Disabled".

The corresponding demo displays select (dropdown) with the values "Enabled" and "Disabled" in the editing form:

Comments

[Oleg]

@홍의숙: You are welcome! Please try to formulate your question more clear next time. You will get the answer more quickly.