Having trouble getting my grid to be pageable

[James]

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?

[Rochdi]

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()
)

[James]

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

[Atlas]

Thanks for the post. That worked for me.