Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 145507 | Jun 26,2019 12:49 AM UTC | Jul 5,2019 01:29 PM UTC | ASP.NET Core - EJ 2 | 7 |
|
Tags: DataGrid |
|
<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>
<e-data-manager url="/api/Order" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required= true })" textAlign="Right" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script id='dialogtemplate' type="text/x-template">
<div id="dialogTemp">
</div>
</script>
<script type="text/javascript">
function actionComplete(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
...
}
}
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> |
|
...
namespace EJ2Grid.Controllers
{
[Produces("application/json")]
[Route("api/Order")]
public class OrderController : Controller
{
// GET: api/Orders
[HttpGet]
public object Get()
{
var queryString = Request.Query;
int skip = Convert.ToInt32(queryString["$skip"]);
int take = Convert.ToInt32(queryString["$top"]);
var data = OrdersDetails.GetAllRecords().ToList();
return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() };
}
...
// PUT: api/Orders/5
[HttpPut]
public object Put(int id, [FromBody]OrdersDetails value)
{
var ord = value;
OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault();
val.OrderID = ord.OrderID;
val.EmployeeID = ord.EmployeeID;
val.CustomerID = ord.CustomerID;
val.Freight = ord.Freight;
val.OrderDate = ord.OrderDate;
val.ShipCity = ord.ShipCity;
return value;
}
// DELETE: api/ApiWithActions/5
[HttpDelete("{id:int}")]
[Route("Orders/{id:int}")]
public object Delete(int id)
{
OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault());
return Json(id);
}
...
}
}
|
|
[_DialogEditPartial.cshtml]
<div class="form-row">
<div class="form-group col-md-6">
<ejs-dropdownlist id="ShipCountry" dataSource="@ViewBag.datasource" change="shipCoutryChange" placeholder="Ship Country" floatLabelType="Always" popupHeight="300px">
<e-dropdownlist-fields text="ShipCountry" value="ShipCountry"></e-dropdownlist-fields>
</ejs-dropdownlist>
</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>
[index.cshtml]
function shipCoutryChange(args) {
var shipCoutryObj = document.getElementById("ShipCountry").ej2_instances[0];
var shipCityObj = document.getElementById("ShipCity").ej2_instances[0];
//frame the query based on selected value in ShipCountry DropDownList.
var tempQuery = new ej.data.Query().where('ShipCountry', 'equal', shipCoutryObj.value);
// set the framed query based on selected value in ShipCountry DropDownList.
shipCityObj.query = tempQuery;
// set null value to ShipCity DropDownList text property
shipCityObj.text = null;
// bind the property changes to ShipCity DropDownList
shipCityObj.dataBind();
}
|
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.
