SfGrid Stacked Columns - styles

[Yoshiro]

Hello Syncfusion Support,

I am trying to align the rotated column header vertically at the bottom as shown in my screesnhot. I also nned the last column (which is not stacked) to move up in the center so it doesn't show ellipsis (...) , the first column "Fund" should be placed in the center of the cell and "Asset Specific" and "Security Specific" text should be Bold. I have tried various changes with CSS but could not achive the desired effect. Can you please help?

Here is the Grid definition:

<SfGrid ID="RiskScoreGrid" @ref="RiskScoreGrid" DataSource="@RiskScoreData" AllowPaging="true" Toolbar="@(new List<string>() { "ExcelExport" })" AllowExcelExport="true" GridLines="GridLine.Both">

<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="RiskScoreModel"></GridEvents>

<GridColumns>

    <GridColumn Field="Fund" HeaderText="Fund" Width="150" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "e-attr" } })"></GridColumn>

    <GridColumn HeaderText="Asset Specific" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" CustomAttributes="@(new Dictionary<string, object>() { { "class", "e-attr" } })">

<GridColumns>

    <GridColumn Field="Complexity" HeaderText="Complexity" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

    <GridColumn Field="MarketDisruption" HeaderText="Market Disruption" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

    <GridColumn Field="MarketTransparency" HeaderText="Market Transparency" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

    <GridColumn Field="ModelRisk" HeaderText="Model Risk" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

    <GridColumn Field="FourthPartyRisk" HeaderText="4th Party Risk" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

</GridColumns>

    </GridColumn>

    <GridColumn HeaderText="Security Specific" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" CustomAttributes="@(new Dictionary<string, object>() { { "class", "e-attr" } })">

<GridColumns>

    <GridColumn Field="Liquidity" HeaderText="Liquidity" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Justify"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

    <GridColumn Field="VendorDiff" HeaderText="Vendor Difference" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

    <GridColumn Field="Unchanged" HeaderText="Unchanged" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

    <GridColumn Field="ModelRisk" HeaderText="Model Risk" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

    <GridColumn Field="ABFV" HeaderText="AB FV" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

</GridColumns>

    </GridColumn>

    <GridColumn Field="Total" HeaderText="Total Risk Score" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"

    CustomAttributes="@(new Dictionary<string, object>() { { "class", "rotateclass" } })"></GridColumn>

</GridColumns>

<GridTemplates>

    <EmptyRecordTemplate>

<span>No Records Found</span>

    </EmptyRecordTemplate>

</GridTemplates>

</SfGrid>

<style>

    .e-btn {

        background-color: #1E9BD7;

        color: Black;

    }

    .e-attr {

        font-weight: bold;

        background-color: #1E9BD7 !important;

        color: Black;

     }

    .e-grid .e-columnheader .e-headercell { /*Set height for header row*/

        height: 180px;

        font-weight: 300;

        background-color: #1E9BD7 !important;

        color: Black;

    }

    .e-grid .e-columnheader .e-stackedheadercell{ /*Set height for header row*/

        height: 30px;

        font-weight: 300 !important;

        color: Black;

    }

    .e-grid .e-columnheader .e-headercell .e-stackedheadercell { /*Rotate a particular headertext*/

        font-weight: 300 !important;

    }

    .e-grid .e-columnheader .e-headercell.rotateclass .e-headercelldiv { /*Rotate a particular headertext*/

        transform: rotate(270deg);

    }

</style>

And here is a screenshot of what I am trying to achieve.

Any help is greatly appreaciated.

[Monisha Saravanan]

Hi Yoshiro,

Greetings from Syncfusion support.

Query: “I am trying to align the rotated column header vertically at the bottom as shown in my screesnhot. I also nned the last column (which is not stacked) to move up in the center so it doesn't show ellipsis (...) , the first column "Fund" should be placed in the center of the cell and "Asset Specific" and "Security Specific" text should be Bold.”

We have modified the shared code snippet to achieve your requirement using CSS. Kindly refer the below attached sample and screen snip for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BLAZOR~1-988953429.zip

Please let us know if you have any concerns.

Regards,

Monisha

[Yoshiro]

Thank you Monisha, this is looking great. Just one thing that could be corrected is the rotated header text is being cut off on my screen (but not yours), I am not sure why.

Please see how it looks on my screen below after making changes you suggested.

Is there any way to correct, to move the text a little up ? I do not really want to show the ellipsis, I would like to display the entire text (for example, the second column header should be "Market Disruption" instead of "Market Disru...").

Thanks again,

Yoshiro

[Monisha Saravanan]

Hi Yoshiro,

We have modified the sample as per your suggestion. To render the text without ellipsis(….) we suggest you to set the overflow property as unset and also to adjust the rendering position we suggest you to use margin property. Kindly refer the attached code snippet and sample for your reference.

.e-grid .e-headercelldiv {

   

    margin: -40px -7px -7px -8px;

     overflow: unset;

     }

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11288073426.zip

Please let us know if you have any concerns.

[Yoshiro]

Thank you Monisha. It works well now.

[Monisha Saravanan]

Hi Yoshiro,

Welcome. We are glad to hear that the reported issue has been resolved. Kindly get back to us if you have further queries. As always we will be happy to help you.