Grid Multi Column Header display

9 posts, 0 answers
  1. MBEN
    MBEN avatar
    203 posts
    Member since:
    Nov 2011

    Posted 28 Feb 2018 Link to this post

    I have a multicolumn header in my grid. I want to show an underline/border across the top level header. if I add a text-decoration it just shows the underline across the text and a border blends into the other header. (Banks with BOLI vs Averages for Banks with BOLI)

    Below is my grid css for the header and grid declaration. is there a way I can have an underline for the headers but that spans across the whole column?

    css:

    .RadGrid .rgHeader.colGroup {
           text-align: center !important;
           /*text-decoration: underline !important;*/
           border-bottom: 1px solid #fff !important;
       }   
     
       .RadGrid .rgMultiHeaderRow th.colGroup
       {
           /*border-spacing: 2px !important;
           border-collapse:  separate !important;*/
           margin: 20px !important;
       }

    grid:

    <ColumnGroups>
                        <telerik:GridColumnGroup Name="BanksWithBOLI" HeaderText="Banks With BOLI"
                            HeaderStyle-CssClass="colGroup"  />
                        <telerik:GridColumnGroup Name="BanksWithBOLIAverage" HeaderText="Averages for Banks with BOLI"
                            HeaderStyle-CssClass="colGroup" />
                        <telerik:GridColumnGroup Name="EmptyHeader" HeaderText=" " />
                    </ColumnGroups>
                   <Columns>
                        <telerik:GridBoundColumn DataField="AssetSize" HeaderText="Asset Size" SortExpression="AssetSize"
                            AllowFiltering="false" FooterText="Total" ColumnGroupName="EmptyHeader" HeaderStyle-HorizontalAlign="Left"  ItemStyle-HorizontalAlign="Left" FooterStyle-HorizontalAlign="Left" />
                        <telerik:GridBoundColumn DataField="BankCount" HeaderText="Total Banks" SortExpression="BankCount"
                            UniqueName="BankCount" HeaderStyle-Width="10%" Aggregate="Sum" FooterAggregateFormatString="{0}" ColumnGroupName="EmptyHeader" />
                        <telerik:GridBoundColumn DataField="BOLIBankCount" HeaderText="#" SortExpression="BOLIBankCount"
                            UniqueName="BOLIBankCount" HeaderStyle-Width="7%" Aggregate="Sum" ColumnGroupName="BanksWithBOLI" >
    FooterAggregateFormatString="{0}" />
                        <telerik:GridBoundColumn DataField="BOLIPercentage" HeaderText="%" SortExpression="BOLIPercentage"
                            UniqueName="BOLIPercentage" HeaderStyle-Width="9%" DataFormatString="{0:p1}" ColumnGroupName="BanksWithBOLI" FooterAggregateFormatString="{0:p1}" />
                         
                        <telerik:GridBoundColumn DataField="Assets" HeaderText="Assets<br />(000s)" SortExpression="Assets"
                            UniqueName="Assets" DataFormatString="{0:$#,##0;($#,##0)}" HeaderStyle-Width="11%" ColumnGroupName="BanksWithBOLIAverage" />
                        <telerik:GridBoundColumn DataField="Capital" HeaderText="Tier 1<br /> Capital<br />(000s)" SortExpression="Capital"
                            UniqueName="Capital" DataFormatString="{0:$#,##0;($#,##0)}" HeaderStyle-Width="11%" ColumnGroupName="BanksWithBOLIAverage" />
                        <telerik:GridBoundColumn DataField="BOLICSV" HeaderText="BOLI CSV<br />(000s)" SortExpression="BOLICSV"
                            UniqueName="BOLICSV" DataFormatString="{0:$#,##0;($#,##0)}" HeaderStyle-Width="11%" ColumnGroupName="BanksWithBOLIAverage" />
                        <telerik:GridBoundColumn DataField="BOLIToCapitalPercentage" HeaderText="% BOLI <br />to<br />Capital" SortExpression="BOLIToCapitalPercentage"
                            UniqueName="BOLIToCapitalPercentage" DataFormatString="{0:0.#%}" HeaderStyle-Width="9%" ColumnGroupName="BanksWithBOLIAverage" />
                        <telerik:GridBoundColumn DataField="BOLIToAssetsPercentage" HeaderText="% BOLI <br />to<br />Assets" SortExpression="BOLIToAssetsPercentage"
                            UniqueName="BOLIToAssetsPercentage" DataFormatString="{0:0.#%}" HeaderStyle-Width="9%" ColumnGroupName="BanksWithBOLIAverage" />
                    </Columns
  2. Eyup
    Admin
    Eyup avatar
    3849 posts

    Posted 05 Mar 2018 Link to this post

    Hello,

    I've created a sample RadGrid web site to test this rule and the text is properly underlined on my side, and the cells have their bottom border correctly set. Please run the attached application and verify that this is the case on your side, too. And if you have different requirement, please send us sample screenshots or video to demonstrate the exact desired appearance.

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. MBEN
    MBEN avatar
    203 posts
    Member since:
    Nov 2011

    Posted 05 Mar 2018 in reply to Eyup Link to this post

    Thanks, that is a little helpful but I do not show borders for all the columns in my grid. I was hoping to just have a space between the bottom border for the group header in the highlighted space in the screenshot. is that possible?
  4. Eyup
    Admin
    Eyup avatar
    3849 posts

    Posted 08 Mar 2018 Link to this post

    Hi,

    You can try this modification to achieve that:
    <style>
        div.RadGrid th.rgHeader.colGroup {
            text-align: center;
            text-decoration: underline;
            position: relative;
        }
     
            div.RadGrid th.rgHeader.colGroup:after {
                content: '';
                width: calc(100% - 20px);
                height: 3px;
                background: green;
                position: absolute;
                bottom: -2px;
                left: 0;
                margin-left: 10px;
            }
    </style>

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. MBEN
    MBEN avatar
    203 posts
    Member since:
    Nov 2011

    Posted 08 Mar 2018 in reply to Eyup Link to this post

    Thanks, That looks great.
  6. MBEN
    MBEN avatar
    203 posts
    Member since:
    Nov 2011

    Posted 08 Mar 2018 in reply to MBEN Link to this post

    I responded a little too early. The underline looks fine, but when I have a commanditem on top, it looks a little misaligned. Look at the at screenshot attached. 
  7. Eyup
    Admin
    Eyup avatar
    3849 posts

    Posted 13 Mar 2018 Link to this post

    Hello,

    It seems to work properly on my side. Perhaps, I am missing some specific configuration from my end and you can try to make some custom modification to the provided CSS values. Alternatively, you can modify the RadGridMultiColumnHeadersMBEN.zip sample to demonstrate this appearance and open a formal support thread to send it back to us for further local investigation.

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. MBEN
    MBEN avatar
    203 posts
    Member since:
    Nov 2011

    Posted 14 Mar 2018 in reply to Eyup Link to this post

    Thanks, I submitted a support ticket.
  9. Eyup
    Admin
    Eyup avatar
    3849 posts

    Posted 15 Mar 2018 Link to this post

    Hello,

    Thank you for the provided sample in the support ticket. I suggest that we continue our technical conversation on the mentioned thread from now on.

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top