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.
|
<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();
}
|
