1. Home
  2. Forum
  3. Blazor
  4. sfgrid filters not visible in adapative ui in small devices, but all filters visible in fullscreen

sfgrid filters not visible in adapative ui in small devices, but all filters visible in fullscreen

filters not visisble in small devices, intially it was working fine , but later its not working

<SfGrid @ref="Grid" DataSource="@filteredResults" AllowSorting="true" AllowFiltering="true" AllowMultiSorting="true" EnableAdaptiveUI="true" RowRenderingMode="@renderingMode" Height="100%" Width="100%" AllowTextWrap="true" GridLines="GridLine.Default" EnableVirtualization="true">

    <GridTextWrapSettings WrapMode=WrapMode.Content></GridTextWrapSettings>

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

    <GridTemplates>

        <ToolbarTemplate>

            <Syncfusion.Blazor.Navigations.SfToolbar>

                <Syncfusion.Blazor.Navigations.ToolbarItems>

                    <Syncfusion.Blazor.Navigations.ToolbarItem Type="@Syncfusion.Blazor.Navigations.ItemType.Input">

                        <Template>

                            <input type="checkbox" id="toggleFeature" @bind="showAlternatives" />

                            <label for="toggleFeature"> Show Alternatives</label>


                        </Template>

                    </Syncfusion.Blazor.Navigations.ToolbarItem>

                </Syncfusion.Blazor.Navigations.ToolbarItems>

            </Syncfusion.Blazor.Navigations.SfToolbar>

        </ToolbarTemplate>

    </GridTemplates>

    <GridColumns>

        <GridColumn Field=@nameof(kunjamma.carName) HeaderText="Name" IsPrimaryKey="true" Width="150"></GridColumn>

        <GridColumn Field=@nameof(kunjamma.TierLevel) HeaderText="Tier" Width="80"></GridColumn>

        <GridColumn Field=@nameof(kunjamma.BrandStatus) HeaderText="type" Width="80">

            <Template>

                @{

                    var car = (kunjamma)context;

                    var badgeColor = car.BrandStatus == "branded" ? "#69d788" : "lightcoral"; // lightcoral is a light red color

                    <div style="width: 50%;padding: 5px; background-color:@badgeColor; color:white; border-radius: 12px; text-align: center;">

                        @car.BrandStatus

                    </div>

                }

            </Template>

        </GridColumn>

        <GridColumn Field=@nameof(kunjamma.CombinedSymptoms) HeaderText="Condition" Width="130"></GridColumn>

        <GridColumn Field=@nameof(kunjamma.Requirements) HeaderText="Requirements" Width="130"></GridColumn>

        <GridColumn HeaderText="LowCostAlternative" Width="70">

            <Template>

                @* Use @context to refer to the current row's data *@

                @{

                    var item = (kunjamma)context;

                    var link = item.LowCostAlternative(carSearchService.getGoodRxUrl()); // Example URL

                }

                <a rel='nofollow' href="@link" target="_blank">Low cost alternatives</a>

            </Template>

        </GridColumn>

    </GridColumns>

    <GridSortSettings>

        <GridSortColumns>

            <GridSortColumn Field="TierLevel" Direction="SortDirection.Ascending"></GridSortColumn>

        </GridSortColumns>

    </GridSortSettings>

</SfGrid>


Thanks for the support


7 Replies
PS Prathap Senthil Syncfusion Team August 15, 2024 12:14 PM UTC

Hi Jose KJ,

We are unable to reproduce the reported issue when attempting to reproduce the issue. For your reference, we have attached a screen recording and a simple sample. So, to further proceed with the reporting problem, we require some additional clarification from your end. Please share the below details to proceed further at our end.

  • Could you please share which NuGet version you are using and provide your browser details?
  • To analyze the reported issue, could you please share a simple and reproducible sample that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution.
  • Kindly share your attempt to replicate the issue using the attached simple sample.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.


Sample: https://blazorplayground.syncfusion.com/embed/LDVpDvsoqLvoInbp?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5


Regards,
Prathap Senthil


JK jose KJ August 16, 2024 07:15 AM UTC

Thanks for the answer, i have gone through it
when i set in the code u shared

RowRenderingMode = Syncfusion.Blazor.Grids.RowDirection.Vertical, it aligns correctly but filters are not visible at top

PS Prathap Senthil Syncfusion Team August 19, 2024 04:01 AM UTC

Based on the reported problem, we would like to clarify that when using Vertical mode, the filtering and sorting options will appear on the grid toolbar This is the default behavior. However, we have encountered an issue when the grid toolbar is not defined and a custom toolbar is used. So, we have confirmed this as an issue and logged a defect report titled ‘Filtering and Sorting Icons not displaying in vertical grid mode when using custom toolbar or undefined toolbar items.’  This fix will be included in our weekly patch release, which is expected to be rolled out on September 27th, 2024.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    
  

Bug 903005: Filtering and Sorting Icons not displaying in vertical grid mode when using custom toolbar or undefined toolbar items - Boards (azure.com)

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization”

We will get back to you once the release is rolled out. Until then we appreciate your patience.

In the meantime, we suggest using the workaround solution below to avoid the issue. Kindly refer to the code snippet and sample provided for your reference.

