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'>&#8230;</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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -