JQGRID - How to send / read values ​​from different columns in the Inline / Form editor?

Question

I have 3 checkbox columns with corresponding date column. So what I'm trying to achieve is when the user clicks the checkbox during inline-edit and gets into enter, today the date will be sent as the value for another cell in the specified column. How to reach? I got a preliminary guide from OLEG by doing this using form editing, but I would like to do this during inline editing. I enabled both, but only the checkmarks will be edited during inline editing. I have all other fields disabled, but the columns are checkboxes. Any ideas are greatly appreciated.

UPDATE Okay, so I decided using the code below. Thanks to 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)) : "");} }]}} 

Answer 1

In order to be able to access another editing field inside any event handler defined in dataEvents , you need to use the corresponding name translation for identifiers used in another editing mode.

Editing a form creates editing elements with an id attribute in the same way as the name property in colModel . Built-in editing allows you to edit multiple lines at once. Therefore, another rule is used to construct id values: the rowid value will be added _ , and then added with the value of the name property in colModel . During cell editing, jqGrid allows you to edit only one cell. Therefore, accessing another editing field inside any event handler defined in dataEvents does not make sense.

The answer gives an example of detecting edit mode inside the dataEvents event dataEvents .

We have a column { name: "appc", formatter: "checkbox", editable: true, edittype: "checkbox", ...} , and you need to define a change event handler for the column. You have another text column { name: "appdate", editable: true, ...} , and you want to change the value of the edit field of the appdate column when checking or appc box in the appc column. In this 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 . From your question, you can change the following code:

 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 }] }} 

You can see that we use data: { dateColumn: "devdate" } or data: { dateColumn: "appdate" } as an additional property of dataEvents elements. The checkBoxChange event checkBoxChange used in fn: checkBoxChange can access data by using e.data.dateColumn . In the method, you can easily use the same event handler for multiple columns.