@(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
We don't understand what "it cut other elements in grid ... and leave only 2" means. The paging of the grid is supposed to show exactly the number of records specified by the PageSize option. Please clarify.
Greetings,Atanas Korchev
the Telerik team

Can you show us how your action method looks like? Also have you included kendo.aspnetmvc.min.js in your page? The latter is mandatory.
Regards,Atanas Korchev
the Telerik team

[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);
}
Your action method looks correct. Can you check what the JSON response looks like? You can use your browser's developer toolbar to inspect the response.
Also please send us the HTML which includes the Kendo UI JavaScript files.
Atanas Korchev
the Telerik team

<
head
>
<
title
>@ViewBag.Title</
title
>
<!-- Standard -->
<
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
>
<!-- Kendo -->
<
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
>

<
head
>
<
title
>@ViewBag.Title</
title
>
<!-- Standard -->
<
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
>
<!-- Kendo -->
<
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
>
The problem is that you have included both kendo.all.min.js and kendo.dataviz.min.js. You should include only kendo.all.min.js. More info about the JavaScript files can be found here. Instructions how to use Kendo UI Complete for ASP.NET MVC can be found here.
Kind regards,Atanas Korchev
the Telerik team
