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
Paul Shearing
1360
CssClass not overriding Alternate Rows
posted

I have a hierarchical data source connected to a WHDG. The WHDG is defined declaritavely in an .ASPX file (a content file to a Master Page). Everything works OK as far as retrieving data is concerned, however, some of the data columns contain numerical data so I need to right-align these columns. In the <Columns> section of the corresponding WHDG band I have the following:

 <ig:BoundDataField DataFieldName="PL6_Description" Key="PL6_Description" Width="100%" CssClass="LEFT"><Header Text="Item Description" CssClass="LEFT"/></ig:BoundDataField>

<ig:BoundDataField DataFieldName="PL6_QUANTITY" Key="PL6_QUANTITY" Width="80px" DataFormatString="{0:f2}" CssClass="RIGHTp4" ><Header Text="Qty" CssClass="RIGHTp4"/></ig:BoundDataField>

Classes "LEFT" and "RIGHTp4" are defined in a separate .css file and are intended to override just the alignment and text padding, thus:

.LEFT { text-align: left }
.RIGHTp4 { text-align: right; padding-right: 4px }

When the grid is displayed, the output is staggered with even rows obeying the right-text alignment for data and headings but the odd data rows ignore it.

This looks like a bug to me but this is a complex control so perhaps it is by design. How do I set the text alignment of these columns in alternate rows to be right-aligned whilst retaining the formatting of the applied style? (Appletini).

Kind regards

Paul

VS 2010
IG ASP.NET 2010.2
.NET 4
C#
IE8 (64 bit) also tested with FireFox and Chrome - same result.
Dev sys: Win 7 ULT 64-bit 8GB RAM

  • 49378
    Suggested Answer
    posted

    Hi Paul,

    It has been a while since your post, however in case you still need assistance I would be glad to help.

    Alternating rows in the WHDG and WebDataGrid have different styling. The css class used for the even rows is: tbody.igg_Item>tr>td, and respectively for odd rows: tbody>tr.igg_Alt>td

    I am attaching a sample which demonstrates how the contents of a column can be right aligned with padding of 4px. The sample page uses the Northwind DB. For clarity, here is the page markup:

    

    <head runat="server">
    <style type="text/css">

    tbody.igg_Item>tr>td
    {
        text-align:right;
        padding-rigth:4px;
    }

    tbody>tr.igg_Alt>td
    {
        text-align:right;
        padding-rigth:4px;
    }


    </style>
        <title></title>
    </head>

    <body>
        <form id="form1" runat="server">
        <div>
        
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server" 
                AutoGenerateBands="False" AutoGenerateColumns="False" 
                DataMember="SqlDataSource1_DefaultView" 
                DataSourceID="WebHierarchicalDataSource1" Height="350px" 
                Key="SqlDataSource1_DefaultView" Width="400px">
                <Columns>
                    <ig:BoundDataField DataFieldName="ProductID" Key="ProductID" CssClass="tbody" Width="100%">
                        <Header Text="ID"    />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="ProductName" Key="ProductName" Width="80px">
                        <Header Text="ProductName" />
                    </ig:BoundDataField>
                </Columns>
            </ig:WebHierarchicalDataGrid>
            <ig:WebHierarchicalDataSource ID="WebHierarchicalDataSource1" runat="server">
                <dataviews>
                    <ig:DataView ID="SqlDataSource1_DefaultView" DataMember="DefaultView" 
                        DataSourceID="SqlDataSource1" />
                </dataviews>
            </ig:WebHierarchicalDataSource>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
                SelectCommand="SELECT [ProductID], [ProductName] FROM [Alphabetical list of products]">
            </asp:SqlDataSource>
        
        </div>
        </form>
    </body>
    </html>
    

     

    Please contact me if you have any questions.

    Best Regards,

    Petar Ivanov
    Developer Support Engineer
    Infragistics, Inc.
    http://ko.infragistics.com/support

    WHDGCssSample.zip