This is a migrated thread and some comments may be shown as answers.

Kendo UI grid Ajax Binding

1 Answer 268 Views
Grid
This is a migrated thread and some comments may be shown as answers.
App Dev Tools
Top achievements
Rank 1
App Dev Tools asked on 01 Aug 2013, 10:17 PM
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?

 

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 05 Aug 2013, 01:33 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
App Dev Tools
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or