|
App.vue
@Html.EJS().Grid("Validation").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").ValidationRules(new { required = "true"}).Edit(new { create = "create", read = "read", destroy = "destroy", write = "write"}).Width("150").Add();
}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
<script>
var elem;
var dObj;
var data = @Html.Raw(Json.Encode(ViewBag.DataSource));
var shipCountryData = ej.data.DataUtil.distinct(data, 'ShipCountry', true);
function create(args) {
elem = document.createElement('input');
return elem;
}
function write(args) {
dObj = new ej.dropdowns.DropDownList({
dataSource: shipCountryData,
fields: { text: 'ShipCountry', value: 'ShipCountry' }, placeholder: 'Ship Country'
});
dObj.appendTo(elem);
}
function destroy() {
dObj.destroy();
}
function read(args) {
return dObj.value;
}
</script> | 
