Grid column title too long, hides sorting

Radzen.Blazor Components
1

My grid column titles are longer than the cell. I tried putting "white-space: pre-wrap" it got to 2 lines, but the sorting icon is still being hidden.

How do I make the sorting icon show?

image

    <RadzenGridColumn TItem="Meal" Property="Number" Title="1 piece is consumed for (days)">
        <HeaderTemplate>
            <span style="white-space: pre-wrap">1 piece is consumed for (days)</span>
        </HeaderTemplate>
    </RadzenGridColumn>
2

Try setting the Width property of the column.

3

If I set the column width to 230px for example the text goes back to 1 line and the sorting icon is again half hidden.

image

 <RadzenGridColumn TItem="Meal" Property="Number" Title="1 piece is consumed for (days)">
    <HeaderTemplate>
        <span style="white-space: pre-wrap; width=230px">1 piece is consumed for (days)</span>
    </HeaderTemplate>
</RadzenGridColumn>
4

You need to set the Width property of the column and not the width style attribute of your span.

5

Yes, I am sorry I posted the wrong code in my previous post: When I set the property of the column, this is the result: The column title goes back to 1 line and the sorting icon is half hidden.

image

    <RadzenGridColumn TItem="Meal" Property="Number" Width="230px">
        <HeaderTemplate>
            <span class="gridColumndStyle">1 piece is consumed for (days)</span>
        </HeaderTemplate>
    </RadzenGridColumn>

.gridColumndStyle {
white-space: pre-wrap;
}

6

What happens when you set it to a larger value?

7

With width: 270px. this is the result:

image

The text is on 1 line and the sorting icon shows.

But the column is unnecessarily big.

I want to set smaller width, the text to break into several lines and always show the sorting icon.

8

Try setting the display of the span to inline-block and specifying some width value which is smaller than the column Width.

<RadzenGridColumn TItem="Meal" Property="Number" Width="230px">
    <HeaderTemplate>
        <span class="gridColumndStyle">1 piece is consumed for (days)</span>
     </HeaderTemplate>
</RadzenGridColumn>

.gridColumndStyle {
     white-space: pre-wrap;
     display: inline-block;
     width: 200px;
}
1 Like
9

Thank you! I applied the proposed changes and it did the trick!

image

The problem now is that the sorting icon is in the middle. I believe this is because of this property:

image

I tried to align to it to the top I tried with this code, but it has no effect:

.ui-sortable-column .fa {
vertical-align: top;
}

Is there anyway I can make this icon be vertical-align: top;?

10

I recommend searching online for CSS specificity.

11

I use radzen pro, I put a datagrid on a page, I can not find where to set up the column title text wrap?
please help me for this, our company orders two radzen pro license, we are leaning how to use them.
Thank you!
john

12

Hi @jzhu,

You need to set the HeaderTemplate property of the column:

Screenshot 2021-04-19 at 20.24.55
Screenshot 2021-04-19 at 20.24.552048×1344 181 KB

The value from the screenshot is:

<span style="width: 100px; display:inline-block; white-space: pre-wrap">This is a long title</span>

Set the width to the width of the column.

1 Like
13

is there a way to set this width dynamically? so it will take the width of the parent object (the RadzenDataGridColumn in this case?)
this so it will work for all columns properly