The Adaptive UI functionality is not working on the grid.

[vipin]

I’m trying to implement the EnableAdaptiveUI option on the Syncfusion Grid. I’ve done the necessary configuration, but it’s not working as expected.

From my understanding, the `RowRenderingMode` (vertical/horizontal) should automatically adjust based on screen size—displaying the default layout on large screens and switching to vertical mode on smaller screens.

When I set `RowRenderingMode` programmatically, it works as expected. However, the sort and filter icons are not showing in vertical mode. I’m using version 20.3.0.61.

<SfGrid GridLines="GridLine.Both" DataSource="List" AllowTextWrap="true" EnableAltRow="true" AllowPaging="false" AllowResizing="true" AllowSorting="true" AllowFiltering="true" Width="100%" Height="100%" EnableAdaptiveUI="true" RowRenderingMode="@rowDirection">

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

    <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>

    <GridEvents Created="Created" TValue="Data.Models.CDS.AccountNumVal"></GridEvents>

    <GridColumns>

        <GridColumn Field=@nameof(AccountNumVal.ValId) HeaderText="Id" Width="auto"></GridColumn>

        <GridColumn Field="Utility.Name" HeaderText="Utility" Width="auto"></GridColumn>

        <GridColumn Field="Commodity.Name" HeaderText="Commodity" Width="auto"></GridColumn>

        <GridColumn Field=@nameof(AccountNumVal.LengthVal) HeaderText="Length" Width="auto"></GridColumn>

        <GridColumn Field=@nameof(AccountNumVal.PrefixVal) HeaderText="Prefix Val" Width="auto"></GridColumn>

        <GridColumn Field=@nameof(AccountNumVal.Prefix) HeaderText="Prefix" Width="auto"></GridColumn>

        <GridColumn Field=@nameof(AccountNumVal.InsertValue) HeaderText="Insert Value" Width="auto"></GridColumn>

        <GridColumn Field=@nameof(AccountNumVal.InsertPosition) HeaderText="Insert Position" Width="auto"></GridColumn>

        <GridColumn Width="auto" HeaderText="Edit/View">

            <Template>

                @{

                    var accountNumVal = (context as AccountNumVal);

                    <SfButton Type="button" IsPrimary="true" @onclick="() =>Edit(accountNumVal)"><i class="fa fa-pencil" aria-hidden="true"></i></SfButton>

                }

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>

  public async Task Created()

  {

      var mobile = await JsRuntime.InvokeAsync<bool>("isDevice");

      if (mobile)

      {

          rowDirection = RowDirection.Vertical;

      }

      else

      {

          rowDirection = RowDirection.Horizontal;

      }

  }

function isDevice() {

    return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i.test(navigator.userAgent);

}

[Prathap Senthil]

Hi Vipin,

Based on the reported problem, we are already aware of the issue and have included a fix for the problem 'Filtering and Sorting Icons not displaying in vertical grid mode when using a custom toolbar or undefined toolbar items.' This fix is part of our Volume 3 (27.1.48) release. Please upgrade to this version or the latest version of the Syncfusion NuGet package to resolve the reported issue.

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

Regards,
Prathap Senthil

[vipin]

I truly appreciate your response. The issue has been resolved in the latest version of Syncfusion, so we need to update our package. Currently, our license is based on version 20.3. If we proceed with the upgrade, we will need to generate a new license key for the latest version (27.1.48) . However, we are using the existing license in other projects, and we want to avoid any changes to those. Is it possible to generate a new license key for the updated version (27.1.48) without impacting the current license used in other projects?

[Prathap Senthil]

Yes, you can generate a new license key for the v27.1.* and register in your project. Also, ensure that you use all the Syncfusion packages in the same version v27.1.*. in your project.

Generating a new license key will not invalidate the existing version license keys that is being used in other projects. It will continue to function as usual.

Syncfusion license keys are major version and product-specific
and the generated license key is just a string that needs to be registered before any Syncfusion control is initiated. A single license key can be used on different servers, systems, or projects. You need to use the following code to register the license key manually. Please ensure that you have registered the license key in the entry point of your application.

Refer to this link for generating license key,

https://help.syncfusion.com/common/essential-studio/licensing/how-to-generate

Refer to this link for registering license key,
https://help.syncfusion.com/common/essential-studio/licensing/how-to-register-in-an-application

Refer to the below KB article to know which version license key should use in the application,
https://support.syncfusion.com/kb/article/7865/which-version-syncfusion-license-key-should-i-use-in-my-application