1. Home
  2. Forum
  3. Blazor
  4. Column widths when wrap is on

Column widths when wrap is on

I have a lot of tables with many columns mixing digital and text data. Imagine the list of parts, where you should show name, short description, brand, availability text, price, stock quantity and few parameters in one grid. Column chooser is enabled.

I set AllowTextWrap="true" for the table. I set AutoFit="true" for all columns of the table except short description to absorb redundant width for large screens. When the screen size is enough wide, everything shows well. But when the screen size goes to be tighter, text columns start to wrap their content more and more, and finally they are shrinking to zero width. 

Please, make the next behavior. It is allowed to set MinWidth of column, but now it is used to mark limit of user changes of width only. Use this value to set minimum width of column when its content is wrapped. With this behavior, when MinWidth is setted, for smaller screens such columns will not wrap to infinity, but will be limited. The whole grid will expand other view boundaries and will be scrolled.

I tried to imitate this behavior myself using toggling css styles for different screen sizes, but this looks poor and not natural. 

Otherwise, please, offer another solution for large grids with wrapped columns. To fix all column widths permanently is not a good idea.



10 Replies
RN Rahul Narayanasamy Syncfusion Team November 3, 2021 03:16 AM UTC

Hi Stanislav, 

Greetings from Syncfusion. 

We have validated your query and we need some details regarding your reported query for checking this further. Could you please share the below details. It will be helpful to validate and provide a better solution. 

  • Whether did you face the problem with column width while using AllowTextWrap and AutoFit properties in small size screen?
  • Whether did you faced the problem with text wrap while setting MinWidth to the column.
  • Full Grid code snippets. How many column did you have in your Grid? And how did you define the Grid width?
  • Video demonstration of the problem.
  • Share a simple reproduceable sample if possible.

Regards, 
Rahul 


SG Stanislav Gordenko November 3, 2021 09:29 AM UTC

Hi Rahul,


Could you send me please the sample project with grid which contains about 7-8 columns with text and digital data mixed? I will update this project to show the trouble. Here is the screenshot.



SG Stanislav Gordenko November 3, 2021 09:29 AM UTC


The screenshot.


RN Rahul Narayanasamy Syncfusion Team November 4, 2021 12:25 PM UTC

Hi Stanislav, 

Thanks for the update. 

We have checked your query and prepared a sample based on your update(8 columns with string and number column). We could not able to reproduce the case at our end. Please find the below sample for your reference. 


Could you please check this sample and reproduce the problem and revert back to us if possible.  

Also, could you please share the below details. It will be helpful to validate and provide a better solution. 

  • Whether did you ensure the reported problem by setting MinWidth to the particular column?
  • Whether did you set the Grid height/ width as percentage values?
  • Reproduce the problem in the provided sample and revert back to us.

Regards, 
Rahul 


SG Stanislav Gordenko November 4, 2021 02:51 PM UTC

Hi Rahul,


I have updated your sample. Everything works more or less well till I start to use Template for Product column.

In my project I use template extremely wide because I make multi-language web-site and I should replace the content of each text column with its localized text.

As I wrote the only reasonable solution is to limit maximum height or better minimum width of column.


Attachment: Sample20872746201594327636_b402df1d.zip

RN Rahul Narayanasamy Syncfusion Team November 9, 2021 03:51 AM UTC

Hi Stanislav, 

Thanks for sharing the details. 

We have validated your query with the provided details. We suggest you to set the Width property to that particular template column as like below to resolve the problem. Could you please ensure the case after providing Width property. Find the below code snippets and sample for your reference. 

<SfGrid @ref="Grid" DataSource="@GridData" ShowColumnChooser="true" 
            AllowPaging="true" 
            . . . > 
        . ..  
        <GridColumns> 
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" AutoFit="true"></GridColumn> 
            <GridColumn Field=@nameof(Order.Product) HeaderText="Product" Width="120"> 
                <Template> 
                    @((context as Order).Product) 
                </Template> 
            </GridColumn> 
            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" AutoFit="true"></GridColumn> 
            . ..  
        </GridColumns> 
    </SfGrid> 
</div> 


Please let us know if you have any concerns. 

Regards, 
Rahul 


SG Stanislav Gordenko November 9, 2021 08:23 AM UTC

Hi Rahul,

Of course I have tried to fix width of column already. But when I choose less columns and expand the width of browser screen, the grid looks ugly.

Please, ask the grid developer to update the grid to fulfil my request, as I wrote:

It is allowed to set MinWidth of column, but now it is used to mark limit of user changes of width only. Use this value to set minimum width of column when its content is wrapped. With this behavior, when MinWidth is set, for smaller screens such columns will not wrap to infinity, but will be limited. The whole grid will expand other view boundaries and will be scrolled.

Of course it should work with Templates.


RN Rahul Narayanasamy Syncfusion Team November 11, 2021 03:46 AM UTC

Hi Stanislav, 

Thanks for the update. 

We have validated your query and based on your case we suggest you to use the CustomAttributes property and apply the below style for the column to achieve your requirement. Based on your resolution, we suggest you to set the max-width and min-width in media query in site.css file. So based on the screen resolution, you can set the width to that particular column. Please refer and use as like the code below, 

[Index.razor] 
<div style="height:calc(100vh - 90px)"> 
    <SfGrid @ref="Grid" DataSource="@GridData" ShowColumnChooser="true" 
            AllowPaging="true" 
            . ..  > 
        . ..  
        <GridColumns> 
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" AutoFit="true"></GridColumn> 
            <GridColumn Field=@nameof(Order.Product) HeaderText="Product" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})"> 
                <Template> 
                    @((context as Order).Product) 
                </Template> 
            </GridColumn> 
            . ..  
        </GridColumns> 
    </SfGrid> 
</div> 
[site.css] 
@media screen and (max-width: 800px) { 
    .e-grid .e-attr { 
        width: 180px !important; 
    } 
} 
 
@media screen and (min-width: 800px) { 
    .e-grid .e-attr { 
        width: 280px !important; 
    } 
} 

Also, We would like to inform you that the MaxWidth and MinWidth of the GridColumn will be applied to that column while resizing the particular column. 


Please let us know if you have any concerns. 

Regards, 
Rahul 
 


SG Stanislav Gordenko November 11, 2021 10:38 AM UTC

Thank you very much for this offer. I will try it within few days, after rewrite all project to NET6.


RN Rahul Narayanasamy Syncfusion Team November 12, 2021 03:49 AM UTC

Hi Stanislav, 

Thanks for the update. 

We will wait to hear from you. Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon