Unable to set date format & dropdown text in jqGrid

Question

I am using jqGrid to display data. Data is in xml format. I am unable to format date column (source format : yyyyMMdd, target format : dd-mm-yyy). My Grid is unable to display text value from select, It shows values instead of text.

Strange thing is it is working in some other screen.

    <SalesOpportunitiesLines>
        <row>
            <LineNum>0</LineNum>
            <SalesPerson>1</SalesPerson>
            <StartDate>20131126</StartDate>
            <ClosingDate>20131126</ClosingDate>
            <StageKey>1</StageKey>
            <PercentageRate>0.000000</PercentageRate>
            <MaxLocalTotal>1000000.000000</MaxLocalTotal>
            <DocumentType>bodt_MinusOne</DocumentType>
            <BPChanelName>ACCM Services</BPChanelName>
            <BPChanelCode>CLINAC0709</BPChanelCode>
            <SequenceNo>366</SequenceNo>
            <DataOwnershipfield>1</DataOwnershipfield>
            <BPChannelContact>1212</BPChannelContact>
        </row>
    </SalesOpportunities>

	$("#uxStages").jqGrid({
			datatype: 'xmlstring',
			datastr: xmlstring,
			mtype: 'GET',
			ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
			xmlReader: { repeatitems: false, root: "BO>SalesOpportunitiesLines", row: 'row' },
			colNames: ['LineNum', 'Star tDate', 'Clos Date', 'Sales Employee', 'Stage', 'Percentage', 'Potential Amount', 'Document Type', 'Doc. No.', 'Owner'],
			colModel: [
				{ name: 'LineNum', key: true, index: 'LineNum', hidden: true, sortable: false, width: 60 },
				{ name: 'StartDate', key: false, index: 'StartDate', sortable: false, align: "left", width: 90,
					editable: true,
					formatter: 'date',
					formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
					editoptions: {
						dataInit: function (elem) {
							$(elem).datepicker({ dateFormat: 'dd-M-yy' });
						}

					}
				},
				{ name: 'ClosingDate', key: false, index: 'ClosingDate', sortable: false, align: "left", width: 90,
					editable: true,
					formatter: 'date',
					formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
					editoptions: {
						dataInit: function (elem) {
							$(elem).datepicker({ dateFormat: 'dd-M-yy' });
						}
					}
				},
				{ name: 'SalesPerson', key: false, index: 'SalesPerson', sortable: false, width: 80,
					editable: true,
					edittype: "select"
				},
				{ name: 'StageKey', key: false, index: 'StageKey', hidden: false, sortable: false, width:80,
					editable: true,
					edittype: "select"
				},
				{ name: 'PercentageRate', key: false, index: 'PercentageRate', sortable: false, width: 60 },
				{ name: 'MaxLocalTotal', key: false, index: 'MaxLocalTotal', sortable: false, width: 100,
					editable: true,
					edittype: "text",
					formatter: 'currency',
					formatoptions: { thousandsSeparator: ',' }
				},
				{ name: 'DocumentType', key: false, index: 'DocumentType', sortable: false, width: 90,
					editable: true,
					edittype: 'select',
					formatter: 'select',
					editoptions: { value: "bodt_MinusOne:;bodt_Quotation:Sales Quotations;bodt_Order:Sales Orders;bodt_DeliveryNote:Deliveries;bodt_Invoice:A/R Invoice" }
				},
				{ name: 'DocumentNumber', key: false, index: 'DocumentNumber', sortable: false, width: 40 },
				{ name: 'DataOwnershipfield', key: false, index: 'DataOwnershipfield', hidden: false, sortable: false, width: 60,
					editable: true,
					edittype: "select"
				}
			],
			rowNum: 100,
			viewrecords: true,
			gridview: true,
			rownumbers: true,
			height: 150,
			loadonce: true,
			width: 1120,
			scrollOffset: 0,
			ondblClickRow: function (rowid) {
				var grid = $("#uxStages");
				var selectedRowId = grid.jqGrid('getGridParam', 'selrow');
				lastSelection = selectedRowId;
				grid.jqGrid('editRow', selectedRowId, true, null, null, null, null, OnSuccessEdit_Stages);
				$('#' + selectedRowId + "_StageKey").css('width', '100%');
				$('#' + selectedRowId + "_SalesPerson").css('width', '100%');
				$('#' + selectedRowId + "_DataOwnershipfield").css('width', '100%');
			},
			loadComplete: function () {
				var ids = $("#uxStages").jqGrid('getDataIDs');
				for (var i = 0; i < ids.length; i++) {
					var id = ids[i];
					if (i < ids.length - 1) {
						$('#' + $.jgrid.jqID(id)).addClass('not-editable-row');
						$('#' + $.jgrid.jqID(id)).addClass('ui-state-error');
					}
				}
			},
			onSelectRow: function (id) {
				if (id && id !== lastSelection) {
					var grid = $("#uxStages");
					$('#uxStages').saveRow(lastSelection);
				}
			}
		}).jqGrid('navGrid', { edit: true, edit: true, add: true, del: true, searchOnEnter: false, search: false }, {}, {}, {}, { multipleSearch: false }).trigger('reloadGrid');

		$("#uxStages").setColProp('SalesPerson', { edittype: "select", editoptions: { value: GetSalesValues()} }); //Here i m fetching values in namedvalue pairs
		$("#uxStages").setColProp('StageKey', { edittype: "select", editoptions: { value: GetStagesValues()} }); //Here i m fetching values in namedvalue pairs
		$("#uxStages").setColProp('DataOwnershipfield', { edittype: "select", editoptions: { value: GetDataOwnershipValues()} }); //Here i m fetching values in namedvalue pairs

Can anybody help me out?

Answer 1

The predefined formatter: "date" of jqGrid don't support input fields without separators. So you have to use custom formatter. The implementation could be something like the following

formatter: function (cellValue, opts, rawdata, action) {
    if (action === "edit") {
        // input data have format "dd-mm-yy" format - "20-03-2015"
        var input = cellValue.split("-");
        if (input.length === 3) {
            return input[0] + "-" + input[1] + "-" + input[2];
        }
    } else if (cellValue.length === 8) {
        // input data have format "yymmdd" format - "20150320"
        var year = cellValue.substr(0,4), month = cellValue.substr(4,2),
            day = cellValue.substr(6,2);
        return day + "-" + month + "-" + year;
    }
    return cellValue; // for empty input for example
}

Depend on other options (like the usage of loadonce: true) and depend on exact version of jqGrid which you use, you could need to implement additional callbacks in the column. For example if you use loadonce: true then the editing data will be saved locally. To hold the data in the same format as input data one can use saveLocally callback of free jqGrid (see here). In the case you can implement saveLocally callback in the column as the following

saveLocally: function (options) {
    var input = String(options.newValue).split("-");
    options.newItem[options.cmName] = input.length === 3 ?
        input[2] + input[1] + input[0] :
        options.newValue;
}

See the corresponding demo uses the above code. It uses local input data in the same format. The date will be displayed in the desired format, but the edited data will be saved locally in the same format like original date.