CODEWITHSUNDEEP
asp.nettwitter-bootstrapwebgrid
roYal
roYal

Reputation: 197

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.

Upvotes: 0

Views: 2003

Answers (1)

roYal
roYal

Reputation: 197

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

Upvotes: 2

Related Questions