Hi !
I want to change the webgrid paging layout using just CSS.
But webgrid renders the pager like this :
<td> 1 <a href> 2 </a><a href> 3 </a><a href> N </a></td>
This way I can't css select only that " 1 " from the paging code, applying css to the TD causes unwanted side effects. Is there a way, without using app stylist - just with CSS and some codebehind or anything, to make the webgrid renders the current page with any holding tag ???? Like this :
<td> <span> 1 </span>...</td>
thanks
[]s
Well none of the suggestions do apply to the issue.
By using custom paging templates, it doesn't garantee that the current page will have a <span> tag around it.
As I said. When you don't use app stylist, all ids and stuff are suppressed, so I can't use the css selectors solution either.
Test your self. When there is no app stylist , the grid renders like this :
In order to select the current page, I need to have an EXTRA tag around it, like <span> 1 </span> , that is NOT rendered by the grid, when not using app stylist.So as you can see, the problem is much deeper, I'm talking about changing the HTML rendering of the webgrid pager, not just the way it shows ( as with changing the pager template ).
In this case, any idea? Hacking the html renderer is even possible ??
Hello,
I can suggest two solutions for this problem
#1 Custom Paging - this way you can control your own paging template with complete CSS control. This example is shown here.#2 CSS Selectors -- Since the grid outputs its ID + "_pager, you can fine tune your CSS selectors to apply only to this part <td id="UltraWebGrid1_pager" class="ig_Office2007BlackControl igtbl_Office2007BlackControl ig_49f5d809_r0 igtbl_Office2007BlackPagerArea" align="right" onclick="igtbl_onPagerClick('UltraWebGrid1',event)" style="border-top-width: 0px; height: auto; white-space: normal;"><span class="igtbl_Office2007BlackPageCurrent">1</span> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',2)" href=" ">2</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',3)" href=" ">3</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',4)" href=" ">4</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',5)" href=" ">5</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',6)" href=" ">6</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',7)" href=" ">7</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',8)" href=" ">8</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',9)" href=" ">9</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',10)" href=" ">10</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',11)" href=" ">11</a> <a class="igtbl_Office2007BlackPageLink" onclick="BLOCKED SCRIPTigtbl_pageGrid(event,'UltraWebGrid1',12)" href=" ">12</a></td>