grid not showing data
1 Answer 592 Views
n/a
Top achievements
Rank 1
n/a asked on 21 Aug 2018, 11:13 AM
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)
           )
           )

 

 

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
- by
Georgi
Telerik team
on 23 Aug 2018, 06:52 AM

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

 

 

- by
n/a
Top achievements
Rank 1
on 27 Aug 2018, 09:27 AM
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:


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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
- by
Georgi
Telerik team
on 28 Aug 2018, 01:48 PM

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?


- by
n/a
Top achievements
Rank 1
on 29 Aug 2018, 10:16 AM

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 31 Aug 2018, 07:22 AM
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:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

this worked thank you
- by
n/a
Top achievements
Rank 1
on 31 Aug 2018, 10:41 AM

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 ?

- by
n/a
Top achievements
Rank 1
on 11 Sep 2018, 12:07 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
- by
Konstantin Dikov
Telerik team
on 13 Sep 2018, 10:37 AM

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

- by
barış
Top achievements
Rank 1
on 11 Mar 2020, 02:51 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
- by
Georgi
Telerik team
on 13 Mar 2020, 10:34 AM
Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or