This is a migrated thread and some comments may be shown as answers.

Grid Multi Column Header display

8 Answers 58 Views
Grid
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 1
Veteran
MBEN asked on 28 Feb 2018, 07:48 PM

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

8 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 05 Mar 2018, 01:50 PM
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
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.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 05 Mar 2018, 05:53 PM
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?
0
Eyup
Telerik team
answered on 08 Mar 2018, 04:32 PM
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.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 08 Mar 2018, 06:37 PM
Thanks, That looks great.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 08 Mar 2018, 06:43 PM
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. 
0
Eyup
Telerik team
answered on 13 Mar 2018, 01:03 PM
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.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 14 Mar 2018, 04:43 PM
Thanks, I submitted a support ticket.
0
Eyup
Telerik team
answered on 15 Mar 2018, 09:57 AM
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
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.
Tags
Grid
Asked by
MBEN
Top achievements
Rank 1
Veteran
Answers by
Eyup
Telerik team
MBEN
Top achievements
Rank 1
Veteran
Share this question
or