CODEWITHSUNDEEP
asp.net-mvckendo-gridkendo-asp.net-mvckendo-ui-grid
Aman G
Aman G

Reputation: 61

Kendo UI not loading data

I am using Kendo UI (Telerik UI for ASP.NET MVC R3 2018) and I attempt to load data into it but the grid appears only showing header columns without the data. I have also tried debugging but I can't figure what the problem is. I also tried this thread but it doesn't solve my problem. Below is what I have done and I am expecting the grid to show the data.

Model

public partial class PlacementType
{
    public byte Id { get; set; }

    [Display(Name = "Placement Name")]
    public string PlacementName { get; set; }

    [DataType(DataType.Date)]
    [Display(Name = "Date Created")]
    public DateTime? DateCreated { get; set; }

    [Display(Name = "Created By")]
    public string CreatedBy { get; set; }

    public string Description{get; set;}
 }

View

@(Html.Kendo().Grid<PlacementType>()
    .Name("Grid")
    .Columns(columns =>
        {
            columns.Bound(c => c.PlacementName);
            columns.Bound(c => c.DateCreated);
            columns.Bound(c => c.CreatedBy);
            columns.Bound(c => c.Description);
        }
    )
    .HtmlAttributes(new { style = "height: 550px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable.Refresh(true).PageSizes(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Index", "PlacementType"))
        .PageSize(20)
    )
)

Controller Action

 public ActionResult Index()
 {
     List<PlacementType> types = db.PlacementTypes.ToList();
     return View(types);
 }

Upvotes: 0

Views: 1918

Answers (2)

Christian Gollhardt
Christian Gollhardt

Reputation: 17004

You define the following Read Action:

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

Therefore make sure your Controller is named PlacementTypeController (with standard convention). The method needs to be named Index. That`s how you have configured it above.

If Index is already used by your view, you need to change read.Action Index to SomethingElse. Make sure, you Controller Action is also called SomethingElse Then.

Then the following Code should work:

public ActionResult Index([DataSourceRequest] DataSourceRequest request)
{
    // var breakPoint = db.PlacementTypes.ToList(); // uncomment and set a breakpoint to see if you have data
    return Json(db.PlacementTypes.ToDataSourceResult(request));
}

Note the use of the DataSourceRequest Attribute and the ToDataSourceResult method.

If it`s still not working, uncomment the comment, and set a breakpoint. Is your database actualy returning data?

Also take a look in the Browser Console CTRL+F12 and show if there are any errors. Also take a look at the Network tab.

Upvotes: 0

Salomon Zhang
Salomon Zhang

Reputation: 1567

Your controller should have a method which returns a Json result.

E.g.

public JsonResult GetPlacementTypes()
{
     var types = db.PlacementTypes.ToList();
     return Json(types, JsonRequestBehavior.AllowGet);
}

And update your view to use this method. (Assume your controller is called "PlacementTypeController")

.Read(read => read.Action("GetPlacementTypes", "PlacementType"))

Upvotes: 1

Related Questions