EnableAdaptiveUI issues

[Eimantas Baigys]

Hello, I am experiencing issues with grid EnableAdaptiveUI 

1. If I set this value to true and do not include RowRenderingMode="RowDirection.Vertical" ​it seems that that responsiveness does not work at all. Two images for this one: first image is grid with 7 columns without rowrendering mode parameter, second image is with value set to vertical

In addition to that, in the second image you can see that there are sort and filter buttuns which are not visible or accessible in the first image. What is up with that? Note that seach function works on both images.

2. If I set AllowFiltering=false and/or AllowSorting=false ​icons from second image do not dissapear.

3. If I click on filter or sort icon in the second image nothing happens. 

I am using this code:

<SfGrid ID="WorkOrders" EnableAltRow=true DataSource=workOrders EnableAdaptiveUI=true RowRenderingMode="RowDirection.Vertical" Width="99%" Toolbar="@(new List<string>() { "Search" })">

            <GridPageSettings PageSize=12 PageSizes="true" />

            <GridColumns>

                <GridColumn Field="Code" HeaderText="Order Id" Width="130px" />

                <GridColumn Field="UnitChainName" HeaderText="Customer" Width="150px" />

                <GridColumn Field="UnitDetails" HeaderText="Unit" />

                <GridColumn Field="WorkTypeName" HeaderText="Equipment Type" />

                <GridColumn Field="StateName" HeaderText="Status" />

                <GridColumn Field="ContractorReference" HeaderText="Reference" />

                <GridColumn Field="DueDate" HeaderText="Due Date" Format="@DateFormat.ShortDate" Width="120px" />

            </GridColumns>

        </SfGrid>

[Renjith Singh Rajendran]

Hi Eimantas,

Greetings from Syncfusion support.

We would like to inform you that, we have two modes of rendering Adaptive layout in grid. By default Horizontal mode is applied for Adaptive layout, if you need to render row vertically then you need to apply RowRenderingMode mode as Vertical. Please refer the below documentation for more details.

https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout

https://blazor.syncfusion.com/demos/datagrid/adaptive-rendering?theme=bootstrap5

Query : second image you can see that there are sort and filter buttuns which are not visible or accessible in the first image.

If you enable AllowFiltering/AllowSorting in grid with RowRenderingMode mode as Horizontal then Grid won’t display any icons for sort/filter in toolbar(like Vertical mode). If you enable GridFilterSettings as like in our below documentation then only a filter icon will be displayed beside the header of each column. We suggest you to refer the codes and resultant grid gif image from the below documentation for more details,

https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout#render-adaptive-dialog

Filtering feature reference :

https://blazor.syncfusion.com/documentation/datagrid/filtering

https://blazor.syncfusion.com/demos/datagrid/filtering?theme=bootstrap5

Query : 2. If I set AllowFiltering=false and/or AllowSorting=false ​icons from second image do not dissapear. If I click on filter or sort icon in the second image nothing happens.

We are checking this reported query from our side. We will update you further details within two business days. Until then we appreciate your patience.

Regards,

Renjith R

[Renjith Singh Rajendran]

Hi Eimantas,

Query 1 : If I set AllowFiltering=false and/or AllowSorting=false ​icons from second image do not dissapear.

We have resolved the reported problem in our latest nuget version releases(20.1.0.47). So kindly upgrade to our latest version(20.1.0.47) to overcome this reported scenario.

https://www.nuget.org/packages/Syncfusion.Blazor.Grid

Query 2 : If I click on filter or sort icon in the second image nothing happens.

By default when rendering Grid in vertical mode only the Excel, Checkbox and Menu modes of filtering will be supported in Grid. So we suggest you to ensure to add the below code(GridFilterSettings) in your application to overcome the reported behavior.

 

<GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>

 

Reference :

https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout#vertical-mode

https://blazor.syncfusion.com/demos/datagrid/filter-menu?theme=fluent

Please get back to us if you need further assistance.

Regards,

Renjith R

[Eimantas Baigys]

Hello, I found anouther strange behaviour with Grid which has EnableAdaptiveUI=true RowRenderingMode="RowDirection.Vertical" ​on SfDialog

this is the code:

<SfDialog @ref="SfDialog" @bind-Visible="Visible" IsModal="true" Width="1000px" AllowDragging="true" ShowCloseIcon="true">

    @if (Model != null)

    {

        <DialogPositionData X="center" Y="center"></DialogPositionData>

        <DialogTemplates>

            <Content>

                <SfGrid ID="AllocatingWorkOrders" EnableAdaptiveUI=true RowRenderingMode="RowDirection.Vertical" DataSource=Model>

                    <GridColumns>

                        <GridColumn Field="Code" HeaderText="Order Id" Width="150px" />

                        <GridColumn Field="UnitDetails" HeaderText="Unit" />

                        <GridColumn Field="ContractorReference" HeaderText="Reference" />

                        <GridColumn Field="DueDate" HeaderText="Due Date" Format="@DateFormat.ShortDate" Width="100px" />

                    </GridColumns>

                </SfGrid>

            </Content>

        </DialogTemplates>

    }

</SfDialog>

and this is what I get:

[Renjith Singh Rajendran]

Hi Eimantas,

We suggest you to ensure to provide proper styles for parent div element as like we have provided in the below documentation to overcome the reported scenario.

https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout#vertical-mode

We have also attached a sample prepared using your shared codes for your reference. Please get back to us if you need further assistance.

Regards,

Renjith R

Attachment: ServerApp_12364c85.zip

[Eimantas Baigys]

Hello, I have modified your solution so you can see the problem. This is what I get when I try to open dialog on mobile. I am using latest chrome version

Attachment: ServerApp_415b4e47.zip

[Renjith Singh Rajendran]

Hi Eimantas,

By default, Grid will be rendered/adjusted based on its parent container Width and Height. So Grid will be contained inside the enclosing parent container. From your shared screenshot we could see that, Grid renders fine inside the enclosing dialog parent container. We suggest you to refer to the below documentation for more details on the responsive behavior of Grid.

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

You can provide proper Height/Width for the SfDialog to show Grid inside SfDialog.

https://blazor.syncfusion.com/demos/datagrid/adaptive-rendering?theme=fluent

Please refer the above documentations and check this from your side. And if you are still facing difficulties then the following details would be helpful for us to proceed further.

1. Share with us a pictorial representation showing your exact requirement of rendering grid inside dialog.
2. Share a detailed explanation of your exact or complete requirement or the problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible.

Regards,

Renjith R

[Eimantas Baigys]

Thank you for you time

[Renjith Singh Rajendran]

Hi Eimantas,

Thanks for your update. Please get back to us if you need further assistance.

Regards,

Renjith R