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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
[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();
} |
