BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<ejs-grid id="Grid" gridLines="Both" actionComplete="actionComplete" toolbarClick="toolbarClick" actionBegin="actionBegin" toolbar=toolbarItems>
. . .
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>
<e-grid-columns>
. . .
<e-grid-column field="ShipCountry" width="100" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"> </e-grid-column>
. . .
</ejs-grid>
<script>
var title;
var elem;
var dropdown;
function actionComplete(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
let spinner = ej.popups.createSpinner({ target: args.dialog.element });
ej.popups.showSpinner(args.dialog.element);
if (args.requestType === 'beginEdit') {
args.rowData.ShipCountry = dropdown.value;
var ajax = new ej.base.Ajax({
url: "@Url.Action("EditPartial", "Home")", //render the partial view
type: "POST",
contentType: "application/json",
data: JSON.stringify({ value: args.rowData })
});
ajax.send().then(function (data) {
appendElement(data, args.form); //Render the edit form with selected record
args.form.elements.namedItem('OrderID').focus();
ej.popups.hideSpinner(args.dialog.element);
}).catch(function (xhr) {
console.log(xhr);
ej.popups.hideSpinner(args.dialog.element);
});
}
}
}
function appendElement(elementString, form) {
form.querySelector("#dialogTemp").innerHTML = elementString;
var script = document.createElement('script');
script.type = "text/javascript";
var serverScript = form.querySelector("#dialogTemp").querySelector('script');
script.textContent = serverScript.innerHTML;
document.head.appendChild(script);
serverScript.remove();
}
function actionBegin(args) {
if (args.requestType === 'save') {
// array type value will be changed as string and sent to server side.
args.data.ShipCountry = args.data.ShipCountry.toString();
}
}
function create() {
elem = document.createElement('input');
return elem;
}
function read(args) {
var instances = document.getElementById('ShipCountry').ej2_instances[0];
return instances.value;
}
function write(args) {
dropdown = new ej.dropdowns.MultiSelect({
dataSource: data,
fields: { value: "ShipCountry" , text : "ShipCountry"},
mode: 'CheckBox',
showSelectAll: true,
showDropDownIcon: true,
placeholder: 'Field',
filterBarPlaceholder: 'Search Field',
popupHeight: '350px',
// value will be changed as corresponding type.
value: typeof (args.rowData.ShipCountry) === 'string' ? args.rowData.ShipCountry.split(',') : args.rowData.ShipCountry,
});
dropdown.appendTo(elem);
}
function destroy() {
dropdown.destroy();
}
</script>
|
<ejs-multiselect id="multiselectfor" name="Variable3" ejs-for="@Model.Variable3" dataSource="selectionValues" allowCustomValue="false" placeholder="Selection Values" mode="Box">
<e-multiselect-fields text="Name" value="Id"></e-multiselect-fields>
</ejs-multiselect>
<div class="control-section">
<ejs-grid id="Grid" actionBegin="begin" actionComplete="gridActionComplete" allowPdfExport="false" allowExcelExport="false" toolbar="toolbarItems" allowSorting="false" allowMultiSorting="true" allowPaging="false" allowFiltering="false">
<e-data-manager url="@Url.Action("DataSource", "Home")" updateUrl="@Url.Action("SaveData", "Home")" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-editSettings mode="Dialog" template='#dialogtemplate' allowAdding="false" allowDeleting="false" allowEditing="true"></e-grid-editSettings>
<e-grid-columns>
. . . . . . . .
</e-grid-columns>
</ejs-grid>
</div>
</div>
<script>
// GRID EVENTS
function begin(args) {
if (args.requestType === 'save') {
args.data.Variable3 = document.getElementsByClassName('e-multiselect')[1].ej2_instances[0].value.toString();
// array type value will be changed as string and sent to server side.
}
}
</script>
|