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
140
Header and Footer css
posted

I'm using infragistics 14.1 build 2011. I have a webdatagrid that has headings and a footer. The footer is used in 1 column to show the total of the individual items.

I want the background colour of the header to be grey (like all the grids in our system) and the footer cell blue. However when I set the footer style of the column it is setting the header and the footer background to blue.

If i use the front end (which I don't normally use) setting both the header and footer styles to unique values will save them both as the one value.

Is it possible to have different header and footer styles? e.g. Footer-CssClass="PickQtyFooter" Header-CssClass="PickQtyHeader"

FYI - This was possible with the old ultra grid control

  • 10685
    Verified Answer
    Offline posted

    Hello,

    “However when I set the footer style of the column it is setting the header and the footer background to blue.”
    This is a well-known issue for 14.1 build 2011 and a fix was included in the latest SR 14.1.20141.2150

    I suggest upgrading to the latest service release made public last Friday 14.1.20141.2150 and see this is not reproducible. You could download it either via our Web Site or using the Infragistics Platform Installer 2014.1 (from Visual Studio under Infragistics Tab) and run Review Updates at the bottom of the appearing window. 

    You could set the CssClass properties for the header and the footer.
    For reference I have created the following code sample where I have applied a couple of grumpy css classes: 

            .test {

                background-color:green;    
                font-size:x-large;         

            }       
               .testFooter {
                background-color:blue !important;  
                font-size:large;
                font-style:italic;
                border-color:red !important;
                border:  3px;              
            }

        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
            </div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px"
                Width="400px"
                ShowHeader="true"
                ShowFooter="true">
                <Columns >
                    <ig:BoundDataField Key="Name" DataFieldName="Name">
                        <Header CssClass="test"></Header>
                        <Footer CssClass="testFooter" Text="testFooter"></Footer>
                    </ig:BoundDataField>
                </Columns>  

    Additional resources:
    If you are interested in a full styling guide for WebDataGrid and WebHierarchicalDataGrid, you could refer to the following forum thread, as there you will find most of the possibilities covered:
    “WebHierarchicalDataGrid header color” http://www.infragistics.com/community/forums/t/90320.aspx 

    “So in order to set different css footer styles for the grids you could set a different StyleSetName property for the second grid”:http://www.infragistics.com/community/forums/t/85355.aspx

    WebDataGrid_HeaderFooterCssProperties.zip