CODEWITHSUNDEEP
javascriptjqueryjqgrid
Heathcliff
Heathcliff

Reputation: 3138

jqGrid: Edit more than one cell using Cell Editing

I have a problem. I'm using cell editing for jqGrid. I don't wish to change that for inline editing, since I need to keep it that way, only allowing to edit one cell at a time.

The thing is that I have a field which, after being edited, needs to force other cells to be edited. So, I need those cells to be open for edit if the user changes the first one to a certain value.

Is there any way to do this? I have tried with .jqGrid('editCell',...), but that way I only can do that with ONE cell at a time. And I can't ask for the next cell that has to be edited to force the 3rd and last to be edited, because it may happen that a user wants to edit that 2nd cell alone, which should result in this behaviour.

Any way to do this?

Thanks

UPD:

To make this more clear, I'll give an example. Supposse you have a table that lists the cars that people in your neighborhood has. It has 4 cells:

ID - CarCompany - Model - Year

Where ID is some identification field, CarCompany is the name of the company that manufactures the car, Model is the name of the model and Year is the year's model.

So for instance you have the following records:

0 - Ford - Focus - 2010

1 - Cadillac - Escalade - 2004

2 - Lamborghini - Diablo - 2012

The owners can change the car. They can change the Year, which shouldn't change any of the other cells (because they changed their cars for a newer version of their current car) and they can change the Model for another one with the same year. But if they change their cars for one from another company, you must update the Model and the Year (let's just assume you HAVE TO change the year). Therefore:

Upvotes: 0

Views: 2006

Answers (1)

Oleg
Oleg

Reputation: 221997

If I understand correct your problem you can use afterSaveCell callback or some other which better for your requirements (see here). You can test which column is modified and call editCell explicitly to suggest to edit depended cell. Probably you can use additionally custom validation rule (see here) to be sure that the user really modify dependent cell to the correct value.

UPDATED: The demo shows how you can call editCell inside of afterSaveCell callback to implement the behavior which you need. The most important part of the code of the demo you will find below:

var carCompanyEditingMode = false;

$("#list").jqGrid({
    ...
    afterSaveCell: function (rowid, cellname, value, iRow, iCol) {
        var $this = $(this), editedColName = this.p.colModel[iCol].name;
        if (editedColName === "carCompany") {
            setTimeout(function () {
                $this.jqGrid("editCell", iRow, iCol + 1, true);
            }, 50);
            carCompanyEditingMode = true;
            return;
        }
        if (carCompanyEditingMode && editedColName === "model") {
            setTimeout(function () {
                $this.jqGrid("editCell", iRow, iCol + 1, true);
            }, 50);
            return;
        }
        if (carCompanyEditingMode && editedColName === "year") {
            carCompanyEditingMode = false;
        }
    },
    beforeSelectRow: function () {
        // don't allow editing of another row if 
        // the carCompanyEditingMode is true
        return !carCompanyEditingMode;
    },
    afterRestoreCell: function (rowid, value, iRow, iCol) {
        var $this = $(this);
        if (carCompanyEditingMode) {
            // continue editing of the same cell
            setTimeout(function () {
                $this.jqGrid("editCell", iRow, iCol, true);
            }, 50);
        }
    }

});

Upvotes: 1

Related Questions