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

Allow the user to change the page size of the grid

3 Answers 560 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Oscar
Top achievements
Rank 1
Oscar asked on 12 Jul 2012, 08:09 AM
Hi Kendo UI team,
The KendoUI 2012 Q2 release note says:
Added : Allow the user to change the page size of the grid.
Added: Ability to change the current page by typing it in a textbox.

Where can I find an example of these two items?

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Jul 2012, 09:06 AM
Hello Oscar,

Please refer to our demos.

http://demos.kendoui.com/web/grid/index.html

http://demos.kendoui.com/web/grid/local-data.html

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dennis
Top achievements
Rank 1
answered on 13 Jul 2012, 11:27 PM
I have exactly that and my grid does not show the ability to change the page and my page numbers are going horizontally. Please help.

controller
public ActionResult Index(string classifications = "")
       {
           ViewData["Category"] = classifications;
           ViewData["Classifications"] = new SelectList(Classifications.List, "ClassificationText", "ClassificationText", classifications);
           var codModels = new List<CodeModel>();
           ViewBag.SelectedCatgory = classifications ?? "Type";
 
           if (Request.HttpMethod == "POST")
           {
               var model = _codeRepository.Search(classifications).ToModel();
               return View(model);
           }
 
           return View(codModels);
       }


references in _Layout.cshtml
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.web.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.grid.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.menu.min.js")" type="text/javascript"></script>


Grid:
<div id="grid">
@(Html.Kendo().Grid(Model)
        .Name("CodeManager")   
    .Columns(columns =>
    {       
        columns.Bound(p => p.CodeID);
        columns.Bound(p => p.Status);       
    })   
     
    .Sortable()
    .Scrollable()
    .Groupable()
    .Pageable()
    .Filterable()
    .DataSource(dataSource => dataSource   
        .Ajax() 
        .ServerOperation(false)      
        ))
</div>
0
Dimo
Telerik team
answered on 16 Jul 2012, 08:25 AM
Hi Dennis,

Currently your Grid pager is not configured to show the page size dropdown. Please refer to the Paging example of the MVC wrappers demos, which are included in the Kendo UI trial ZIP that you have downloaded:

wrappers / aspnetmvc / Examples / Areas / razor / Views / web / grid / paging.cshtml


.Pageable(pager => pager
  .PageSizes(true)
)

Also note there is a separate forum section devoted to the Kendo UI MVC wrappers. This disucssion belongs to that section. Initially I was not aware that you are using the wrappers instead of the pure Kendo UI Grid,  that's why I posted links to the Kendo UI Grid demos that are not relevant in this case.

Finally, I notice that there are two jQuery instances on the page, which is not needed and can lead to negative side effects.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Oscar
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Dennis
Top achievements
Rank 1
Share this question
or