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

Kendo UI grid Ajax Binding

1 Answer 270 Views

Grid

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

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?

Kendo UI grid Ajax Binding

1 Answer, 1 is accepted