I implemented the grid with server side paging. First I tried the datamanager but I did return JSON data but the grid was not filled.
So I tried another solution (see below)
//todo: create support ticket why .Adaptor(AdaptorType.UrlAdaptor) does not work.
//public ActionResult Data(DataManager dm)
//{
// var dataSource = _patientBusiness.GetAllPatients(dm.Skip, dm.Take);
// return Json(new { d = new { results = dataSource.FilteredResult, __count = dataSource.TotalCount }}, JsonRequestBehavior.AllowGet);
//}
public ActionResult Data([Bind(Prefix = "$skip")]int? skip, [Bind(Prefix = "$top")]int? top)
{
var dataSource = _patientBusiness.GetAllPatients(skip.Value, top.Value);
return Json(new { d = new { results = dataSource.FilteredResult, __count = dataSource.TotalCount } }, JsonRequestBehavior.AllowGet);
}
This works but in the frontend I get following error: Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'.
Code of the frontend:
<div class="project-list">
@(Html.EJ().Grid<PatientDto>("PatientGrid")
.Datasource(ds => ds.URL("/Patient/Data"))
.AllowPaging()
.PageSettings(m => m.PageSize(50))
.Columns(col =>
{
col.Field("PatientId").IsPrimaryKey(true).Visible(false).Add();
col.Field("SocialSecurityNumber").HeaderText("Number").Width(80).Add();
col.Field("Name").HeaderText("Name").Width(80).Add();
col.Field("FirstName").HeaderText("FIrstname").Width(80).Add();
col.Field("BirthDate").HeaderText("Birthday").Format("{BirthDate:dd/MM/yyyy}").Width(80).Add();
col.HeaderText("Details").Commands(command =>
{
command.Type("detail")
.ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
{
Text = "Details",
Width = "100px",
Click = "onClick"
}).Add();
})
.IsUnbound(true)
.TextAlign(TextAlign.Center)
.Width(150)
.Add();
})
)
</div>
@section scripts
{
<script type="text/javascript">
function onClick(args) {
var grid = $("#PatientGrid").ejGrid("instance");
var index = this.element.closest("tr").index(); //For getting clicked rowElement(tr) index
var record = grid.getCurrentViewData()[index]; //For getting the record by passing the row index
var primaryKeyValue = record['PatientId']; //Here i_banner_id is primarykey column.
window.location = "/Patient/Edit/" + primaryKeyValue;
}
</script>
}
What is the problem here?
Thank you
Regards