Jqgrid How To Add A Edittype Checkmark That Posts Date To Column?

I need to have an editype checkmark column where when checkmark is checked today's date automatically is added next to checkmark and after submit to cell and if unchecked the date

Solution 1:

There are many ways to implement your requirements. The first one is the usage of edittype: "custom". It allows you to create any editing element in edit form. The same approach work in inline editing or in Searching dialog. The demo from the answer and this old one describes all more detailed.

Another way is more easy. One can just add one more control, for example <span>after the checkbox. One can fill the span and change it based on changes of the chackbox. The demo demonstrates the approach. The most important part of the code is the following:

The grid have the editable column "closed" with edittype: "checkbox". I use form editing to edit the grid. Form editing creates editing controls which ids are the same as the value of name property. So the checkbox for editing the column "closed" in the edit form will have the id="closed". Inside of beforeShowForm callback I insert additional <span> element with id="mydate" directly after the checkbox "closed":

beforeShowForm: function () {
    $("<span id='mydate'></span>").insertAfter("#closed");

    // we trigger change event on the chechbox only to execute once// the custom event handler which fills the span #mydate
    $("#closed").trigger("change");
}

The definition of the column "closed" of the grid contains editoptions.dataEvents which defines the handler of "change" event. The event handler fills the span with id="mydate" based on the state of the checkbox:

colModel: [
    ...
    { name: "closed", width: 70, align: "center", formatter: "checkbox",
        editable: true, 
        edittype: "checkbox",
        editoptions: {
            value: "Yes:No",
            defaultValue: "Yes",
            dataEvents: [
                {
                    type: "change",
                    data: { uncheckedDate: "9/11/1964" },
                    fn: function (e) {
                        if ($(this).is(':checked')) {
                            var date = newDate(Date.now()),
                                strDate = (date.getMonth() + 1) + "/" +
                                          date.getDate() + "/" +
                                          date.getFullYear();
                            $("#mydate").text(strDate);
                        } else {
                            $("#mydate").text(e.data.uncheckedDate);
                        }
                    }
                }
            ]
        },
        stype: "select",
        searchoptions: {
            sopt: ["eq", "ne"],
            value: ":Any;true:Yes;false:No"
        }
    },

As the result the form looks like on the picture below

Additional editing callback

afterclickPgButtons: function () {
    $("#closed").trigger("change"); // to set date
}

refreshes the date new the checkbox after the user clicks next/previous record button.

To send additional data with the data from madate<span> I used onclickSubmit callback

onclickSubmit: function () {
    return {
        myDate: $("#mydate").text()
    }
}

which send the date as myDate parameter during submitting of editing form.