<SfGrid DataSource="@filteredResults" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowMultiSorting="true" EnableAdaptiveUI="true" Height="600" Width="100%" RowRenderingMode=" Syncfusion.Blazor.Grids.RowDirection.Vertical" AllowTextWrap="true" GridLines="Syncfusion.Blazor.Grids.GridLine.Default" EnableVirtualization="true"  Toolbar=@Toolbaritems>

 

    <GridTextWrapSettings WrapMode=Syncfusion.Blazor.Grids.WrapMode.Content></GridTextWrapSettings>

 

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

 

    <GridColumns>

 

---------------

</SfGrid>

 

<style>

 

    #Grid_add {

 

        display:none;

    }

</style>

@code

{

 

 

    public List<CarDetails> filteredResults { get; set; } = new List<CarDetails>();

    private List<Object> Toolbaritems { get; set; } = new List<Object>() { "Add" };

 

   

 

    protected override async Task OnInitializedAsync()

    {

 

        Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Type = Syncfusion.Blazor.Navigations.ItemType.Input, Template = title, Id = "toggleFeature" });

 

-------------

        await base.OnInitializedAsync();

    }

 

    public RenderFragment title

    {

        get

        {

            return@<div>

        <input type="checkbox" id="toggleFeature" @bind="showAlternatives" />

 

        <label for="toggleFeature"> Show Alternatives</label>

 

    </div>;

        }

    }

 

}


Sample: https://blazorplayground.syncfusion.com/embed/hjVfXbMdpOdxPUxq?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5


JK jose KJ August 19, 2024 06:23 AM UTC

thanks for the answer, add button is not getting hidden, its visible in both mobile, Fullscreen, added the css provided

when add button is added filters are appearing if i remove add button

[private List<Object> Toolbaritems { get; set; } = new List<Object>()] 


then filters becomes invisible

style need to be like

::deep .e-toolbar-item:has(.e-add) {

    padding-left: 10px;

    display: none;

} this style hid the add button

thanks


PS Prathap Senthil Syncfusion Team September 4, 2024 04:58 AM UTC

Sorry for the inconvenience. We will include the fix in the upcoming release, scheduled for on or before September 10th, 2024. Until then, we appreciate your patience.


For your reference, please see the feedback link below:Filtering& Sorting Icons not displaying in vertical grid mode when using custom toolbar/undefined toolbar item in Blazor | Feedback Portal (syncfusion.com)


PS Prathap Senthil Syncfusion Team September 11, 2024 04:47 PM UTC

We sincerely apologize for any inconvenience and delay you may have experienced.

We were unable to include this fix in yesterday's patch release. However, we want to assure you that the fix will be included in our upcoming volume 3 release, scheduled for on or before September 18th, 2024. Thank you for your understanding. Until then, we appreciate your patience


PS Prathap Senthil Syncfusion Team September 19, 2024 10:31 AM UTC

Thanks for the patience,

We are glad to announce that, we have included the fix for the issue “Filtering and Sorting Icons not displaying in vertical grid mode when using custom toolbar or undefined toolbar items.’” in our Volume 3 (27.1.48) release.  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the NuGet package for latest fixes and features from below.


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


RootCause: Incase of adaptive layout with vertical row direction, we missed to create sort and filter icon elements incase of custom tool bar and without toolbar.

Corrective Actions Taken:  The sort and filter icon elements are created with custom toolbar and without gridtool bar based on filtering and sorting are enabled with vertical toolbar.

We thank you for your support and appreciate your patience in waiting for this release.


Additionally, we would like to clarify that in your initial update, you used the ToolbarTemplate to render the customer toolbar. When using the ToolbarTemplate, only the items rendered within it will be displayed in the grid toolbar. Therefore, you will need to handle sorting and filtering operations on your end as we currently do not support displaying sorting and filtering dialogs when clicking icons to open external methods

However, we plan to include support for external methods to open sorting and filtering dialogs in one of our upcoming release. Instead of using ToolbarTemplate, we suggest using the Toolbar list to add custom toolbar items to meet your requirements. Please refer to the attached sample and code snippet  for your reference. Thanks for your understanding.

<SfGrid DataSource="@filteredResults" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowMultiSorting="true" EnableAdaptiveUI="true" Height="600" Width="100%" RowRenderingMode=" Syncfusion.Blazor.Grids.RowDirection.Vertical" AllowTextWrap="true" GridLines="Syncfusion.Blazor.Grids.GridLine.Default" EnableVirtualization="true"  Toolbar=@Toolbaritems>

@code
{
private List<Object> Toolbaritems { get; set; } = new List<Object>() ;

protected override async Task OnInitializedAsync()

{

     Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Type = Syncfusion.Blazor.Navigations.ItemType.Input, Template = title, Id = "toggleFeature" });

     await base.OnInitializedAsync();

}

 

public RenderFragment title

{

     get

     {

         return@<div>

     <input type="checkbox" id="toggleFeature" @bind="showAlternatives" />

 

     <label for="toggleFeature"> Show Alternatives</label>

 

</div>;

     }

}

 


Sample: https://blazorplayground.syncfusion.com/embed/rZVTjuWYrEIaJOvl?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5


Loader.
Up arrow icon