Hi All,
I have a grid working without any problems when I load the data locally using BindTo(), but it takes a few seconds to load because it's a lot of data.
I wanted to play with paging on the server side to avoid the long delay, so I switched to remote binding. But now the data never gets loaded in the grid. I know the Ajax call works because I get data on the screen if I just put the URL for the Action method that produces the JSON data directly in the browser address bar.
I know it's probably something stupid that I'm not doing. Thanks in advance for any help.
Here's the code:
Contents of TestController.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using CONY.Models;
namespace CONY.Controllers
{
public class TestController : Controller
{
public IActionResult Index()
{
return View();
}
public JsonResult GetGridDataRemotely()
{
TestData[] data = new TestData[2];
data[0] = new TestData("Hello", "Goodbye");
data[1] = new TestData("Red", "Blue");
return Json(data);
}
public ViewResult TestGridLocalBinding()
{
TestData[] data = new TestData[2];
data[0] = new TestData("Hello", "Goodbye");
data[1] = new TestData("Red", "Blue");
ViewBag.TheData = data;
return View();
}
public ViewResult TestGridRemoteBinding()
{
return View();
}
}
}
Contents of TestGridRemoteBinding.cshtml:
@{
ViewData["Title"] = "TestGridRemoteBinding";
}
<h1>TestGridRemoteBinding</h1>
@(Html.Kendo().Grid<CONY.Models.TestData>()
.Name("TestGrid")
.Columns(columns =>
{
columns.Bound(l => l.RecordType).Width(91);
columns.Bound(l => l.GroupAcctID).Width(106);
})
.HtmlAttributes(new { style = "height: 430px;" })
.Scrollable()
.Groupable()
.Sortable()
.Resizable(resizing => resizing.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetGridDataRemotely", "Test").Type(HttpVerbs.Get))
)
)
<script>
$(document).ready(function () {
var grid = $("#TestGrid").data("kendoGrid");
grid.dataSource.read();
})
</script>
Contents of TestGridLocalBinding.cshtml:
@{
ViewData["Title"] = "TestGridLocalBinding";
}
<h1>TestGridLocalBinding</h1>
@(Html.Kendo().Grid<CONY.Models.TestData>()
.Name("TestGrid")
.Columns(columns =>
{
columns.Bound(l => l.RecordType).Width(91);
columns.Bound(l => l.GroupAcctID).Width(106);
})
.HtmlAttributes(new { style = "height: 430px;" })
.Scrollable()
.Groupable()
.Sortable()
.Resizable(resizing => resizing.Columns(true))
.BindTo((IEnumerable<CityOfNewYork.Models.TestData>)ViewBag.TheData)
)
Contents of TestData.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace CONY.Models
{
public class TestData
{
public string RecordType { get; set; }
public string GroupAcctID { get; set; }
public TestData(string RecordType, string GroupAcctID)
{
this.RecordType = RecordType;
this.GroupAcctID = GroupAcctID;
}
}
}
2 Answers, 1 is accepted
Rank 1
I saw some other threads on this topic with some possible solutions.
Just wanted to add to the information I posted so I don't waste people's time on the things I've already checked.
It doesn't look like I'm having the issue where the names of the fields come back in Camel Case. When I call the Action Method that produces the JSON data, the fields come back in Pascal Case.
I've also confirmed that I'm including kendo.aspnetmvc.min.js and it's listed after kendo.all.min.js.
Here are the relevant parts of my layout file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - BlankCoreApp</title>
<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.aspnetmvc.min.js"></script>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
</environment>
</head>
<body>
<header>
<div class="tab">
<input class="navbutton" type="button" value="Default Loan" onclick="window.location.href= '/Home/Index2'">
<input class="navbutton" type="button" value="Paid Off Loan" onclick="window.location.href= '/Home/Index3'">
<input class="navbutton" type="button" value="Financial Activity" onclick="window.location.href= '/Home/Index4'">
</div>
</header>
<br>
<br>
<br>
@RenderBody()
<environment names="Development">
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
</environment>
<environment names="Staging,Production">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"></script>
</environment>
</body>
</html>
And here's my ConfigureServices method from my Startup.cs file:
public void ConfigureServices(IServiceCollection services)
{
// Add framework services.
services
.AddMvc()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_2)
// Maintain property names during serialization. See:
// https://github.com/aspnet/Announcements/issues/194
.AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
// Add Kendo UI services to the services container
services.AddKendo();
}
Hello, John,
Thank you for the provided code snippet and keeping the thread updated.
The reason for the data missing is that the grid is configured with an Ajax data source which is a built-in type and it uses a special schema and the expected response should look like this with the Ajax transport:
So if you modify the server Action method, the grid will load:
public JsonResult GetGridDataRemotely([DataSourceRequest]DataSourceRequest request)
{
TestData[] data = new TestData[2];
data[0] = new TestData("Hello", "Goodbye");
data[1] = new TestData("Red", "Blue");
return Json(data.ToDataSourceResult(request));
}Regards,
Alex Hajigeorgieva
Progress Telerik