@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.DataSource)
.AllowPaging()
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.ExternalFormTemplate).ExternalFormTemplateID("#template"); })
..
}).ClientSideEvents(eve=>eve.ActionComplete("complete")))
<script type="text/template" id="template">
<b>Order Details</b>
<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>
</tr>
<tr>
<td style="text-align: right;">
Customer ID
</td>
<td style="text-align: left">
<span class="txt">Select Group</span>
<input id="CustomerID" type="text" />
</td>
</tr>
<tr>
<td style="text-align: right;">
Ship City
</td>
<td style="text-align: left">
<span class="txt">Select Country</span>
<input id="ShipCity" type="text" />
</td>
</tr>
</table>
</script>
<script type="text/javascript">
function complete(args) {
if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "externalformtemplate") {
var groups = [
{ parentId: 'a', text: "Group A" },
..
{ parentId: 'd', text: "Group D" },
{ parentId: 'e', text: "Group E" }]
//first level child
var countries = [{ value: "Algeria", parentId: 'a', text: "Algeria", sprite: "flag-dz" },
{ value: "Armenia", parentId: 'a', text: "Armenia", sprite: "flag-am" },
..
{ value: "Thailand", parentId: 'e', text: "Thailand", sprite: "flag-th" },
{ value: "Ukraine", parentId: 'e', text: "Ukraine", sprite: "flag-ua" }]
$('#CustomerID').ejDropDownList({
dataSource: groups,
fields: { value: "parentId", text: "text" },
cascadeTo: 'ShipCity',
change: "onChange",
width: "100%"
});
$('#ShipCity').ejDropDownList({
dataSource: countries,
// enabled: false,
width: "100%"
});
if (args.requestType == "beginedit") {
$("#OrderID").attr("disabled", "disabled");
}
}
}
function onChange() {
var ctry = $('#ShipCity').data("ejDropDownList");
ctry.element.val("");
}
</script> |