<link rel="stylesheet" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/packages/ParamQuery/pqgrid.dev.css" />
<!--<link rel="stylesheet" href="/packages/ParamQuery/themes/office/trax.css" />--->
<div id="grid_custom_editing" style="margin:auto;"></div>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="/packages/ParamQuery/pqgrid.min.js"></script>
<script type="text/javascript">
$(function () {
var data = [{
ShipViaId: 'SE', ShipVia: 'Speedy Express'
}];
var colM = [
{ dataIndx: "ShipViaId", title: "Shipping Via ID", editable: false },
{ title: "Shipping Via", dataIndx: "ShipVia", width: 110,
editor: {
type: 'select',
valueIndx: "value",
labelIndx: "text",
options: [{"value": "", "text": ""}, {"value": "SE", "text": "Speedy Express" }, {"value": "UP", "text": "United Package" }, {"value": "FS", "text": "Federal Shipping"}] ,
mapIndices: { "text": "ShipVia", "value": "ShipViaId" }
},
validations: [{ type: 'minLen', value: 1, msg: "Required"}]
}
];
var dataModel = {
dataType: "JSON",
location: "local",
data: data
};
$("div#grid_custom_editing").pqGrid({
colModel: colM,
dataModel: dataModel,
editModel: {
saveKey: $.ui.keyCode.ENTER,
keyUpDown: false,
clicksToEdit: 1
},
historyModel: { checkEditable: false },
numberCell: { show: false },
resizable: true,
scrollModel: { autoFit: true },
selectionModel: { type: 'cell' },
showBottom: false,
title: "Shipping Orders <b>(Custom editing)</b>"
});
});
</script>
