...
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})">
<e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editsettings>
<e-data-manager url="/Index?handler=DataSource" batchUrl="/Index?handler=BatchUpdate" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="120" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})"></e-grid-column>
...
</e-grid-columns>
</ejs-grid>
<script>
var multiSelectEle;
var element
function onCreate(args) {
element = document.createElement('input');
return element;
}
function onRead(e) {
return multiSelectEle.value;
}
function onDestroy() {
multiSelectEle.destroy();
}
function onWrite(args) {
multiSelectEle = new ej.dropdowns.MultiSelect({ //rendering multiSelectEle component
dataSource: new ej.data.DataManager({
url: '/Index?handler=MultiDropDataSource',
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true,
headers: [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]
}),
query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(), fields: { text: "FirstName", value: 'FirstName' },
// set the placeholder to multiSelectEle input element
placeholder: 'e.g. Andrew Fuller',
// sort the resulted items
sortOrder: 'Ascending',
// set the filterType to searching operation
filterType: 'StartsWith',
value: args.rowData[args.column.field]
});
multiSelectEle.appendTo(element);
}
...
</script>
|