CODEWITHSUNDEEP
javascriptjqueryjqgrid
PaperBirdMaster
PaperBirdMaster

Reputation: 13320

Issue with jqGrid with dynamic colModel while editing rows

I'm using a jqGrid as a generic table-like editable control. My goal is to have pairs of name -> value in a table where the values are editables.

Everything goes well as long as I don't mess up with the colModel: if I have a table with mixed value types I'm forced to change the colModel in order to match it with the value being edited. For example, in a table with 3 values: Name, Surname, Married?, the last one is of type checkbox while the other ones are of the type string.

After editing the field Married?, if we click on the other fields their content changes to Yes:No while in edit mode, the string Yes:No is the one used by the checkbox field; anyone knows what I'm doing wrong?:

var data =
[
    {name:"Name", value:"John"},
    {name:"Surname", value:"Doe"},
    {name:"Married", value:"No"}
];
var currentrow = 0;

function edit(id)
{
    if (id && id !== currentrow)
    {
        var table = jQuery("#grid");

        function colProp(id)
        {
            switch (id)
            {
                case "1":
                case "2":
                return { editable: true, edittype: 'text', editoptions: {} };

                case "3":
                return { editable: true, edittype: 'checkbox', editoptions: {value: 'Yes:No'} };
            }
        }

        table.jqGrid('restoreRow', currentrow);
        table.setColProp('value', colProp(id));
        table.jqGrid('editRow', id, true,
             undefined, undefined, 'clientArray');

        currentrow = id;
    }
}

$("#grid").jqGrid
({
    datatype: "local",
    data: data,
    colNames: ['Name', 'Value'],
    colModel:
    [
        { name: 'name' },
        { name: 'value' }
    ],
    onSelectRow: edit
});

At first, I was thinking that after editing a field with edittype: checkbox the next fields being editet inherits the previous edittype, that's why I set the editoptions to an empty object while editing text fields, but it didn't work.

I've pasted the code into a Fiddle in order to share a working example of my issue.

PS: Maybe jqGrid isn't the best choice to achieve my goal, but I'm forced to use it.

Upvotes: 1

Views: 1147

Answers (1)

Oleg
Oleg

Reputation: 221997

To fix the problem you can just use

editoptions: {value: null}

to remove value property. The corresponding demo inclusive some other minimal modifications you will find here: http://jsfiddle.net/y9KHY/2/.

The corresponding code is

var data =  [
        {id: "10", name:"Name", value:"John", edittype: "text"},
        {id: "20", name:"Surname", value:"Doe", edittype: "text"},
        {id: "30", name:"Married", value:"No", edittype: "checkbox"}
    ],
    currentrow = 0;

function edit(id) {
    var table = jQuery(this),
        item = table.jqGrid("getLocalRow", id);

    function colProp(id) {
        switch (item.edittype) {
            case "checkbox":
                return { editable: true, edittype: 'checkbox', editoptions: {value: 'Yes:No'} };
            default:
                return { editable: true, edittype: 'text', editoptions: {value: null} };
        }
    }

    if (id && id !== currentrow) {
        table.jqGrid('restoreRow', currentrow);
        table.setColProp('value', colProp(id));
        table.jqGrid('editRow', id, true);

        currentrow = id;
    }
}

$("#grid").jqGrid({
    datatype: "local",
    data: data,
    colNames: ['Name', 'Value'],
    colModel: [
        { name: 'name' },
        { name: 'value', editable: true }
    ],
    rowNum: 10000,
    autoencode: true,
    gridview: true,
    height: "auto",
    editurl: "clientArray",
    onSelectRow: edit
});

Upvotes: 2

Related Questions