We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
Grid:
<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings> // Enabled the dialog template
.....
</ejs-grid>
<script id='dialogtemplate' type="text/x-template">
<div id="dialogTemp"> // Created the new template element
</div>
</script>
<script type="text/javascript">
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') {
// Called the partial view elements
var ajax = new ej.base.Ajax({
url: "@Url.Action("Editpartial", "Home")", //render the Edit 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 in newly created template with the selected record
args.form.elements.namedItem('CustomerID').focus();
ej.popups.hideSpinner(args.dialog.element);
}).catch(function (xhr) {
console.log(xhr);
ej.popups.hideSpinner(args.dialog.element);
});
}
if (args.requestType === 'add') {
var ajax = new ej.base.Ajax({
url: "@Url.Action("Addpartial","Home")", //render the Add 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();
}
</script>
_DialogAddPartial:
@model EJ2Grid.Controllers.HomeController.Orders
@*//define the model for store the model values*@
@using Syncfusion.EJ2
<div>
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input asp-for="OrderID" type='text' />
<span class="e-float-line"></span>
<label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label>
</div>
</div>
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input asp-for="CustomerID" />
<span class="e-float-line"></span>
<label asp-for="CustomerID" class="e-float-text e-label-top">Customer Name</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<ejs-numerictextbox id="Freight" format="C2" placeholder="Freight" floatLabelType="Always"></ejs-numerictextbox>
</div>
<div class="form-group col-md-6">
<ejs-dropdownlist id="ShipCity" dataSource="@ViewBag.datasource" placeholder="Ship City" floatLabelType="Always" popupHeight="300px">
<e-dropdownlist-fields text="ShipCity" value="ShipCity"></e-dropdownlist-fields>
</ejs-dropdownlist>
</div>
</div>
</div>
<ejs-scripts></ejs-scripts> // EJ2 script manager
_DialogEditPartial:
@model EJ2Grid.Controllers.HomeController.Orders
@*//define the model for store the model values*@
@using Syncfusion.EJ2
<div>
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<span class="e-float-line"></span>
<label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label>
</div>
</div>
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<span class="e-float-line"></span>
<label asp-for="CustomerID" class="e-float-text e-label-top">Customer Name</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<ejs-numerictextbox id="Freight" value=@Model.Freight format="C2" placeholder="Freight" floatLabelType="Always"></ejs-numerictextbox>
</div>
<div class="form-group col-md-6">
<ejs-dropdownlist id="ShipCity" value=@Model.ShipCity dataSource="@ViewBag.datasource" placeholder="Ship City" floatLabelType="Always" popupHeight="300px">
<e-dropdownlist-fields text="ShipCity" value="ShipCity"></e-dropdownlist-fields>
</ejs-dropdownlist>
</div>
</div>
</div>
<ejs-scripts></ejs-scripts> // EJ2 script manager
Controller:
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2Grid.Models;
using Syncfusion.EJ2.Base;
using System.Collections;
namespace EJ2Grid.Controllers
{
public class HomeController : Controller
{
public IActionResult EditPartial([FromBody] CRUDModel<Orders> value)
{
ViewBag.datasource = order;
return PartialView("_DialogEditPartial", value.Value);
}
public IActionResult AddPartial([FromBody] CRUDModel<Orders> value)
{
ViewBag.datasource = order;
return PartialView("_DialogAddPartial");
}
}
}
|
