Having trouble getting my grid to be pageable

4 posts, 0 answers
  1. James
    James avatar
    4 posts
    Member since:
    Oct 2012

    Posted 19 Oct 2012 Link to this post

    Hi,

    I'm new to the Kendo UI stuff, so please forgive me if this is an easy one; I've been trying to find some documentation that might tell me what I'm doing wrong, but nothing so far.

    I have a grid with (ATM) nine rows in it. I need to make this grid pageable. I followed this example to do so (http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/custom-binding) with the only deviations being that I set my page size to five (since I only have nine rows) and I didn't do the sorting part since I'm not using that right now. I did not do that part beginning with "Custom AJAX Binding" because it didn't seem relevant to the rest of the example.

    Here's what I've got:

    Controller method:
    public ActionResult Assigned([DataSourceRequest(Prefix = "Grid")] DataSourceRequest gridRequest)
    {
        if (gridRequest.PageSize == 0)
        {
            gridRequest.PageSize = 5;
        }
     
        var orders = _orderModel.GetDashboardOrders(DashboardOrderStatus.Assigned);
         
        if (gridRequest.Page > 0)
        {
            orders = orders.Skip((gridRequest.Page - 1)*gridRequest.PageSize).ToList();
        }
     
        orders = orders.Take(gridRequest.PageSize).ToList();
     
        ViewData["total"] = orders.Count; 
     
        var model = new DashboardModel
                        {
                            SelectedTab = "Assigned",
                            Orders = orders
                        };
        model = SetGlobalTabsBasedOnUserRole(model) as DashboardModel;
        return View(model);
    }

    and the declaration of the grid on my CSHTML page:
    @(Html.Kendo()
    .Grid<ProjX.Web.Models.Entities.DashboardOrder> ()
    .Name("Grid")
    .EnableCustomBinding(true)
    .BindTo(Model.Orders)
    .TableHtmlAttributes(new {style="width: 850px;"})
    .Columns(columns =>
                 {                    
                    <columns removed for readability, they work fine>
                 })
                 .Pageable(x => x.PageSizes(true))
                 .DataSource(ds => ds
                     .Server()
                     .Total((int)ViewData["total"])
                     ))


    On my page I have the paging controls showing up on my grid, but it shows there only being one page "bubble" and a message saying "1-5 of 5 items" None of the forward/back arrows are enabled.

    I'm kind of stumped here; I've been trying to find some documentation or blog post that shows me where I went wrong, but so far nothing. So, what am I doing wrong here?
  2. Rochdi
    Rochdi avatar
    1 posts
    Member since:
    Oct 2012

    Posted 22 Oct 2012 Link to this post

    Hi,
    Look this sample where .pageable() is used.
    @(Html.Kendo().Grid<MvcApplication1.Models.Product>()
        .Name("Grid")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Products_Read", "Home")
                .Data("additionalData") // the name of the JavaScript function which will return the additional data
            )
        )
        .Pageable()
    )
    
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. James
    James avatar
    4 posts
    Member since:
    Oct 2012

    Posted 25 Oct 2012 Link to this post

    I dug around and after some good old "trial and error" I got this to work:

    CSHTML:

    @(Html.Kendo()
    .Grid<eSearcher.Web.Models.Entities.DashboardOrder>()
    .Name("Grid")
    .EnableCustomBinding(true)
    .BindTo(Model.Orders)
    .TableHtmlAttributes(new { style = "width: 850px;" })
    .Columns(c => {...})
        .Pageable(x => x.PageSizes(new []{10,20,100}))
        .DataSource(ds => ds
                     .Server()
                     .PageSize(10)
                     .Total((int)ViewData["total"])
                     )
    )

    Controller action method

    public ActionResult Completed([DataSourceRequest(Prefix = "Grid")] DataSourceRequest gridRequest)
            {
                if (gridRequest.PageSize == 0)
                {
                    gridRequest.PageSize = 10;
                }
     
                var orders = ...
                ViewData["total"] = orders.Count;
                 
                if (gridRequest.Page > 0)
                {
                    orders = orders.Skip((gridRequest.Page - 1) * gridRequest.PageSize).ToList();
                }
     
                orders = orders.Take(gridRequest.PageSize).ToList();
     
                ViewData["pageSize"] = gridRequest.PageSize;
                var model = new DashboardModel
                                {
                                    Orders = orders,
                                };
                model = SetGlobalTabsBasedOnUserRole(model) as DashboardModel;
                return View(model);
            }

    Thanks,
    James


  5. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 27 Mar 2013 Link to this post

    Thanks for the post. That worked for me.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready