Question

I am developing MVC3 website and using mvc3 webgrid control in it.

The problem which I encounter is to hide the > and < links for Previous and Next page of pagination when the page size is 5 or less otherwise it displays Normally.

@{
var grid = new WebGrid(source: Model, defaultSort: "FirstName", rowsPerPage: 5,
canPage:true, canSort: true);
 }

@grid.GetHtml(tableStyle: "grid", headerStyle: "table-heading",
              footerStyle: "pager",
              alternatingRowStyle: "gird-second-row",
              selectedRowStyle: "gird-first-row",
              rowStyle: "gird-first-row", columns: new[] {
      grid.Column("Title", header: "FirstName")
})

Any help?

Answer 1

Since the WebGrid helper doesn’t allow you the possibility to add special classes to those links you could use jQuery to show/hide them. For example you could place the following script just after the grid declaration inside the view:

<script type="text/javascript">
    var pager = @Html.Raw(Json.Encode(new { index = grid.PageIndex, count = grid.PageCount }))
    if (pager.count < 6 && (pager.index >= 1 || pager.index <= pager.count)) {
        $('.pager td :first-child').filter(function() { return $(this).text() === '<'; }).hide();
        $('.pager td :last-child').filter(function() { return $(this).text() === '>'; }).hide();
    }
</script>