I just want to style the current page or selected page in a WebGrid, How do i do it? -
how highlight current page number in mvc webgrid
this webgrid control
@{ var grid = new webgrid(canpage: true, rowsperpage: @model.pagesize, cansort: true, ajaxupdatecallback: "getstars", ajaxupdatecontainerid: "supplistgrid"); grid.bind(@model.searchresultsupplierviewmodels, rowcount: @model.totalpagerows, autosortandpage: false); grid.pager(webgridpagermodes.all); @grid.gethtml(tablestyle: "webgrid", footerstyle:"pp-pagenumber", htmlattributes: new {id="supplistgrid"}, columns: grid.columns( grid.column(format: (item) => @html.raw("<div class='row panellawfirmresultbox'><div class='col-md-2 panelsupplierlogo'><img src='../content/images/profile-logo.png' class='img-responsive' /></div><div class='col-md-7'><h4><a href='#'>"+item.suppliername+"</a><sup class='pps-type'>premium</sup></h4> <div class='panelpracticeareadetails'><div class='content'> <span class='blue'>services offered: </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.keypracticeareaname+"'>"+item.keypracticeareanames+"</a></div></div><div class='panellocationdetails'><div class='content'> <span class='blue'>location(s): </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.supplierlocation+"'>"+item.supplierlocations+"</a> </div><div class='more'>…</div></div><span class='blue'>client rating ("+item.clientrating+"): </span><span class='clientstars'>"+item.clientrating+"</span><br /><span class='blue'>panel partnership rating ("+item.panelrating+"): </span><span class='panelstars'>"+item.panelrating+"</span></div> <div class='col-md-3'> <a href='lawfirm-profile.html' class='ppbutton-reachout'>reach out</a> <a href='#addtopanel' class='ppbutton-addpanel inline2'>add panel</a> <a href='#' class='ppbutton-addwatch'>add watchlist</a> </div></div>")) )) } using footerstyle:"pp-pagenumber" able set styles not selected page numbers, how set style selected page?
finally came in solution. think easy fix problem.
<style> span.clientstars span { background-position: 0 0; } </style> $(document).ready(function () { //area providing page number style $('tr.pp-pagenumber td').contents().filter(function () { return this.nodetype === 3; }).wrap('<a class="currentpage" style="color: #fff;background: #438a16;"></a>'); $(".currentpage").each(function () { if ($(this).html().trim() == "") $(this).remove(); }); //end });
Comments
Post a Comment