grid not showing data

[n/a]

Hi
I'm still trying to find my way with Telerik UI for ASP.NET MVC, I'm not sure what am I doing wrong here but my grid is not displaying any data  here is my code....
[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)
           )
           )

 

 

[Georgi]

Hi Adam,

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")]
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, JsonRequestBehavior.AllowGet);
}

For your convenience I am attaching a small sample which I created using the provided configuration.


Regards,
Georgi
Progress Telerik

[n/a]

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)
            );
        })
    )
)

 

 

[Georgi]

Hello Adam,

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:

• https://docs.telerik.com/aspnet-core/getting-started/getting-started#configuration-Add

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

[n/a]

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?

[Georgi]

Hello Adam,

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

[n/a]

this worked thank you

[n/a]

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 ?

[Konstantin Dikov]

Hello Adam,

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

[barış]

  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())

[Georgi]

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