CODEWITHSUNDEEP
jqgrid
NewHistoricForm
NewHistoricForm

Reputation: 121

JQGRID - How to Send/Read Values from Different Columns in Inline / Form edit?

I have 3 checkbox columns with corresponding date column. So what I am trying to achieve is when user clicks on checkbox during inline-edit and hits enter, today's date will be sent set as the value for another cell in a specified column. How to achieve? I recieved prior direction from OLEG on doing this with on form-edit but I would like to do this during inline edit instead. I have both enabled but only checkmarks will be editable during inline edit. I have all other fields disabled but the checkboxes columns. Any ideas would be greatly appreciated.

UPDATE Okay so I solved with the below code. Thanks Oleg for the help.

Current Date Function:

var date = new Date(Date.now());
console.log(todayDate(date));
function todayDate(date){
return (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
    }

Check Column Code:

        { name: "devc", index: "devc",width: 25, align: "right", formatter: "checkbox", 
    editable: true, edittype: "checkbox",editoptions: {value: "Yes:No",defaultValue: "No",
dataEvents: [{type: "change", fn: function (e) {var $this = $(e.target), columnName = "devdate", rowid, cellId;
                                if ($this.hasClass("FormElement")) {
                                    // form editing
                                    cellId = columnName;
                                } else if ($this.closest("td").hasClass("edit-cell")) {
                                    // cell editing
                                    return; // no other editing field exist - nothing to do
                                } else {
                                    // inline editing
                                    rowid = $this.closest("tr.jqgrow").attr("id");
                                    cellId = rowid + "_" + columnName;
                                }
                                $("#" + $.jgrid.jqID(cellId)).val($this.is(":checked") ?
                                    (todayDate(date)) : "");} }]}}

Upvotes: 0

Views: 1202

Answers (1)

Oleg
Oleg

Reputation: 221997

To be able to address another editing field inside of some event handler defined in dataEvents you need uses the corresponding name conversion for ids used by different editing mode.

Form editing creates editing elements with id attribute the same as the name property in colModel. Inline editing allows to edit multiple rows at the same time. So it uses another rule for building id values: the rowid value will be appended by _ and then appended with the value of name property in colModel. During cell editing jqGrid allows to edit one cell only. So accessing of another editing field inside of some event handler defined in dataEvents have no sense.

The answer provide an example of detection of editing mode inside of event handler of dataEvents.

Let us you have column { name: "appc", formatter: "checkbox", editable: true, edittype: "checkbox", ...} and you need to define change event handler for the column. Let us you have another text column { name: "appdate", editable: true, ...} and you want change the value of the the edit field of appdate column on checking/unchecking of the checkbox in appc column. In the case you can do the following:

{ name: "appdate", editable: true, ...},
{ name: "appc", formatter: "checkbox", editable: true, edittype: "checkbox",
    editoptions: {
        dataEvents: [{
            type: "change",
            fn: function (e) {
                var $this = $(e.target), columnName = "appdate", rowid, cellId;
                if ($this.hasClass("FormElement")) {
                    // form editing
                    cellId = columnName;
                } else if ($this.closest("td").hasClass("edit-cell")) {
                    // cell editing
                    return; // no other editing field exist - nothing to do
                } else {
                    // inline editing
                    rowid = $this.closest("tr.jqgrow").attr("id");
                    cellId = rowid + "_" + columnName;
                }

                // set the value of another edit field
                // we use below $.jgrid.jqID(cellId) instead of cellId
                // only to be sure that the next line work correctly
                // even in case of columnName contains special meta-charackters
                // like space or !"#$%&'()*+,./:;<=>?@[\]^`{|}~
                $("#" + $.jgrid.jqID(cellId)).val($this.is(":checked") ?
                    "CheckedText": "UncheckedText");
            } 
        }]
    }
}

UPDATED: One can modify the code from your question to the following:

var date = new Date(Date.now()),
    todayDate = function (date) {
        return (date.getMonth() + 1) + "/" + date.getDate() +
            "/" + date.getFullYear();
    },
    checkBoxChange = function (e) {
        var $this = $(e.target), columnName = e.data.dateColumn,
            rowid, cellId;

        if ($this.hasClass("FormElement")) {
            // form editing
            cellId = columnName;
        } else if ($this.closest("td").hasClass("edit-cell")) {
            // cell editing
            return; // no other editing field exist - nothing to do
        } else {
            // inline editing
            rowid = $this.closest("tr.jqgrow").attr("id");
            cellId = rowid + "_" + columnName;
        }
        $("#" + $.jgrid.jqID(cellId)).val($this.is(":checked") ?
            (todayDate(date)) : "");
    };

...
...
{ name: "appdate", editable: true, ...},
{ name: "appc", formatter: "checkbox", editable: true,
    edittype: "checkbox",
    editoptions: {
        dataEvents: [{
            type: "change",
            data:  { dateColumn: "appdate" },
            fn: checkBoxChange
        }]
    }},
{ name: "devdate", editable: true, ...},
{ name: "devc", formatter: "checkbox", editable: true,
    edittype: "checkbox",
    editoptions: {
        dataEvents: [{
            type: "change",
            data:  { dateColumn: "devdate" },
            fn: checkBoxChange
        }]
    }}

One can see that we use data: { dateColumn: "devdate" } or data: { dateColumn: "appdate" } as additional property of dataEvents items. The event handler checkBoxChange used in fn: checkBoxChange can access the data by usage e.data.dateColumn. In the way one can easy share the same event handler for multiple columns.

Upvotes: 1

Related Questions