[AcceptVerbs("Get")]public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request){ List<OrderViewModel> OrderList = new List<OrderViewModel>(); OrderList.Add(new OrderViewModel() { Freight =2124, OrderID = 1, ShipCity = "test", ShipName = "Test" }); var dsResult = OrderList.ToDataSourceResult(request); return Json(dsResult);}
@(Html.Kendo().Grid<AdorReactUI.Models.OrderViewModel>() .Name("grid") .AutoBind(false) .Columns(columns => { columns.Bound(p => p.OrderID).Filterable(false); columns.Bound(p => p.Freight); columns.Bound(p => p.ShipName); columns.Bound(p => p.ShipCity); columns.Command(c => c.Edit()); }) .Pageable() .Sortable() .Scrollable() .Filterable() .ToolBar(toolbar => { toolbar.Create(); }) .Editable(editable => editable.Mode(GridEditMode.InLine)) .HtmlAttributes(new { style = "height:550px;" }) .DataSource(dataSource => dataSource .Custom() .Schema(schema => { schema.Model(m => { m.Id(field => field.OrderID); m.Field(field => field.OrderID).Editable(false); }); // schema.Data("Data"); }) .Transport(transport => { transport.Read(read => read.Url("/Grid/Orders_Read").Type(HttpVerbs.Get)); transport.Create(read => read.Url("/Grid/EditingInline_Create").Type(HttpVerbs.Post)); transport.Update(read => read.Url("/Grid/EditingInline_Update").Type(HttpVerbs.Post)); transport.Destroy(read => read.Url("/Grid/EditingInline_Destroy").Type(HttpVerbs.Post)); }) .PageSize(20) ) )
1 Answer, 1 is accepted
I noticed that you are using custom data source and the server responds with a DataSourceResult object. The array of data is stored in the Data property of the DataSource object and it is necessary to specify in which property of the response, the data is stored.
e.g.
.Schema(schema => { schema.Model(m => { m.Id(field => field.OrderID); m.Field(field => field.OrderID).Editable(false); }); schema.Data("Data"); schema.Total("Total"); })Or configure the the data source for AJAX binding.
Please refer to the following articles for better understanding:
- https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/custom-binding
- https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding
Regards,
Georgi
Progress Telerik
Hi Georgi
after this last change my grid didnt want to add a new row when it empty, but if i remove schema.Total("Total"); it works but then the pagination stops working it only showing the first page result only.
do you have a fix for this ?
Could you please share the final configuration of the Grid that you have and the code of the Read action method? Meanwhile you could ensure that you are calling the ToDataSourceResult method or returning a DataSourceResult with the "Total" property even when there are no records.
Looking forward to your reply.
Regards,
Konstantin Dikov
Progress Telerik
public ActionResult Index( SiparisListViewModel model)
{
return View(model);
}
public ActionResult ReadSiparisList([DataSourceRequest] DataSourceRequest request, SiparisListViewModel model)
{
var siparis = _siparisService.GetAll();
return Json(siparis.ToDataSourceResult(request));
Hello My proje net.core 3.1 . up code. View down. Help me.
@(Html.Kendo().Grid<Siparis>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.SiparisId).Width(150);
columns.Bound(o => o.Aciklama).Width(300);
columns.Bound(o => o.Cari).Width(300);
columns.Bound(o => o.DurumId).Width(300).Locked(true);
columns.Bound(o => o.Date).Width(400).Lockable(false);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(30)
.Read(read => read.Action("ReadSiparisList", "Siparis"))
)
.Scrollable(scrollable => scrollable.Height(540))
.Reorderable(reorderable => reorderable.Columns(true))
.Resizable(resizable => resizable.Columns(true))
.Pageable()
.Filterable()
.Sortable()
.Groupable()
.ColumnMenu())
Hi Barış,
Did you configure the json serialization to use PascalCase?
e.g.
...
using Newtonsoft.Json.Serialization;
...
public void ConfigureServices(IServiceCollection services)
{
...
// Maintain the property names during serialization.
// For more information, refer to https://github.com/aspnet/Announcements/issues/194.
services
.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
.AddJsonOptions(options =>
options.SerializerSettings.ContractResolver = new DefaultContractResolver());
// Add the Kendo UI services to the services container.
services.AddKendo();
}Regards,
Georgi
Progress Telerik
I have investigated the provided configuration and noticed few things. The grid is configured to not bind automatically.
e.g.
@(Html.Kendo().Grid<AdorReactUI.Models.OrderViewModel>().Name("grid").AutoBind(false)Furthermore, a custom DataSource is used, but a DataSourceResult object is returned from the server. If you change the type to AJAX you can omit manually configuring which property of the response object contains the array of data, the aggregates, etc...
e.g.
.DataSource(dataSource => dataSource.Ajax().Model(m =>{m.Id(field => field.OrderID);m.Field(field => field.OrderID).Editable(false);}).Read(read => read.Url("/Grid/Orders_Read").Type(HttpVerbs.Get)).Create(read => read.Url("/Grid/EditingInline_Create").Type(HttpVerbs.Post)).Update(read => read.Url("/Grid/EditingInline_Update").Type(HttpVerbs.Post)).Destroy(read => read.Url("/Grid/EditingInline_Destroy").Type(HttpVerbs.Post)).PageSize(20))Finally, a GET request is sent for fetching the data. By default the MVC framework block get requests. It is necessary to set the JsonRequestBehavior.AllowGet in order to allow GET requests.
e.g.
[AcceptVerbs("Get")]publicActionResult Orders_Read([DataSourceRequest]DataSourceRequest request){List<OrderViewModel> OrderList =newList<OrderViewModel>();OrderList.Add(newOrderViewModel(){Freight = 2124,OrderID = 1,ShipCity ="test",ShipName ="Test"});var dsResult = OrderList.ToDataSourceResult(request);returnJson(dsResult, JsonRequestBehavior.AllowGet);}For your convenience I am attaching a small sample which I created using the provided configuration.
Regards,
Georgi
Progress Telerik
Hi Georgi
Thanks for the reply , the reason i set .AutoBind(false) is because of the issues i had which was resolved in this post, and i can't come right with JsonRequestBehavior.AllowGet beacuse I'm using .Net core .. i have refine my code :
@(Html.Kendo().Grid<Models.OrderViewModel>().Name("grid").Columns(columns =>{columns.Bound(p => p.OrderID).Filterable(false);columns.Bound(p => p.Freight);columns.Bound(p => p.ShipName);columns.Bound(p => p.ShipCity);columns.Command(c => c.Edit());}).ToolBar(toolbar =>{toolbar.Create();toolbar.Save();}).Editable(editable => editable.Mode(GridEditMode.PopUp)).Pageable().AutoBind(false).Scrollable(scr => scr.Height(800)).Reorderable(reorderable => reorderable.Columns(true)).DataSource(dataSource => dataSource.Custom().PageSize(20).Schema(schema =>{schema.Model(m =>{m.Id(field => field.OrderID);m.Field(field => field.OrderID).Editable(false);});// schema.Data("Data");}).Transport(transport =>{transport.Read(read =>read.Url( "/api/Grid/Orders_Read").DataType("json").Type(HttpVerbs.Get));transport.Create(create =>create.Url( "/api/Grid/EditingInline_Create").DataType("json").Type(HttpVerbs.Post).ContentType("application/json; charset=utf-8"));transport.Update(update =>update.Url( "/api/Grid/EditingInline_Update").DataType("json").Type(HttpVerbs.Put).ContentType("application/json; charset=utf-8"));transport.Destroy(destroy =>destroy.Url( "/api/Grid/EditingInline_Destroy").DataType("json").Type(HttpVerbs.Delete));})))I got confused as the thread is in the MVC section.
However, a common cause for the described behavior in ASP.Net Core is the serialization of the data. By default, the data in .NET Core is serialized in camelCase, while the dataSource expectes the model to be serialized in PascalCase. As a result, in this scenario the DataSource of the Grid does not recognize the fields in the data that is returned by the server.
Point five of our Getting Started with Telerik UI for ASP.Net Core illustrates how to modify the serialization of the objects in order to be compatible with the DataSource:
Please modify the JSON serialization as shown in the article above and let me know if the data is displayed as expected.
Regards,
Georgi
Progress Telerik
hey Georgi
i have modify the JSON serialization as shown in the article, but still the data doesn't show , its only show if ToDataSourceResult(request)
[AcceptVerbs("Get")]public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request){List<OrderViewModel> OrderList = new List<OrderViewModel>();OrderList.Add(new OrderViewModel(){Freight = 2124,OrderID = 1,ShipCity = "test",ShipName = "Test"});//var dsResult = OrderList.ToDataSourceResult(request);return Json(OrderList);}how can i make it work with it?