Telerik Grid doesn't show data

[Ejaz]

I’m using ASP.NET CORE with Telerik Core UI. I am fetching data from an SQL server, and when I debug code, I see data made to the action method.

 However, Grid doesn’t populate any data; I only see the headers, in developer mode, I see no errors thrown. Could you please let me know what I am doing wrong.

 

For Startup class, I have added appropriate reference

services.AddControllersWithViews()

                       .AddJsonOptions(options =>

            {

             options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;

              options.JsonSerializerOptions.PropertyNamingPolicy = null;

            })

            services.AddKendo();

 

Any help is much appreciated.

 

Model:

public class SampleModel

{

  public int ASSAY_ID { get; set; }

  public string ASSAY_REQUESTED { get; set; }

  public string SAMPLE_NUMBER { get; set; }

  public int ASSAY_NUMBER { get; set; }

}

 

Controler:

  public ActionResult Index([DataSourceRequest] DataSourceRequest request)

        {

 

            SampleRepository samprp = new SampleRepository(_configuration);

            var smp = samprp.GetSamples();

 

            var queryable = smp.AsQueryable<SampleModel>();

            DataSourceResult result = queryable.ToDataSourceResult(request,

 
                c => new SampleModel

                {

                    ASSAY_ID = c.ASSAY_ID,

                    ASSAY_REQUESTED = c.ASSAY_REQUESTED,

                    SAMPLE_NUMBER = c.SAMPLE_NUMBER,

                    ASSAY_NUMBER = c.ASSAY_NUMBER

                 });

            return View(queryable);

        }

View:

@using Kendo.Mvc.UI

@using Kendo.Mvc.Extensions

 

 

@(Html.Kendo().Grid<SCAssayApp.Models.SampleModel>()

                .Name("grid")

                .AutoBind(true)

                .EnableCustomBinding(true)

                .Columns(columns =>

                {

                    columns.Bound(p => p.ASSAY_ID).Width(50);

                    columns.Bound(p => p.ASSAY_NUMBER).Width(60);

                    columns.Bound(p => p.SAMPLE_NUMBER).Width(70);

                    columns.Bound(p => p.ASSAY_REQUESTED).Width(100);

                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

                })

                .ToolBar(toolbar => toolbar.Create())

                .Editable(editable => editable.Mode(GridEditMode.InLine))

                .Scrollable()

                .HtmlAttributes(new { style = "height:430px;" })

            .DataSource(dataSource => dataSource

                .Ajax()

               .PageSize(20)

                .Events(events => events.Error("error_handler"))
                .Model(model =>

                {

                    model.Id(p => p.ASSAY_ID);

                    model.Field(p => p.ASSAY_NUMBER);

                    model.Field(p => p.SAMPLE_NUMBER);

                    model.Field(p => p.ASSAY_REQUESTED);

                }

               )

        .Read(read => read.Action("Index", "Sample"))

        .ServerOperation(false)

    )

[Alexander]

Hi Ejaz,

Thank you for the provided information and code.

Based on my initial observations, I noticed that the cause of the encountered behavior is associated with the Index action method.

The endpoint used for fetching the data within the Grid is used within the Index method. In general, when the DataSource is configured for Ajax Binding regardless of whether it is custom or not, a new action method should be created that will be primarily responsible for retrieving the data in JSON format.

Inside the action, the following configurations need to be taken into account. Here is a more thorough explanation regarding each of them:

• A parameter of type "Kendo.Mvc.UI.DataSourceRequest" needs to be added to the action. It will contain the current Grid request information.

• The parameter needs to be decorated with the "DataSourceRequest" attribute. This is required, as the attribute will populate the DataSourceRequest object from the posted data.

• The "ToDataSourceResult()" extension method needs to be used in order to convert the data to a DataSourceRequest object.

Here is an example:

public IActionResult Index()
{ 
    return View(); //used for the rendering of the Grid
}

public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) //used for fetching the data asynchronously
{
    using (var northwind = new SampleContext())
    {
        IQueryable<Product> products = northwind.Products;
        DataSourceResult result = products.ToDataSourceResult(request);
        return Json(result);
    }
}

With that being said, the Telerik UI for ASP.NET Core Grid exposes several other data binding mechanisms that can be reviewed here:

Grid Data Binding Overview

In addition, notice that from there, you can also review the Live Demos we have available for each of the Data Binding scenarios, by navigating through the "Related Articles" section in the top right corner of the documentation:

Finally, the demo examples you see are all part of the official distribution of Telerik UI for ASP.NET Core. Once you have installed the desired version of the suite, navigate to the installation folder and run the project allocated within the wrappers\aspnetcore\Examples\AspNet.Core\VS2022\Kendo.Mvc.Examples\Kendo.Mvc.Examples.csproj. From there, you can see all the available Grid demos and their configurations.

I hope you find this information helpful.

Best Regards,
Alexander
Progress Telerik

[Ejaz]

Thank you, Alex!

I realized my mistake after going through the demo material in detail. You are spot on and I exactly did what you suggested in your solution.

-Ejaz