Aligning data inside of WebDataGrid columns

Very often data inside of WebDataGrid columns need to be aligned either to the left or to the right. Right alignment is very useful when dealing with numeric data.

Just like any other styling option in the grid, this can be achieved using the CSS classes. Separate classes need to be defined outside of the grid and then used in the columns that need alignment.

It is important to note that since the grid is relying on use of CSS selectors, each CSS class that targets either TR or TD HTML elements must use a CSS selector as well. If it is not done, the style may not be applied correctly. So in the code example below the alignment CSS classes are defined using CSS selectors; these selectors indicate that individual TD elements are being targeted.

After the classes are defined, their names should be simply assigned to the CssClass properties of the columns that need alignment.

Here is an example:

<style type="text/css">
    tbody > tr > td.Left
    {
        text-align:left;
        }
    tbody > tr > td.Right
    {
        text-align:right;
    }
</style>

 

<ig:WebDataGrid ID="WebDataGrid1" runat="server" DataKeyFields="CustomerID" AutoGenerateColumns="false" StyleSetPath="~/Styles" StyleSetName="Default" Width="800px" DataSourceID="AccessDataSource1">

<Columns>

 <ig:BoundDataField DataFieldName="CustomerID" CssClass="Left" Key="CustomerID">

  <Header Text="" />

 </ig:BoundDataField>

 <ig:BoundDataField DataFieldName="CompanyName" CssClass="Right" Key="CompanyName">

  <Header Text="Company" />

 </ig:BoundDataField>

 <ig:BoundDataField DataFieldName="ContactName" CssClass="Left" Key="Contact">

  <Header Text="Contact" />

 </ig:BoundDataField>

 <ig:BoundDataField DataFieldName="Address" CssClass="Right" Key="Address">

  <Header Text="Address" />

 </ig:BoundDataField>

</Columns>

</ig:WebDataGrid>

 

<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb"

            SelectCommand="SELECT top 6 [CustomerID], [CompanyName], [ContactName], [Address] FROM [Customers]">

</asp:AccessDataSource>

 

ASP.NET team