@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging() /*Paging Enabled*/
.ClientSideEvents(ce=>ce.ActionComplete("complete"))
.EditSettings(es => { es.AllowAdding().AllowDeleting().AllowEditing(); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").AllowEditing(true).EditType(EditingType.Dropdown).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
}))
<script type="text/javascript">
function complete(args) {
if (args.requestType == "beginedit") {
var dropdownObj = $("#" + this._id + "EmployeeID").ejDropDownList('instance'); /* Get the object of EmployeeId column ejDropDownList */
dropdownObj.option({enableFilterSearch:true}); /*Enable the filtersearch property to the ejDropDownList control.
}
}
</script>
|
let grid: Grid = new Grid(
{
dataSource: orderData,
. . .
columns: [
. . .
{
field: 'ShipCountry', headerText: 'Ship Country', editType:'dropdownedit', width: 150,
edit: { create: () => {
elem = document.createElement('input');
return elem;
},
read: () => {
return dropdownObj.value;
},
destroy: () => {
dropdownObj.destroy();
},
write: (args: { rowData: Object, column: Column }) => {
dropdownObj = new DropDownList({
// set the local data to dataSource property
dataSource: orderData,
// map the appropriate columns to fields property
fields: { text: 'ShipCountry' },
// set the value to DropDownList
value: args.rowData[args.column.field],
//binding the change event of Dropdown list
change: ()=>{
//Save the Grid edited row while changing the Dropdown list
document.querySelector("#Grid").ej2_instances[0].editModule.endEdit()
},
// set the height of the popup element
popupHeight: '200px'
});
dropdownObj.appendTo(elem);
}
. . . |
change: ()=>{
//Save the Grid edited row while changing the Dropdown list
grid.editModule.endEdit()
},
|
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
----
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},
editTemplate: {
create: function () {
return "<input>";
},
read: function (args) {
return args.ejDropDownList("getSelectedValue");
},
write: function (args) {
var data = ej.DataManager(window.gridData).executeLocal(new ej.Query().select("CustomerID"));
args.element.ejDropDownList({ width: "100%", change: "DropDownChangeEvent", dataSource: data, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" });
}
}, width: 90
},
----
]
});
});
function DropDownChangeEvent(args){
var gridObj = $("#Grid").ejGrid('instance');
gridObj.endEdit();
}
</script>
|
<script type="text/javascript">
$(function () {
var data = window.gridData;
var dropdata = [ { key:"1", value: "Nancy" }, { key:"2", value: "Andrew" }, { key:"3", value: "Janet" },
---
];
$("#Grid").ejGrid({
dataSource: data,
---
columns: [
{ field: "OrderID", width: 80, isPrimaryKey: true,textAlign: ej.TextAlign.Right,validationRules: {required:true, number: true },headerText: "Order ID"} ,
{ field: "EmployeeID", foreignKeyField: "key", foreignKeyValue: "value", dataSource: dropdata, width: 75, headerText: "First Name", editTemplate: {
create: function () {
return "<input>";
},
read: function (args) {
return args.ejDropDownList("getSelectedValue");
},
write: function (args) {
args.element.ejDropDownList({ width: "100%",fields: { text: "value", value: "key" }, change: "DropDownChangeEvent", dataSource: dropdata, value: args.rowdata !== undefined ? args.rowdata["EmployeeID"] : "" });
}
} },
----
]
});
});
|