JqGrid How to add a edittype checkmark that posts date to column?

Question

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 is removed on editform and on submit sends "null" to leave cell empty. I know I can use use

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }

But I have no idea how to display the date next to the checkbox(like pic)and then add that date to cell on submit. Help please. My code as it currently as it exists UPDATED with answer:

`

<title>PWe</title>


<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.10.3.custom.min.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/nhf.css" />

<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
 <script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

<script type="text/javascript">




 $(function(){ 
      $("#list").jqGrid({
        url:'request.php',
        editurl: "jqGridCrud.php",
        datatype: 'xml',
        mtype: 'GET',
        height: 'AUTO',
        width: 900,
        scrollOffset:0,
        hidegrid: false,

        colNames:['id','Project', 'Assigned To','Dev','Approve','Due Date','Attachments','Notes','App','mydate2',""],
        colModel :[ 
          {name:'id', index:'id', width:28, align: 'center'}, 
          {name:'name', index:'name', width:170, align:'left',editable:true, editoptions:{
                size:60} }, 
          {name:'id_continent', index:'id_continent', width:50, align:'right',editable:true,edittype:'select', 
          editoptions:{value: "Henry:Henry; Ramon:Ramon; Paul:Paul" },mtype:'POST'  }, 

          {name:'lastvisit', index:'lastvisit', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',editable:true, edittype: 'text',mtype:'POST' ,       editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,


          {name:'cdate', index:'cdate', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy', edittype: 'text',editable:true ,mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,

          {name:'ddate', index:'ddate', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',date:'true',editable:true, edittype: 'text',editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,


          {name:'email', index:'email', width:50,align:'center',sortable:false,mtype:'POST',formatter:function(cellvalue, options, rowObject) {
        if (cellvalue === undefined || cellvalue === null || cellvalue === 'NULL') {
            return ''; // or just ""
        }
        return '<a href="' + cellvalue + '"target="_blank"><img src="file.png"> </a>';
    }},

            {name:'notes', index:'notes', width:100, align:'left',sortable:false, editable:true,edittype:'textarea',formatter:'link', editoptions:{
                rows:10,cols:60} }, 



    { name: "hello", index:'hello',width: 17, align: "right", formatter: "checkbox",
            editable: true, 
            edittype: "checkbox",
            editoptions: {
                value: "Yes:No",
                defaultValue: "Yes",
                dataEvents: [
                    {
                        type: "change",
                        data: { uncheckedDate: "" },
                        fn: function (e) {
                            if ($(this).is(':checked')) {
                                var date = new Date(Date.now()),
                                    strDate = (date.getMonth() + 1) + "/" +
                                              date.getDate() + "/" +
                                              date.getFullYear();
                                $("#mydate").text(strDate);
                            } else {
                                $("#mydate").text(e.data.uncheckedDate);
       }
                        }
                    }
                ]
            }},


        {name:'mydate2', index:'mydate2', width:40, align:'left',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',date:'true',editable:false} ,

            {name:'act',index:'act',width:30 ,align:'left', sortable:false,formatter: "actions",cellattr: function () { return ' title="Delete Project"'; },
    formatoptions: {
        keys: true,
         deltitle: 'delete',
        delbutton: true,
        editbutton:false,
        delOptions: {
            url: 'delete-perm.php',
            afterShowForm: function ($form) {
        $("#dData", $form.parent()).click();
    },
            msg: "Remove Selected Project?",
            bSubmit: "Remove",
            bCancel: "Cancel"
        }
    }}, 
        ],
        pager: '#pager',

        rowNum:30,
        rowList:[30,40,80],
        sortname: 'ddate',
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        caption: 'Current Assignments',


        ondblClickRow: function(rowid) {

        $(this).jqGrid('editGridRow', rowid,
                            {width:550,Height:550,recreateForm:true,closeAfterEdit:true,
                             closeOnEscape:true,reloadAfterSubmit:true, modal:true,mtype:'post',top:350,left: 30});}


                });


     jQuery.extend(jQuery.jgrid.nav, {
            deltitle: '',
            delcaption: 'Project Complete'


        },{delicon: "ui-icon-circle-check",deltext: "Project Complete"});   

        $("#list").jqGrid("navGrid", "#pager", { add: false, search: false, refresh:false,edit:false }).navButtonAdd('#pager',{


                                    caption:"Export to Excel", 
                                    buttonicon:"ui-icon-save", 
                                    onClickButton: function () {
            jQuery("#list").jqGrid('excelExport', { url: 'ExportExcel.php' });
    }, 
                                    position:"last",

                                });
    jQuery.extend(jQuery.jgrid.edit, {
    recreateForm: true,
    beforeShowForm: function ($form) {
    $("<span id='mydate'></span>").insertAfter("#hello");
    $("#hello").trigger("change"); // to set date
    },
    onclickSubmit: function () {
    return {
    mydate2: $("#mydate").text()
    }
    },
    afterclickPgButtons: function () {
    $("#hello").trigger("change"); // to set date
    } });
        // setup grid print capability. Add print button to navigation bar and bind to click.
        setPrintGrid('list','pager','Current Assignments');

    });

Answer 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 = new Date(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.