Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Daryl
4110
Pager Alignment Issues
posted

I must be blind, but I cannot figure out where to set the pager alignment. I'm not finding any properties for it. My WebDataGrid (below) has the pager aligned right and I want it to be aligned left or center. Can anyone point me in the right direction? Thanks.

<ig:WebDataGrid ID="igActions" runat="server" StyleSetName="Office2007Blue" StyleSetPath="~/ig_res/"
AjaxIndicator-Enabled="True" AjaxIndicator-ImageUrl="~/images/loading1.gif" >
<Behaviors>
<ig:Activation>
</ig:Activation>
<ig:Selection CellClickAction="Row"  RowSelectType="Single">
</ig:Selection>
<ig:RowSelectors>
</ig:RowSelectors>
<ig:Paging PagerAppearance="Both" PageSize="25" Enabled="true" QuickPages="3" PagerMode="NumericFirstLast" ></ig:Paging>
<ig:EditingCore>
<Behaviors>
<ig:RowAdding Enabled="true"  >
<EditModeActions MouseClick="Single" EnableOnKeyPress="true" />                              
</ig:RowAdding>
<ig:RowDeleting />
<ig:RowEditingTemplate CancelButton="buttonCancel0" OKButton="buttonOK0" >
<Template>
</Template>
</ig:RowEditingTemplate>                       
</Behaviors>
</ig:EditingCore>
<ig:Sorting>
</ig:Sorting>
</Behaviors>    
</ig:WebDataGrid>

Parents
No Data
Reply
  • 10240
    Verified Answer
    posted

    Hi Daryl,

    For this, you will set the pager alignment in css (ig_dataGrid.css) within the ig_res folder. In your scenario you will set this on the Office2007Blue style as this is the style set you have the grid set to in your project. Specifically you will set the the text-align property of .igg_Office2007BluePager class:

     

    .igg_Office2007BluePager
{
	background-color:#D7E5F7;
	background-repeat:repeat-x;
	background-image: url(images/igg_pagerbg.gif);
	padding-top:5px;
	padding-bottom:5px;
	text-align:left;
}

    The easiest way you can expose the relevant class as shown above is by using the IE developer toolbar. This is a free download which you can obtain by navigating to this link: http://www.microsoft.com/download/en/details.aspx?id=18359

    I included a screen image that shows you the toolbar in use:

Children