Unfreeze column when mobile view

[Pavel]

Hello, I have a grid that has the first 3 columns frozen left. However when in mobile view(width of 390px), the 3 columns take up all of the screen width and  I cannot scroll right to see other columns.  Is there a way to unfreeze the first 3 columns when the screen resolution is mobile view(width of 390px) so I can continue scrolling right to see other columns in the grid?  I attached the code below, the first 3 columns have 

IsFrozen="true" Freeze="FreezeDirection.Left" properties.

       <SfGrid ID="grid" @ref="_grid"  TValue="Model" DataSource="@Data" AllowPaging="true" Height="100%" AllowResizing="true" AllowReordering="true" AllowFiltering="true" AllowSorting="true" EnablePersistence="true" AllowSelection="true" ShowColumnChooser="true" ColumnMenuItems="@(new List<string> { "ColumnChooser", "Filter" })" Toolbar="@(new List<string>() { "ColumnChooser" })">
 <GridColumns>
    <GridColumn Type="ColumnType.CheckBox" Width="80" MinWidth="50" MaxWidth="80" IsFrozen="true" Freeze="FreezeDirection.Left"></GridColumn>
    <GridColumn Type="ColumnType.CheckBox" Width="80" MinWidth="50" MaxWidth="80" IsFrozen="true" Freeze="FreezeDirection.Left"></GridColumn>
    <GridColumn Type="ColumnType.CheckBox" Width="80" MinWidth="50" MaxWidth="80" IsFrozen="true" Freeze="FreezeDirection.Left"></GridColumn>
<GridColumn Type="ColumnType.CheckBox" Width="80" MinWidth="50" MaxWidth="80"></GridColumn>
<GridColumn Type="ColumnType.CheckBox" Width="80" MinWidth="50" MaxWidth="80"></GridColumn>
<GridColumn Type="ColumnType.CheckBox" Width="80" MinWidth="50" MaxWidth="80"></GridColumn>
<GridColumns>
</SfGrid>


[Sarveswaran Palani]

Hi Pavel,

Sorry for the Inconvenience.

We are currently Validating the reported query with high priority at our end, and we will update the further details within two business days. Until then we appreciate your patience.

Regards,

Sarveswaran PK

[Sarveswaran Palani]

Hi Pavel,

Thanks for your patience,

We have analyzed your query and suggest you to set width to the entire grid to overcome the issue. Please refer the attached code snippet and video demo for your reference.

<SfGrid DataSource="@Orders" Width="900" Height="364" AllowPaging="true"  EnableHover="false>

    <GridColumns>

        .

        .

        .

   </GridColumns>

</SfGrid>

Please get back to us if you have any other further queries.

Regards,

Sarveswaran PK

Attachment: Scrolling_unfrozen_columns_270784.zip

[Pavel]

I need the width to be 100% because users will be using desktop with multiple display sizes(ultrawide screens).

Can you provide an alternative solution that doesn't change the width ?

[Sarveswaran Palani]

Hi Pavel,

Sorry for the Inconvenience caused.

We are currently Validating the reported query with high priority at our end, and we will update the further details within tomorrow. Until then we appreciate your patience.

Regards,

Sarveswaran PK

[Sarveswaran Palani]

Hi Pavel,

Thanks for your patience.

We have analyzed your query and we would like to inform you that we have to scroll only the movable content, but frozen columns are not a movable content. So, we are unable to move the content because of the frozen column's width exceeds the screen's width. This is the issue you are facing. This was overcome by set width to the parent element and then specify the width as 100% to make the DataGrid element fill its parent container.

Finally, we can overcome this issue by setting frozen column width is minimum than screen width or render grid within parent element. Kindly refer the attached code snippet and documentation for your reference.

<div style=" width: 900px;">

    <SfGrid DataSource="@Orders" Width="100%" AllowPaging="true">

        <GridColumns>

            <GridColumn Field=@nameof(Order.OrderID) HeaderText="OrderID" IsFrozen="true"></GridColumn>

             .

             .

             .

        </GridColumns>

    </SfGrid>

</div>

Reference: https://blazor.syncfusion.com/documentation/datagrid/scrolling#responsive-with-parent-container

Regards,

Sarveswaran PK

[Pavel]

This solution doesn't work for me because like I mentioned the grid and the grid container needs to be 100% width instead of 900px. Responsive design on any screen size is important to me so I cannot put the width at 900px.

Is there a way to programmatically remove the freeze on the columns when at a small screen width?

[Sarveswaran Palani]

Hi Pavel,

Sorry for the Inconvenience caused.

We are currently Validating the reported query with high priority at our end, and we will update the further details within tomorrow. Until then we appreciate your patience.

Regards,

Sarveswaran PK

[Sarveswaran Palani]

Hi Pavel,

Sorry for the delay and Inconvenience caused.

We have analyzed your query and suggest you to overcome this issue by defining Media Queries in the HideAtMedia Column property to hide the column in specific screen width. Kindly refer the attached UG documentation for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#responsive-columns

Kindly get back to us if you have any further queries

Regards,

Sarveswaran PK

[Pavel]

Hello, I dont want to hide the column. I just want to unfreeze it, is that possible?

[Sarveswaran Palani]

Hi Pavel,

Based on your update, we suggest you to use the HideAtMedia column property to resolve the reported issue. When we set the HideAtMedia property value in the OrderID column to (min-width: 400px) and the IsFrozen property value to true. When the browser screen width is less than 400px, the OrderID column is hidden. To show the column when the browser screen width is less than or equal to 400px, we set the Hide property value to (max-width: 400px). So, we suggest you to configure separate column tag for both desktop and mobile view. Kindly refer the attached code snippet, documentation and sample for more understanding.

<GridColumn>

              // column hides when screen width is less than 400px(desktop view – frozen columns)

            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" HideAtMedia="(min-width: 400px)"  IsFrozen="true" Width="120"></GridColumn>

 

              // column shows when screen width is less than or equal to 400px(mobile view – unfrozen columns)

            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" HideAtMedia="(max-width: 400px)" Width="120"></GridColumn>

 

</GridColumn>

Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#responsive-columns

Kindly get back to us if you have any further queries

Regards,

Sarveswaran PK

Attachment: SfGridFrozenColumns_37828840.zip

[Pavel]

i attached a video of the unexplained behavior i am experiencing

Attachment: sf_55792cc5.zip

[Sarveswaran Palani]

Hi Pavel,

Thanks for contacting Syncfusion support again.

We have checked your shared video and found that you are using chrome extension for checking the responsive layout. We would like to inform you that the, you must need to refresh the page after switch to chrome mobile/responsive extension value, that’s only grid render based on the corresponding window width.

Property Name	Description
min-width	This property is used in column to render column, when minimum width of the screen is greater that the mentioned property value. For example, if the mid-width property value is set to 700px, the column is only rendered if the screen width size is greater than 700px.
max-width	This property is used to render column up to the mentioned value. For example, if the max-width value is set to 700px, the columns get render up to the screen width of 700px.

Kindly refer the attached video sample for more information.

Regards,

Sarveswaran PK

Attachment: SfGridUnfrozenColumns_3966098d.zip