Grid is not binding with the data in .net core 6.

[Salma]

Hi, I am new to kendo grid and over all telerik, I am having issues populating the data.  

please check the code below. This is the simplest form.  

 

//cshtml view

 

@using Kendo.Mvc
@using Kendo.Mvc.UI
@model IEnumerable<Database.Station>
@{
    ViewBag.Title = "Records";
//    foreach(var v in Model)
//    {
//      var i=  v.Componenet;
//    }
}

@ViewBag.heading
<hr />


<hr />



@if (Model.Any())
{
    <div>

          @(Html.Kendo().Grid(Model) 
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p =>p.ATA).Width(100);
        columns.Bound(p => p.Componenet).Width(100);
        columns.Bound(p => p.Description).Width(140);
        columns.Bound(p => p.DiskNumber);
        columns.Bound(p => p.SoftwareNumber).Width(150);
    })

    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()

        .Read(read => read.Action("Main", "Station"))
     )
)
    </div>
    }

 

//controller

  public IActionResult Main()
        {
            var stationList = new List<Station>();
            var station = new Station
            {
                ATA = "22",
                SoftwareNumber = "check",
                DiskNumber = "1234",
                Componenet = "AC",
                Description = "Description"
            };
            stationList.Add(station);

            var station2 = new Station
            {
                ATA = "29",
                SoftwareNumber = "check2",
                DiskNumber = "1235",
                Componenet = "Bike",
                Description = "Description"
            };
            stationList.Add(station2);
            return Json(stationList);

        }
    }

 

I also noticed following the instruction. it does not tell me to include any css or javascript or any javascript code in script section. so nothing of that natrure is included.  Below is the outcome of the nuget.  I have no css or other js file from kendo. 

 

And this is what i get

                  

[Alexander]

Hi Amir,

Thank you for the provided information, code and screenshots.

Regarding the Grid configuration:

Upon my initial observations, I noticed that the Grid is configured for both Remote and Local binding. In this regard, to elaborate more on the specifics:

• When using Local Binding all data operations will be performed on the client, whilst having the .ServerOperation() configured to false, as illustrated in step 3 in the Grid Local Binding Documentation.

• When using Remote Binding the Telerik UI for ASP.NET Core Grid will make separate Ajax requests for all data operations whilst retrieving data only in JSON format, in comparison to the Local Binding. You can review the Grid Ajax Binding Documentation for more in-depth information.

In addition, when configured for Ajax Binding, the following aspects need to be taken into account:

• 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 through the "Kendo.Mvc.UI.DataSourceRequestAttribute". 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 DataSourceResult object.

This is outlined in steps 6 to 8 in the Ajax Binding documentation. For a visual representation of both the Local and Ajax Binding please refer to the following online demo samples. Make sure to click on the "ViewSource" tab in order to see the Grid's configuration:

• Grid binding to local data

• Grid binding to remote data

Regarding the required resources:

To implement the Telerik UI for ASP.NET Core in an application, you must provide the required client-side resources as well. You can do this by either referencing the files locally or through the CDN. More information can be found here:

• Including the Telerik UI for ASP.NET Core Client-Side resources

With that being said, when the Grid or other data-bound are utilized within your current working application, JSON Serialization needs to be configured as well. You can review the following article that can be used as a point of reference:

• JSON Serialization

Finally, the Telerik UI for ASP.NET Core has its own getting started to experience in a Virtual Classroom more of which can be found here:

• Video Onboarding

I hope you find this information helpful, please let me know if any additional assistance is required.

Best Regards,
Alexander
Progress Telerik