CODEWITHSUNDEEP
c#asp.net-mvc
Sometimes Code
Sometimes Code

Reputation: 601

Paging not working in MVC Webgrid

I am working with MVC WebGrid. I am stuck in problem from 4 days. I have checked each blog and each question on stackoverflow but nothing works. My WebGrid get disappear when i click on any page number. I am creating a search control. After the search button has been clicked, the ajax.beginform will call a method on controller and then update a div with a partial view. The partial view consist of webgrid(made of result). The code of webgrid is given below:

@{
    var grid = new WebGrid(canPage: true, rowsPerPage: 5, ajaxUpdateContainerId: "grid");
    grid.Bind(list, rowCount: list.Count, autoSortAndPage: true);

    grid.Pager(mode: WebGridPagerModes.All);
}
<div id = "grid">
    @if (list[0].Title == null)
    {
        <span>No Record to display</span>
    }
    else
    {
        @grid.GetHtml(tableStyle: "gridTable",
                      headerStyle: "gridHead",
                      footerStyle: "gridFooter",
                      rowStyle: "gridRow",
                      alternatingRowStyle: "gridAltRow",
                      columns: grid.Columns(
                      grid.Column("Title", "Title"),
                      grid.Column("Category", "Category")
        ));
    }
</div>

The grid opens fine first time. But when i click on any page number , grid gets disappear.

Kindly do help me!! Thanks in advance

Upvotes: 2

Views: 7261

Answers (4)

SpaghettiCoder
SpaghettiCoder

Reputation: 31

I experienced a similar paging issue but removing ajaxUpdateContainerId from my grid did not resolve it. Turns out that a specific bit of JavaScript was causing my problem:

javascript screenshot

However, when I specifically called out the column I wanted to hide, my paging returned:

javascript screenshot

Upvotes: 0

WonderYearsKid
WonderYearsKid

Reputation: 310

I faced the same issue and resolved it after i saw 'mcaffart' comment saying the webgrid couldn't do paging right after a post method that loads the webgrid. I changed my Ajax call to GET instead of post, also marked my action method to [HTTPGET] which resulted in the paging on the webgrid functioning as expected. Thanks for your comments.

Upvotes: 1

Shibu Thomas
Shibu Thomas

Reputation: 3196

Paging issue is solved. Please remove ajaxUpdateContainerId: "grid" from

var grid = new WebGrid( canPage: true, rowsPerPage: Model.PageSize, canSort: true, ajaxUpdateContainerId: "grid");

You have specified an ajaxUpdateContainerId. That means your paging is AJAX based - hence the # in the href. If you want URLs, you need to remove the ajaxUpdateContainerId.

Upvotes: 1

mcaffart
mcaffart

Reputation: 51

I ran into this problem this day and managed to fix it.

WebGrid can't do the paging when called after a POST method.

So modify your search control in order to have something else than a POST

Upvotes: 5

Related Questions