Question

I’m using a jqgrid with MVC. Here is my markup:

$("#list").jqGrid({
    url: '/GstRate/GstRateGridData/',
    datatype: 'json',
    mtype: 'POST',
    colNames: ['GstRateLookupId', 'Percentage Rate', 'Start Date', 'End Date', 'CreatedByUserName', 'CreatedDateTime', ''],
    colModel: [
          { name: 'GstRateLookupId', index: 'GstRateLookupId', hidden: true, key: true, editable: true, editrules: { required: false }, editoptions: { defaultValue: '0'} },
          { name: 'PercentageRate', index: 'PercentageRate', editable: true, editrules: { required: true} },
          { name: 'StartDate', index: 'StartDate', width: 400, align: 'center', formatter: 'date', editable: true, editrules: { required: true }, formatoptions: { srcformat: 'd/m/y', newformat: 'd-m-y' }, editoptions: { dataInit: function (element) { $(element).datepicker({ dateFormat: 'd-m-y' }) } } },
          { name: 'EndDate', index: 'EndDate', width: 400, align: 'center', editable: true, formatter: 'date', formatoptions: { srcformat: 'd/m/y', newformat: 'd-m-y' }, editoptions: { dataInit: function (element) { $(element).datepicker({ dateFormat: 'd-m-y' }) } } },
          { name: 'CreatedByUserName', index: 'CreatedByUserName', hidden: true, editable: true, editrules: { required: false} },
          { name: 'CreatedDateTime', index: 'CreatedDateTime', hidden: true, editable: true, editrules: { required: false} },
          { name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: true, delbutton: false} }
          ],
    pager: $('#pager'),
    rowNum: 10,
    rowList: [5, 10, 20, 50],
    viewrecords: true,
    imgpath: '',
    caption: 'Gst Rates',
    editurl: '/GstRate/SaveGstRate/'
});
$("#list").navGrid('#pager', { edit: false, add: true, del: true, search: false }, {}, {}, { url: "/../GstRate/DeleteGstRate" });

This is working fine but I want to enhance it so that when a new entry is added the startdate value is readonly and defaults to the end date value of the last entry in the database.

The only way I can think of doing this is by somehow calling a server side method to populate the start date in the pop up create new dialog box.

I was thinking of using the dataUrl value in the editoptions to do this but this dataUrl only seems to work for when populating a select list. I don’t want a select list here just a readonly text box.

Does anyone know how to achieve this?

Answer 1

I see two different solution ways:

1. You use beforeShowForm callback set input field of ‘StartDate’ to readonly and then send request to the server manually per $.ajax. Inside of success callback of the requests you can set the data in the input field of ‘StartDate’ received from the server.
2. If you fill the grid you use userdata to save additional information in the grid. Inside of dataInit of the ‘StartDate’ you get the data which you need from internal userData parameter and make the initialization of the input field.