{"id":372,"date":"2010-08-25T15:02:00","date_gmt":"2010-08-25T15:02:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=372"},"modified":"2025-02-26T10:38:28","modified_gmt":"2025-02-26T10:38:28","slug":"webdatagrid-css-styling-guide","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/webdatagrid-css-styling-guide","title":{"rendered":"WebDataGrid CSS Styling Guide"},"content":{"rendered":"\n

WebDataGrid CSS Styling Guide provides guidelines for customizing the appearance of the WebDataGrid using CSS. It covers modifying colors, fonts, cell sizes, borders, backgrounds, and animations, as well as applying custom classes to enhance the user experience.<\/p>\n\n\n\n

Styling WebDataGrid<\/h2>\n\n\n\n

1. CSS Classes applied from control level<\/strong><\/p>\n\n\n\n

    \n
  1. CssClass \u2013 applied to the grid\u2019s frame.<\/li>\n\n\n\n
  2. HeaderCaptionCssClass \u2013 applied to the header caption of every column.<\/li>\n\n\n\n
  3. ItemCssClass \u2013 applied to every row.<\/li>\n\n\n\n
  4. AltItemCssClass \u2013 applied to every even row.<\/li>\n\n\n\n
  5. FooterCaptionCssClass \u2013 applied to the footer caption of every column.<\/li>\n<\/ol>\n\n\n\n

    2. CSS Classes applied from column level<\/strong><\/p>\n\n\n\n

      \n
    1. Header-CssClass \u2013 applied to the column Header.<\/li>\n\n\n\n
    2. CssClass \u2013 applied to every cell in the column.<\/li>\n\n\n\n
    3. Footer-CssClass\u2013 applied to the column Footer<\/li>\n<\/ol>\n\n\n\n

      Note:<\/strong> The classes that are applied on the column level would overwrite those on the control level.

      3. CSS Classes applied from behavior levels
      <\/strong>
      3.1. Activation<\/strong><\/p>\n\n\n\n

        \n
      1. ActiveCellCssClass \u2013 applied to the active cell.<\/li>\n\n\n\n
      2. ActiveColumnCssClass \u2013 applied to the column\u2019s header of the active cell.<\/li>\n\n\n\n
      3. ActiveRowCssClass \u2013 applied to the row of the active cell.<\/li>\n\n\n\n
      4. ActiveRowSelectorCssClass \u2013 applied to the RowSelector of the active cell.<\/li>\n\n\n\n
      5. ActiveRowSelectorImageCssClass \u2013 applied to the image area of the RowSelector of the active cell.<\/li>\n<\/ol>\n\n\n\n

        3.2. Column fixing<\/strong><\/p>\n\n\n\n

          \n
        1. CellCssClass \u2013 applied to fixed column cells.<\/li>\n\n\n\n
        2. FooterCssClass \u2013 applied to fixed column footers.<\/li>\n\n\n\n
        3. HeaderCssClass \u2013 applied to fixed column headers.<\/li>\n\n\n\n
        4. SeparatorCssClass \u2013 applied to the separator line that separates fixed columns from regular columns.<\/li>\n<\/ol>\n\n\n\n

          3.3. Column moving<\/strong> <\/p>\n\n\n\n

            \n
          1. TopDragIndicatorCssClass \u2013 applied to the top portion of the drop indicator.<\/li>\n\n\n\n
          2. MiddleDragIndicatorCssClass \u2013 applied to the middle portion of the drop indicator.<\/li>\n\n\n\n
          3. BottomDragIndicatorCssClass \u2013 applied to the bottom portion of the drop indicator.<\/li>\n\n\n\n
          4. DragMarkupCssClass \u2013 applied to the DragMarkup. If the default drag markup is used, this class will be applied in addition to the styles already applied to the header, if the drag markup is replaced only the DragMarkupCssClass will be used.
            <\/li>\n<\/ol>\n\n\n\n

            3.4. Column resizing<\/strong> <\/p>\n\n\n\n

              \n
            1. ResizeIndicatorCssClass \u2013 applied to the resize indicator line<\/li>\n<\/ol>\n\n\n\n

              3.5. Editing<\/strong> <\/p>\n\n\n\n

                \n
              1. EditCellCssClass \u2013 applied to the cell that is being edited.<\/li>\n\n\n\n
              2. AddNewRowCssClass \u2013 applied to the AddNewRow.<\/li>\n\n\n\n
              3. AddNewRowSelectorImageCssClass \u2013 applied to the image area of the RowSelector of the AddNewRow.<\/li>\n<\/ol>\n\n\n\n

                3.6. Filtering<\/strong> <\/p>\n\n\n\n

                  \n
                1. EditCellCssClass \u2013 applied to the filter cell that is being edited.<\/li>\n\n\n\n
                2. FilterButtonCssClass \u2013 applied to the filer button.<\/li>\n\n\n\n
                3. FilteringCssClass \u2013 applied to the filter row.<\/li>\n\n\n\n
                4. FilterRowSelectorImageCssClass \u2013 applied to the image area of the RowSelector of the filter row.<\/li>\n\n\n\n
                5. FilterRuleDropDownCssClass \u2013 applied to the filter rule drop down.<\/li>\n\n\n\n
                6. FilterRuleDropDownHoverItemCssClass \u2013 applied to the hovered item of the filter rule drop down.<\/li>\n\n\n\n
                7. FilterRuleDropDownItemCssClass \u2013 applied to the items of the filter rule drop down.<\/li>\n\n\n\n
                8. FilterRuleDropDownSelectedItemCssClass \u2013 applied to the selected item of the filter rule drop down.<\/li>\n<\/ol>\n\n\n\n

                  3.7. Paging<\/strong><\/p>\n\n\n\n

                    \n
                  1. PagerCssClass \u2013 applied to the pager frame.<\/li>\n\n\n\n
                  2. CurrentPageLinkCssClass \u2013 applied to the current page index in the numeric mode.<\/li>\n\n\n\n
                  3. PageLinkCssClass \u2013 applied to pager\u2019s index links other than the current one in the numeric mode.<\/li>\n<\/ol>\n\n\n\n

                     3.8. Row Selectors<\/strong><\/p>\n\n\n\n

                      \n
                    1. HeaderRowSelectorCssClass \u2013 applied to the row selector of the header row.<\/li>\n\n\n\n
                    2. FooterRowSelectorCssClass \u2013 applied to the row selector of the footer row.<\/li>\n\n\n\n
                    3. RowSelectorCssClass \u2013 applied to row selectors.<\/li>\n<\/ol>\n\n\n\n

                        3.8. Selection<\/strong><\/p>\n\n\n\n

                      <\/a><\/p>\n\n\n\n

                        \n
                      1. SelectedHeaderCssClass \u2013 applied to the column header when a column is selected<\/li>\n\n\n\n
                      2. SelectedCellCssClass \u2013 applied to the cell that is selected.<\/li>\n\n\n\n
                      3. SelectedRowSelectorCssClass \u2013 applied to the row selector when a row is selected.<\/li>\n\n\n\n
                      4. SelectedRowSelectorImageCssClass \u2013 applied to the row selector image when a row is selected.<\/li>\n<\/ol>\n\n\n\n

                        Using CSS selectors<\/h2>\n\n\n\n

                        CSS classes are applied to every cell of WebDataGrid. So let\u2019s imagine that we have a grid with a lot of records – this means that we have to apply one css class that many times. Doing so will significantly enlarge the HTML that needs to be rendered which inevitably lowers the performance. To avoid this, WebDataGrid uses CSS selectors.<\/p>\n\n\n\n

                        For example, there is this default CSS class called igg_Item, <\/em>which needs to be applied to every cell. Here is how it is done:<\/p>\n\n\n\n

                        tbody.Igg_Item > tr > td\n{\n     \/* style *\/\n}<\/pre>\n\n\n\n
                        The same pattern should be used for applying custom CSS classes.<\/p>\n\n\n\n
                          \n
                        1. For any CSS class that targets cells in the body the CSS class should be written as following:<\/li>\n<\/ol>\n\n\n\n
                          tbody.NewCellClass > tr > td\n{\n    \/*styles*\/\n}<\/pre>\n\n\n\n
                          It is applicable to control level\u2019s ItemCssClass property, and to the column fixing behavior’s CellCssClass.<\/p>\n\n\n\n
                            \n
                          1.  For any other classes that target specific cells in the grid the selectors should be used as following:<\/li>\n<\/ol>\n\n\n\n
                            tbody > tr > td.NewCellClass\n{\n    \/*styles*\/\n}<\/pre>\n\n\n\n
                            It is applicable to the these properties:  <\/p>\n\n\n\n
                              \n
                            • column level: CssClass<\/li>\n\n\n\n
                            • activation behavior: ActiveCellCssClass<\/li>\n\n\n\n
                            • selection behavior: SelectedCellCssClass<\/li>\n<\/ul>\n\n\n\n
                                \n
                              1. For any CSS class that targets a row the CSS class should be written as following:<\/li>\n<\/ol>\n\n\n\n
                                tbody > tr.NewRowCssClass > td\n{\n    \/*styles*\/\n}<\/pre>\n\n\n\n
                                It is applicable to the following:<\/p>\n\n\n\n
                                  \n
                                • control level:   AltItemCssClass<\/li>\n\n\n\n
                                • activation behavior: ActiveRowCssClass<\/li>\n<\/ul>\n\n\n\n
                                  The following code shows how to apply different styles to the grid cells.<\/p>\n\n\n\n
                                  <style type=\"text\/css\">\n        .HeaderCaptionClass\n        {\n            text-align: center;\n        }\n        tbody.NewItemClass > tr > td\n        {\n            color: blue;\n            text-align: center;\n        }\n        tbody > tr.ActiveRowClass > td\n        {\n            background-color: Red;\n        }\n        tbody > tr > td.ColumnLevelCssClass\n        {\n            text-decoration: underline;\n        }\n        tbody > tr > td.SelectedCellClass\n        {\n            font-weight: bold;\n        }\n        tbody > tr > td.ActiveCellClass\n        {\n            background-color: Yellow;\n        }\n<\/style><\/pre>\n\n\n\n
                                  <ig:WebDataGrid runat=\"server\" ID=\"wdgCustomers\" DataSourceID=\"AccessDsCustomers\"\n        HeaderCaptionCssClass=\"HeaderCaptionClass\" DataKeyFields=\"CustomerID\" AutoGenerateColumns=\"false\"\n        Width=\"88%\" ItemCssClass=\"NewItemClass\" Height=\"400\">\n        <Columns>\n            <ig:BoundDataField CssClass=\"ColumnLevelCssClass\" Key=\"Country\" DataFieldName=\"Country\"\n                Header-Text=\"Country\" \/>\n            <ig:BoundDataField Key=\"City\" DataFieldName=\"City\" Header-Text=\"City\" \/>\n            <ig:BoundDataField Key=\"CompanyName\" DataFieldName=\"CompanyName\" Header-Text=\"Company\" \/>\n            <ig:BoundDataField Key=\"ContactName\" DataFieldName=\"ContactName\" Header-Text=\"Contact\" \/>\n            <ig:BoundDataField Key=\"Phone\" DataFieldName=\"Phone\" Header-Text=\"Phone\"\/>\n        <\/Columns>\n        <Behaviors>\n            <ig:Activation ActiveCellCssClass=\"ActiveCellClass\" ActiveRowCssClass=\"ActiveRowClass\">\n            <\/ig:Activation>\n            <ig:Selection SelectedCellCssClass=\"SelectedCellClass\">\n            <\/ig:Selection>\n        <\/Behaviors>\n    <\/ig:WebDataGrid>\n    <asp:AccessDataSource ID=\"AccessDsCustomers\" runat=\"server\" DataFile=\"~\/App_Data\/Nwind.mdb\"\n        SelectCommand=\"SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [Phone], [Country] FROM [Customers] ORDER BY [Country]\">\n    <\/asp:AccessDataSource><\/pre>\n\n\n\n
                                  Notes:<\/strong><\/p>\n\n\n\n
                                    \n
                                  • The css classes with selectors are always taking priority and if the selectors are omitted in custom classes, the styling might look different from expected.<\/li>\n\n\n\n
                                  • A potential side effect from css selectors may be that these styles will be applied to ALL td elements in the body (not only the first level td elements as with the angle bracket notation), including those in cell templates, so working with the selectors needs to be done carefully.<\/li>\n\n\n\n
                                  • Internet Explorer 6 does not support selectors with angle bracket format (\u2018>\u2019).  For applications that target IE6 the angle bracket must be omitted. Example:<\/li>\n<\/ul>\n\n\n\n
                                    tbody tr.NewRowCssClass td\n\n{\n    \/*styles*\/\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
                                    WebDataGrid CSS Styling Guide provides guidelines for customizing the appearance of the WebDataGrid using CSS. It covers modifying colors, fonts, cell sizes, borders, backgrounds, and animations, as well as applying custom classes to enhance the user experience.<\/p>\n","protected":false},"author":31,"featured_media":2367,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=372"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/372\/revisions"}],"predecessor-version":[{"id":2490,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/372\/revisions\/2490"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2367"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}