Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 141281 | Dec 4,2018 08:21 AM UTC | Jul 29,2019 10:01 AM UTC | ASP.NET Core - EJ 2 | 7 |
|
Tags: DataGrid |
|
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");
}
}
}
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
