<ejs-grid id="Grid" allowPaging="true" load="onLoad" actionComplete="actionComplete" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template="#dialogtemplate"></e-grid-editSettings>
<e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager>
. . . . .
<e-grid-columns>
. . . . .
<e-grid-column field="OrderDate" headerText="OrderDate" editType="datepickeredit" format="yMd" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script id='dialogtemplate' type="text/x-template">
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input id="OrderID" name="OrderID" type="text" value="${OrderID}" ${if(isAdd)} ${else} disabled ${/if} />
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="OrderID">Order ID</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input name="Freight" id="Freight" value=${Freight} />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<input type="text" name="OrderDate" id="OrderDate" value=${OrderDate} />
</div>
</div>
</script>
<script>
function actionComplete(args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
var data = args.rowData;
// Convert Widget for the Freight field
new ej.inputs.NumericTextBox({ value: data.Freight, format: 'C2', placeholder: 'Freight', floatLabelType: 'Always' },
args.form.elements.namedItem('Freight'));
// Convert Widget for the OrderDate field
new ej.calendars.DatePicker({ value: data.OrderDate, placeholder: 'Order Date', floatLabelType: 'Always' },
args.form.elements.namedItem('OrderDate'));
if (args.requestType === 'add') {
args.form.elements.namedItem('OrderID').focus();
}
}
}
</script> |
<input type="text" name="ShipCity" id="ShipCity" value=${if(isAdd)} '' ${else} ${ShipCity} ${/if} />
|
...
<div>
<ejs-grid id="Grid" locale="it" allowPaging="true" actionBegin="actionBegin" allowSorting="true" allowFiltering="true" height="273" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
...
<e-grid-columns>
...
</e-grid-columns>
</ejs-grid>
</div>
<script>
function actionBegin(args) {
if (args.requestType == "save") {
var grid = document.getElementById("Grid").ej2_instances[0];
var cols = grid.columns;
for (var i = 0; i < cols.length; i++) {
if (cols[i].type == "date") {
var date = args.data[cols[i].field];
args.data[cols[i].field] = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMilliseconds()));
}
}
}
}
</script> |
<script>
ej.data.DataUtil.serverTimezoneOffset = (2 * (new Date().getTimezoneOffset() / 60)); //Set the servertimezoneoffset
</script>
<ejs-grid id="Grid" allowPaging="true" load="onLoad" actionComplete="actionComplete" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template="#dialogtemplate"></e-grid-editSettings>
<e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
. . . .
</e-grid-columns>
</ejs-grid> |