164 строки
9.6 KiB
HTML
164 строки
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Essential JS 1 : External Form on Local data</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta charset="utf-8" />
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js"></script>
|
|
<![endif]-->
|
|
<!--[if gte IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js"></script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/jquery.validate.min.js"></script>
|
|
<script src="../scripts/jquery.validate.unobtrusive.min.js"></script>
|
|
<script src="../scripts/jsondata.min.js"></script>
|
|
<script src="../scripts/jsrender.min.js"></script>
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="Grid"></div>
|
|
<div id="template" style="display: none">
|
|
<table cellspacing="10">
|
|
<tr>
|
|
<td style="text-align: right;">Order ID
|
|
</td>
|
|
<td style="text-align: left">
|
|
<input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" />
|
|
</td>
|
|
<td style="text-align: right;">Customer ID
|
|
</td>
|
|
<td style="text-align: left">
|
|
<input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" style="width: 116px; height: 28px" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right;">Freight
|
|
</td>
|
|
<td style="text-align: left">
|
|
<input type="text" id="Freight" name="Freight" value="{{:Freight}}" class=" e-ejinputtext valid" />
|
|
</td>
|
|
<td style="text-align: right;">Ship Country
|
|
</td>
|
|
<td style="text-align: left">
|
|
<select id="ShipCountry" name="ShipCountry">
|
|
<option value="Argentina">Argentina</option>
|
|
<option value="Austria">Austria</option>
|
|
<option value="Belgium">Belgium</option>
|
|
<option value="Brazil">Brazil</option>
|
|
<option value="Canada">Canada</option>
|
|
<option value="Denmark">Denmark</option>
|
|
<option value="Finland">Finland</option>
|
|
<option value="France">France</option>
|
|
<option value="Germany">Germany</option>
|
|
<option value="Ireland">Ireland</option>
|
|
<option value="Italy">Italy</option>
|
|
<option value="Mexico">Mexico</option>
|
|
<option value="Norway">Norway</option>
|
|
<option value="Poland">Poland</option>
|
|
<option value="Portugal">Portugal</option>
|
|
<option value="Spain">Spain</option>
|
|
<option value="Sweden">Sweden</option>
|
|
<option value="Switzerland">Switzerland</option>
|
|
<option value="UK">UK</option>
|
|
<option value="USA">USA</option>
|
|
<option value="Venezuela">Venezuela</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right;">Ship City
|
|
</td>
|
|
<td style="text-align: left">
|
|
<input id="ShipCity" name="ShipCity" value="{{: ShipCity}}" class="e-field e-ejinputtext valid" style="width: 116px; height: 28px" />
|
|
</td>
|
|
<td style="text-align: right;">Ship Name
|
|
</td>
|
|
<td style="text-align: left">
|
|
<input id="ShipName" name="ShipName" value="{{: ShipName}}" class="e-field e-ejinputtext valid" style="width: 116px; height: 28px" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right;">Ship Address
|
|
</td>
|
|
<td style="text-align: left">
|
|
<textarea id="ShipAddress" class="e-ejinputtext" name="ShipAddress">{{: ShipAddress}}</textarea>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="sampleProperties">
|
|
<div class="prop-grid">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
Edit mode
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select id="editMode" class="e-ddl" data-bind="value: field">
|
|
<option value="externalform" selected="selected">External Form</option>
|
|
<option value="externalformtemplate">External Template</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
var element = $("#Grid");
|
|
element.ejGrid({
|
|
dataSource: window.gridData,
|
|
allowPaging: true,
|
|
enableAltRow: true,
|
|
actionComplete:complete,
|
|
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: ej.Grid.EditMode.ExternalForm, formPosition: "bottomLeft" },
|
|
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
|
|
columns: [
|
|
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },
|
|
{ field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },
|
|
{ field: "Freight", headerText: 'Freight', format: "{0:C}", textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 75, editParams: { decimalPlaces: 2 } },
|
|
{ field: "ShipCountry", headerText: "Ship Country", editType: ej.Grid.EditingType.Dropdown, width: 85 },
|
|
{ field: "ShipCity", headerText: 'Ship City', width: 90 }
|
|
]
|
|
});
|
|
$("#editMode").ejDropDownList({ "change": "selectChange", width: "120px", selectedItemIndex: 0 })
|
|
var shipCountry_ddl = [];
|
|
$.each(ej.dataUtil.distinct(ej.DataManager(window.gridData).executeLocal(ej.Query().select("ShipCountry"))), function (index, val) {
|
|
shipCountry_ddl.push({ text: val, value: val });
|
|
});
|
|
window.shipCountry_ddl = shipCountry_ddl;
|
|
});
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|
function selectChange(args) {
|
|
var gridObj = $("#Grid").data("ejGrid");
|
|
if (gridObj.model.isEdit && $("#Grid_externalEdit").css("display") == "block")
|
|
$("#Grid").ejGrid("cancelEdit");
|
|
if (this.getSelectedValue() == "externalformtemplate")
|
|
$("#Grid").ejGrid("option", { "editSettings": { editMode: this.getSelectedValue(), externalFormTemplateID: "#template" } });
|
|
else
|
|
$("#Grid").ejGrid("option", { "editSettings": { editMode: this.getSelectedValue() } });
|
|
}
|
|
function complete(args) {
|
|
if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "externalformtemplate") {
|
|
$("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()),width:'116px', height: "34px", decimalPlaces: 2 });
|
|
$("#ShipCountry").ejDropDownList({ width: '116px' });
|
|
args.requestType == "beginedit" && $("#ShipCountry").ejDropDownList("setSelectedValue", args.row.children().eq(3).text());
|
|
$(".e-field").css({ 'width': '116px', 'text-align': 'left' });
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|