'Date To' should be the beginning of 'Date From' modal popup jqgrid

Question

Hi im using Jqgrid in MVC and the requirement is as such.. In the Model popup of jqgrid to add/edit a row.. I have 4 columns..
DateFrom, DateTo, Type, Remarks
And im using jquery datepicker..
My Requirement
After adding the 1st row.. while adding the second row.. the DateFrom field(of the second row) should be the next date of DateTo field of the previously added row.

This is my Grid

    initDateEdit = function (elem) {
                setTimeout(function () {
                    $(elem).datepicker({
                        dateFormat: "m-d-yy",
                        showOn: "button",
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                }, 50);
    },
    initDateSearch = function (elem) {
                setTimeout(function () {
                    $(elem).datepicker({
                        dateFormat: "m-d-yy ",
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                }, 50);
    },

    jQuery("#dateGrid").jqGrid({
            height: 100,
            width: 1000,
            colNames: ['DateFrom', 'DateTo', 'Type', 'Remarks'],
            colModel: [

                {
                    name: 'DateFrom', index: 'DateFrom', width: 60, editable: true, sorttype: "date",
                    formatter: 'date',
                    formatoptions: {
                        srcformat: 'm/d/Y',

                    },
                    editoptions: { dataInit: initDateEdit, size: 14 },

                },
                {
                    name: 'DateTo', index: 'DateTo', width: 80, editable: true, sorttype: "date",
                    formatter: 'date',
                    formatoptions: {
                        srcformat: 'm/d/Y',

                    },
                    editoptions: {
                        dataInit: initDateEdit, size: 14,

                    },

                },
                {
                    name: 'Type', width: 80, editable: true, formatter: "select",
                    edittype: "select", editoptions: { value: "Open:Open;Maintainance:Maintainance;Closed:Closed", defaultValue: "Open" },
                },
                 {
                     name: 'Remarks', index: 'Remarks', width: 80, editable: true
                 }
                ,
            ],
            // multiselect:true,
            pager: "#datePager",
            loadonce: true,
            sortname: 'Client',
            ignoreCase: true,
            sortorder: 'asc',
            gridview: true,
            autoencode: true,
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            caption: "Add Durations",
            viewrecords: true,
            editurl: "clientArray",
            onSelectRow: function (id) {
                var selRows = $(this).jqGrid('getGridParam', 'selarrrow');
                if (selRows.length > 1) {
                    btnEdit.disabled = true;
                    btnDel.disabled = true;
                }

                else if (selRows.length == 1) {
                    btnEdit.disabled = false;
                    btnDel.disabled = false;
                }
            },




    }).jqGrid("navGrid", "#datePager", { search: true, edit: false, add: false, del: false, searchtext: "Search" }, {}, {}, {
            multipleSearch: true,
            overlay: false,
            onClose: function () {

                $("div#ui-datepicker-div.ui-datepicker").hide();
            }
    }).jqGrid("filterToolbar", { defaultSearch: "cn" });
});

So now i need to access the DateTo value of first row in grid.. And in the defaultvalue of DateFrom write a function to add 1 to the obtained date from DateTo and display it in the DateFrom Can someone please give me any demo/help to how exactly to get this functionality working? Thanks!

Answer 1

This is the solution I eventually found out.

jQuery("#GridId").jqGrid({

        height: 100,
        width: 1000,
        colNames: ['Date From', 'Date To', 'Type', 'Remarks'],
        colModel: [
            {
                name: 'DateFrom', index: 'DateFrom', width: 60, editable: true, sorttype: "date",
                formatter: 'date',
                formatoptions: {
                    srcformat: 'm/d/Y',

                },
                editoptions: { dataInit: initDateEdit, size: 14 ,
                    defaultValue: function () {




                        var ids = $("#GridId").jqGrid('getDataIDs');
                        if (ids.length >= 1) {
                            //get first id
                            var cl = ids[0];
                            //fetch row data 
                            var rowData = $("#GridId").getRowData(cl);
                            //fetch individual cell value
                            var celValue = $("#GridId").jqGrid('getCell', cl, 'DateTo');

                            var currentTime = new Date(celValue);

                            var month = parseInt(currentTime.getMonth() + 1);
                            month = month <= 9 ? "0" + month : month;

                            var day = currentTime.getDate();
                            day = day <= 9 ? "0" + day : day;

                            var year = currentTime.getFullYear();
                           var  months= [31,28,31,30,31,30,31,31,30,31,30,31];

                           var ndays = months[month - 1];
                            if (month == 02)
                            {
                                if (year % 100 == 0)
                                {
                                    if (year % 400 == 0)
                                        ndays=29;
                                }
                                else
                                    if (year % 4 == 0)
                                        ndays=29;
                            }
                            day = day + 1;

                            if(day>ndays)
                            {
                                day = 1;
                                month++;
                            }
                            if (month > 12)
                            {
                                month = 1;
                                year++;
                            }                              
                            return month + "/" + day + "/" + year;
                        }

                        return null;

                    }
                },



            },
            {
                name: 'DateTo', index: 'DateTo', width: 80, editable: true, sorttype: "date",
                formatter: 'date',
                formatoptions: {
                    srcformat: 'm/d/Y',

                },
                editoptions: { dataInit: initDateEdit, size: 14 },

            },
            {
                name: 'Type', width: 80, editable: true, formatter: "select",
                edittype: "select", editoptions: { value: "Occupied:Occupied;Vacant:Vacant;Maintainance:Maintainance", defaultValue: "Occupied" },
            },
             {
                 name: 'Remarks', index: 'Remarks', width: 80, editable: true
             }
            ,
        ],
        // multiselect:true,
        pager: "#GridPAger",


        loadonce: true,
        sortable:true,

        sortname: 'Client',
        ignoreCase: true,
        sortorder: 'asc',
        gridview: true,
        autoencode: true,
        rowNum: 10,
        rowList: [5, 10, 20, 50],

        viewrecords: true,
        editurl: "clientArray",
        onSelectRow: function (id) {
            var selRows = $(this).jqGrid('getGridParam', 'selarrrow');
            if (selRows.length > 1) {
                btnEdit.disabled = true;
                btnDel.disabled = true;
            }

            else if (selRows.length == 1) {
                btnEdit.disabled = false;
                btnDel.disabled = false;
            }
        },




    }).jqGrid("navGrid", "#GridPAger", { search: true, edit: false, add: false, del: false, searchtext: "Search" }, {}, {}, {
        multipleSearch: true,
        overlay: false,
        onClose: function () {
            // if we close the search dialog during the datapicker are opened
            // the datepicker will stay opened. To fix this we have to hide
            // the div used by datepicker
            $("div#ui-datepicker-div.ui-datepicker").hide();
        }
    }).jqGrid("filterToolbar", { defaultSearch: "cn" });
});