Grid Multi Column Header display

[MBEN]

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

[Eyup]

Hello,

I've created a sample RadGrid 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

[MBEN]

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?

[Eyup]

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

[MBEN]

Thanks, That looks great.

[MBEN]

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. 

[Eyup]

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

[MBEN]

Thanks, I submitted a support ticket.

[Eyup]

Hello,

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

Regards,
Eyup
Progress Telerik