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.
Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 142012 | Jan 14,2019 10:09 PM UTC | Feb 22,2019 03:43 AM UTC | ASP.NET Core - EJ 2 | 15 |
|
Tags: DataGrid |
|
Index.cstml
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
@{
var dropDownData = (IndexModel.PaperViewModel)ViewData["Data"];
}
<div>
<ejs-grid id="Grid" toolbar="@(new List<string>() {"ExcelExport", "Add", "Update", "Cancel" })">
<e-grid-editsettings allowEditing="true" allowAdding="true"></e-grid-editsettings>
<e-grid-columns>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"
editType="dropdownedit" edit="@(new { @params = new {dataSource = dropDownData.tsTypes, fields = new {value = "ShipCountry", text = "ShipCountry"} } })"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
Index.cshtml.cs
public class IndexModel : PageModel
{
public void OnGet()
{
var enrolPapers = new List<EnrolPaper>()
{
new EnrolPaper(){ ShipCountry = "France" },
new EnrolPaper(){ ShipCountry = "Denmark"},
new EnrolPaper(){ ShipCountry = "Brazil"},
new EnrolPaper(){ ShipCountry = "Germany"}
};
ViewData["Data"] = new PaperViewModel
{
tsTypes = enrolPapers
};
}
public class PaperViewModel
{
public IList<EnrolPaper> tsTypes { get; set; }
}
public class EnrolPaper
{
public string ShipCountry { get; set; }
}
} |
|
<ejs-grid id="Grid1" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel" })" allowGrouping="true" allowPaging="true">
<e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editsettings>
<e-data-manager url="/Home/UrlDatasource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/CellEditDelete" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="150"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
var elem;
var dObj;
function create(args) {
elem = document.createElement('input');
return elem;
}
function write(args) {
dObj = new ej.dropdowns.DropDownList({
dataSource: new ej.data.DataManager({
url: "/Home/DropDatasource",
adaptor: new ej.data.UrlAdaptor()
}),
fields: { text: 'OptionText', value: 'countryId' },
popupHeight: '230px',
value: args.rowData[args.column.field]
});
dObj.appendTo(elem);
}
function destroy() {
dObj.destroy();
}
function read(args) {
return dObj.value;
}
</script> |
|
...
<script>
...
function create(args) {
elem = document.createElement('input');
return elem;
}
function write(args) {
dObj = new ej.dropdowns.DropDownList({
dataSource: new ej.data.DataManager({
url: "/Index?handler=DropDataSource",
adaptor: new ej.data.UrlAdaptor()
}),
fields: { text: 'OptionText', value: 'countryId' },
popupHeight: '230px',
value: args.rowData[args.column.field],
});
dObj.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]
dObj.appendTo(elem);
}
...
</script> |
|
public JsonResult OnPostDataSource([FromBody]Data dm)
{
var data = OrdersDetails.GetAllRecords();
int count = data.Cast<OrdersDetails>().Count();
return dm.requiresCounts ? new JsonResult(new { result = data.Skip(dm.skip).Take(dm.take), count = count }) : new JsonResult(data);
}
public JsonResult OnPostDropDataSource([FromBody]Data dm)
{
var data = Customer.GetDropData();
int count = data.Cast<Customer>().Count();
return dm.requiresCounts ? new JsonResult(new { result = data, count = count }) : new JsonResult(data);
}
public class Customer
{
public static List<Customer> drop = new List<Customer>();
public int countryId { get; set; }
public string OptionText { get; set; }
public Customer()
{
}
public Customer(int id, string name)
{
this.countryId = id;
this.OptionText = name;
}
public static List<Customer> GetDropData()
{
drop.Add(new Customer() { countryId = 1, OptionText = "Reims" });
...
drop.Add(new Customer() { countryId = 5, OptionText = "Resende" });
return drop;
}
} |
|
function write(args) {
dObj = new ej.dropdowns.DropDownList({
dataSource: new ej.data.DataManager({
url: "/Index?handler=DropDataSource",
adaptor: new ej.data.UrlAdaptor()
}),
fields: { text: 'OptionText', value: 'countryId' }, // Provide the field name in text property to show in DropDownList
popupHeight: '230px',
value: args.rowData[args.column.field],
});
dObj.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]
dObj.appendTo(elem);
}
|
|
...
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})">
<e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings>
<e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Text" foreignKeyField="CustomerID" foreignKeyValue="OptionText" dataSource="@Model.DropDatasource" width="150"></e-grid-column>
<e-grid-column field="CustomerName" headerText="CustomerName" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
...
|
|
<script>
...
function write(args) {
dObj = new ej.dropdowns.DropDownList({
dataSource: @Html.Raw(Json.Serialize(Model.DropDatasource)),
fields: { text: 'OptionText', value: 'countryId' },
popupHeight: '230px',
value: args.rowData[args.column.field],
});
dObj.appendTo(elem);
}
function destroy() {
dObj.destroy();
}
function read(args) {
return dObj.value;
}
</script> |
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.
