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.
|
[Index.cshtml]
@(Html.EJ().Grid<MvcApplication.Models.OrdersView>("Edittemplate")
.Datasource((IEnumerable<object>)ViewData["Getdata"])
.ClientSideEvents(e => e.Load("onLoad"))
.AllowPaging()
.AllowSorting()
.Columns(col =>
{
col.Field("FirstName").HeaderText("Name").Width(90).Add();
})
)
<script type="text/javascript">
var employeeData =@Html.Raw(Json.Encode(@ViewData["Employee"]));
var obj = [{ dataSource: employeeData, foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName" }];
function onLoad(args) {
this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor(obj,"remoteSaveAdaptor");
}
</script>
|
|
[Index.cshtml]
@(Html.EJ().Grid<MvcApplication.Models.OrdersView>("Edittemplate")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewData["Getdata"]).UpdateURL("/Home/Update").InsertURL("/Home/Insert").RemoveURL("/Home/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor))
.ClientSideEvents(e => e.Load("onLoad"))
.Columns(col =>
{
...............................
col.Field("FirstName").HeaderText("Name").Width(90).Add();
})
)
<script type="text/javascript">
var employeeData =@Html.Raw(Json.Encode(@ViewData["Employee"]));
var obj = [{ dataSource: employeeData, foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName" }];
function onLoad(args) {
this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor(obj,"remoteSaveAdaptor");
}
</script>
|
I would like to do the same thing as this. However, I am using the ASP.NET Core Grid control. How would it be possible to sort on a foreign key column based on displayed values (rather than the ID column of the datasource) in ASP.NET Core, instead of MVC?
|
<ej-grid id="FlatGrid" allow-paging="true" load="onLoad" allow-sorting="true" >
<e-datamanager json="(IEnumerable<object>)ViewBag.data" adaptor="remoteSaveAdaptor" />
<e-columns>
...
<e-column field="FirstName" width="75"></e-column>
</e-columns>
</ej-grid>
<script type="text/javascript">
var employeeData =@Html.Raw(Json.Serialize(ViewBag.employee));
var obj = [{ dataSource: employeeData, foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName" }];
function onLoad(args) {
this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor(obj,"remoteSaveAdaptor");
}
</script> |
I am not able to get this to work for me. I have used the code as instructed, but it does not work in my grid. The column just comes up empty without values. As a note, my page has two separate grids on it. Does having two grids on the same page cause an issue with this functionality? I only need this foreign key sorting behavior on one of the grids. As a secondary note, my grids are editable. I noticed that the sample does not have editing capability. Is this a problem, because I still need the IDs when I save records. I just need the name or description for viewing and sorting only.
|
<ej-grid id="FlatGrid" allow-paging="true" load="onLoad" allow-sorting="true" >
<e-datamanager json="(IEnumerable<object>)ViewBag.data" insert-url="/Home/NormalInsert" update-url="/Home/NormalUpdate" remove-url="/Home/NormalDelete" adaptor="remoteSaveAdaptor" />
...
<e-columns>
...
<e-column field="FirstName" width="75"></e-column> //firstName is field of foreign key.
<e-column field="ShipCity" header-text="Ship City" width="75"></e-column>
</e-columns>
</ej-grid>
<br />
<ej-grid id="Grid" allow-paging="true" load="onLoad" allow-sorting="true">
... //second grid
</ej-grid>
<script type="text/javascript">
var employeeData =@Html.Raw(Json.Serialize(ViewBag.employee));
var obj = [{ dataSource: employeeData, foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName" }];
function onLoad(args) { // bind using load event in grid.
this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor(obj,"remoteSaveAdaptor");
}
</script>
|
|
div id="divGrid" class="div-grid">
<div id="divGridCat" class="is-hidden">
<ej-grid id="gridCat" allow-paging="true" allow-sorting="true" allow-resizing="true" enable-alt-row="true" load="onLoad" allow-scrolling="false">
...
</ej-grid>
</div>
<div id="divGridItem">
<ej-grid id="gridItem" allow-paging="true" allow-sorting="true" allow-resizing="true" enable-alt-row="true" allow-scrolling="false" create="resizeGrid">
...
</ej-grid>
</div>
</div>
<script type="text/javascript">
...
var catData = @Html.Raw(Json.Serialize(ViewBag.DataSourceCats));
var obj = [{ dataSource: catData, foreignKeyField: "CategoryId", foreignKeyValue: "Description" }];
function onLoad(args) { // bind using load event in grid.
this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor(obj,"remoteSaveAdaptor");
}
... |
|
<ej-grid id="FlatGrid" load="onLoad" allow-paging="true" allow-sorting="true" allow-resizing="true" enable-alt-row="true" allow-scrolling="false">
<e-datamanager json="(IEnumerable<object>)ViewBag.data" insert-url="/Home/NormalInsert" update-url="/Home/NormalUpdate" remove-url="/Home/NormalDelete" adaptor="remoteSaveAdaptor" />
... //ViewBag.Data is the datasource for the grid that contains EmployeeID as one of the field
<e-columns>
...
<e-column field="FirstName" width="75" edit-type="String" validation-rules='@(new Dictionary<string,object> { {"required",true}, {"maxlength",50} })' />
//Here FirstName is the foreignKeyValue of another table
</e-columns>
...
</ej-grid>
<br />
<ej-grid id="Grid" allow-paging="true" allow-sorting="true" allow-resizing="true" enable-alt-row="true" allow-scrolling="false" create="resizeGrid">
...
</ej-grid>
<script type="text/javascript">
var employeeData =@Html.Raw(Json.Serialize(ViewBag.employee)); //ViewBag.employee is the another table data that contains EmployeeID as primary key.
var obj = [{ dataSource: employeeData, foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName" }];
function onLoad(args) {
this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor(obj,"remoteSaveAdaptor");
}
</script>
[HomeController.cs]
public IActionResult Index()
{
if (order.Count() == 0)
BindDataSource();
ViewBag.data = order; //Order table data
if (foreignData.Count() == 0)
BindForeignData();
ViewBag.employee = foreignData.Where(c => c.EmployeeID > 1).OrderBy(c => c.FirstName).ToList(); //employee table data
return View();
} |
