Search code examples
asp.nettwitter-bootstrapwebgrid

Implement bootstrap pagination in webgrid


I want to style my Webgrid pagination with bootstrap but cant find any good way.

I found this package https://www.nuget.org/packages/WebGridBootstrapPagination/ but I have no idea to use it after installing it.

Here is a part of my webgrid

@model IEnumerable<AnalyticConfig.Models.User>
@{
  var grid = new WebGrid(Model, ajaxUpdateContainerId: "ajaxgrid",    ajaxUpdateCallback: "webgrid", rowsPerPage: 5);
  grid.Pager(WebGridPagerModes.All);
}


    <div id="ajaxgrid" class="row panel-body table-responsive">
    @grid.GetHtml(
    tableStyle: "table table-striped table-list table-hover",
    columns: grid.Columns(
                grid.Column(canSort: false, style: "col-md-2", format: 
                @<text>
                    <a href='#' class="btn btn-info glyphicon glyphicon-pencil display edit-btn"></a>
                    <a href="#" class="btn btn-success glyphicon glyphicon-ok modify save-btn"></a>
                    <a href="#" class="btn btn-warning glyphicon glyphicon-remove modify cancel-btn"></a>
                    <a href="#" class="btn btn-danger glyphicon glyphicon-trash display delete-btn"></a>
                </text>),
                grid.Column(null, null, style:"hidecol", format: @<input type="hidden" id="in_ID" value="@item.Id" />),
                grid.Column("SchoolUnit", "Skolenhet", style: "col-md-2", format:
                @<text>
                    <span class="display"><label id="lbl_unit">@item.SchoolUnit</label></span>
                    @Html.DropDownList("in_unit", new SelectList(ViewBag.schoolUnitList, "Text", "Value", @item.SchoolUnit), new { @class = "form-control modify" })
                </text>),
                grid.Column("Name", "Namn", style: "col-md-2", format:
                 @<text>
                    <span class="display"><label id="lbl_name">@item.Name</label></span>
                    <input type="text" id="in_name" value="@item.Name" class="form-control modify" />
                </text>)

    )
    </div>

If you know how to use the package or know any other ways please let me know.


Solution

  • My solution. No custom css or html added for webgrid pagination

    $("tfoot a").addClass('btn btn-default'); // add bootstrap buttons
    
    // add active bootstrap button
    $("tfoot td")
      .contents()
      .filter(function () {     
          if (this.nodeType === 3 && this.length > 1) {
              return this.nodeType
          }
      })
      .wrap('<span class="btn btn-primary" />');
    

    Result enter image description here