grid not showing data

11 posts, 0 answers
  1. Adam Hayden
    Adam Hayden avatar
    17 posts
    Member since:
    Mar 2018

    Posted 21 Aug 2018 Link to this post

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

     

     

  2.
  3. Georgi
    Admin
    Georgi avatar
    697 posts

    Posted 23 Aug 2018 Link to this post

    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.
  5. Adam Hayden
    Adam Hayden avatar
    17 posts
    Member since:
    Mar 2018

    Posted 27 Aug 2018 in reply to Georgi Link to this post

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

     

     

  7. Georgi
    Admin
    Georgi avatar
    697 posts

    Posted 28 Aug 2018 Link to this post

    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.
  8.
  9. Adam Hayden
    Adam Hayden avatar
    17 posts
    Member since:
    Mar 2018

    Posted 29 Aug 2018 in reply to Georgi Link to this post

    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?


  11. Georgi
    Admin
    Georgi avatar
    697 posts

    Posted 31 Aug 2018 Link to this post

    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.

  13. Adam Hayden
    Adam Hayden avatar
    17 posts
    Member since:
    Mar 2018

    Posted 31 Aug 2018 in reply to Georgi Link to this post

    this worked thank you
  14.
  15. Adam Hayden
    Adam Hayden avatar
    17 posts
    Member since:
    Mar 2018

    Posted 11 Sep 2018 in reply to Georgi Link to this post

    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 ?

  17. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 13 Sep 2018 Link to this post

    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.
  19. barış
    barış avatar
    1 posts
    Member since:
    Mar 2020

    Posted 11 Mar 2020 Link to this post

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

  20.
  21. Georgi
    Admin
    Georgi avatar
    697 posts

    Posted 13 Mar 2020 Link to this post

    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.
Back to Top