CODEWITHSUNDEEP
c#asp.net-mvckendo-uikendo-gridkendo-asp.net-mvc
nv.snow
nv.snow

Reputation: 934

Kendo UI Grid paging issue in ASP.NET MVC

In my Kendo UI Grid, I set the Page Size attribute to three - PageSize(3):

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Discount>()
    .Name("discountgrid")
    .Columns(c=>
    {
        c.Bound(d => d.Id);
        c.Bound(d => d.Category);
        c.Bound(d => d.Percentage);
        c.Bound(d => d.Merchandise);
        c.Command(cm => { cm.Edit(); cm.Destroy(); });
    })
    .Pageable()
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(3)
        .ServerOperation(false)
        .Model(model => model.Id(d => d.Id))
        .Create(update => update.Action("EditingInline_Create", "Grid"))
        .Update(update => update.Action("EditingInline_Update", "Grid"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
    )
)

After adding the first three rows, when I insert the 4th record, the first record disappears (as expected) - but I don't see an option to go to the second page (Page 2) in the grid footer.

Why is that? What am I missing?

Upvotes: 0

Views: 3854

Answers (3)

Matt Millican
Matt Millican

Reputation: 4054

Try adding the Read() action to your grid, and for testing purposes, maybe set ServerOperation(true)

Upvotes: 1

ajexpress
ajexpress

Reputation: 287

You have to specify the Read action on the DataSource and add the RequestEnd event. You can place your DataSource read method inside this event. The event type parameter on the RequestEnd event such as "update","create","destroy" can then be used to determine which operation is complete and reload the data on the grid.

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Discount>()
.Name("discountgrid")
.Columns(c=>
{
    c.Bound(d => d.Id);
    c.Bound(d => d.Category);
    c.Bound(d => d.Percentage);
    c.Bound(d => d.Merchandise);
    c.Command(cm => { cm.Edit(); cm.Destroy(); });
})
.Pageable()
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(3)
    .ServerOperation(false)
    .Events(e => { e.RequestEnd("onRequestEnd"); })//onRequestEnd is the javascript fxn
    .Model(model => model.Id(d => d.Id))
    .Read(read => read.Action("EditingInline_Read","Grid"))
    .Create(update => update.Action("EditingInline_Create", "Grid"))
    .Update(update => update.Action("EditingInline_Update", "Grid"))
    .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
))


<script type="text/javascript">

function onRequestEnd(e) {
    if (e.type === "create" || e.type === "update" || e.type === "destroy") {
        e.sender.read();
    }
}

</script>

If you need further information, please read this link

Upvotes: 2

Stargazer
Stargazer

Reputation: 472

I think you're missing to provide the READ action to the grid.

Upvotes: 3

Related Questions