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

Can't get pagable working.

9 Answers 112 Views

Grid

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

Karol asked on 28 Nov 2012, 09:57 PM

My grid looks like this:

@(Html.Kendo().Grid<Biblioteka.ViewModels.BookViewModel>()

.Name("BooksKendoGrid")

.Columns(columns =>

{

columns.Bound(p => p.Title);

columns.Bound(p => p.Author);

columns.Bound(p => p.GenreName);

columns.Bound(p => p.ReleaseDate).Format("{0:d}");

columns.Bound(p => p.ISBN);

columns.Bound(p => p.BorrowCount);

columns.Bound(p => p.RealBookCount);

columns.Bound(p => p.AddDate).Format("{0:d}");

columns.Bound(p => p.ModifiedDate).Format("{0:d}");

columns.Bound(p => p.BookId).Width(150).ClientTemplate("<input type=\"button\" value=\"Edit #= Title #\" style=\"width : 100px;\" onclick=\"openEditWindow(#= BookId #)\"/>");

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.HtmlAttributes(new { style = "height: 200px" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(2)

.Model(model =>

{

//The unique identifier (primary key) of the model is the ProductID property

model.Id(p => p.BookId);

})

.Read(read => read.Action("BooksKendoGridRead", "Raports")

)

As you can see I had enabled Pageable and I set .PageSize to 2 but it doesn't work it cut other elements in grid ... and leave only 2

9 Answers, 1 is accepted

answered on 29 Nov 2012, 09:02 AM

I had included kendo.aspnetmvc.min.js action BooksKendoGridRead looks like this:

[HttpPost]

public ActionResult BooksKendoGridRead([DataSourceRequest]DataSourceRequest request)

{

lr = new LibraryRepository();

List<Book> bookList = lr.bookList(); // this is returning ctx.Books.toList();

List<BookViewModel> bookViewList = new List<BookViewModel>();

foreach (Book book in bookList)

{

BookViewModel bookViewModel = new BookViewModel(book);

bookViewModel.Borrow = book.Borrow.Select(z => new BorrowViewModel(z)).ToList();

bookViewModel.Genres.Add(new DictBookGenreViewModel(book.DictBookGenre));

bookViewList.Add(bookViewModel);

}

DataSourceResult result = bookViewList.ToDataSourceResult(request);

return Json(result);

}

answered on 29 Nov 2012, 09:17 AM

_Layout.cshtml: Its only head :)

<head>

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")"/>

<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")"/>

<script src="@Url.Content("~/Scripts/kendo.all.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")" type="text/javascript"></script>

</head>

Here are debugger results: Result

answered on 29 Nov 2012, 09:18 AM