Kendo UI grid Ajax Binding

[App Dev Tools]

I have a Kendo UI grid to which I want to pass a Model  that has data in it. Whenever I do sorting or pagination, I do not want to refresh , so I am trying to do ajax 

@using Kendo.Mvc.UI.Fluent

@model  IEnumerable<Models.TrainingVideo>

@{

    ViewBag.Title = "Video Management";

}

<div style="margin-top: 30px;">

 

    @Html.Kendo().Grid(Model).Name("WatchVideoGrid").Columns(columns =>

        {

            columns.Bound(x => x.Name);

            columns.Bound(x => x.Description);

            columns.Bound(x => x.LastUpdateDate);

            columns.Command(commands => commands.Custom("EditVideoCommand")

                                                .Text("Edit")

                                                .DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))

                                                .Action("EditSelectedVideo", "Home"));

            columns.Command(commands => commands.Custom("DeleteVideoCommand")

                                                .Text("Delete")

                                                .DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))

                                                .Action("DeleteSelectedVideo", "Home"));

            columns.Command(commands => commands.Custom("ReplaceVideoCommand")

                                                .Text("Replace")

                                                .DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))

                                                .Action("ReplaceSelectedVideo", "Home"));

    }).Pageable().Sortable().Scrollable().Filterable())

public PartialViewResult _VideoManagement()
       {
           Videos videos = new Videos();
           return PartialView(videos.VideoList);
       }

where VideoList is  List<TrainingVideo> and it works this way without ajax binding, however I am trying to do Ajax 


and Here is my ajax version

@Html.Kendo().Grid(Model).Name("WatchVideoGrid").Columns(columns =>
        {
            columns.Bound(x => x.Name);
            columns.Bound(x => x.Description);
            columns.Bound(x => x.LastUpdateDate);
            columns.Command(commands => commands.Custom("EditVideoCommand")
                                                .Text("Edit")
                                                .DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))
                                                .Action("EditSelectedVideo", "Home"));
            columns.Command(commands => commands.Custom("DeleteVideoCommand")
                                                .Text("Delete")
                                                .DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))
                                                .Action("DeleteSelectedVideo", "Home"));
            columns.Command(commands => commands.Custom("ReplaceVideoCommand")
                                                .Text("Replace")
                                                .DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))
                                                .Action("ReplaceSelectedVideo", "Home"));
    }).Pageable().Sortable().Scrollable().Filterable().DataSource(builder => builder.Ajax().Read(read=>read.Action("VideoListRead","Home")))

and controller has 

public ActionResult VideoListRead([DataSourceRequest] DataSourceRequest request)
       {
           Videos videos = new Videos();
           return Json(videos.VideoList.ToDataSourceResult(request));

       }

I followed the demo closely but could not make it work. Do you see any discrepancies?

 

[Dimiter Madjarov]

Hello,


The provided sample code seems correct. Could you please specify what issues are you experiencing, so I could be more helpful? As you correctly stated, the same scenario is demonstrated in our demos. As a general advice, please check if there are any JavaScript errors in the developer console or unsuccessful requests in the network tab of the developer tools.

I am looking forward to hearing from you!

Regards,
Dimiter Madjarov
Telerik