AllowFiltering="false" still shows tooltip and filter box outline

[David Adler]

I am using SyncFusion.Blazor v18.1.0.45

I want to disable filtering for a column so I am using the AllowFiltering=false"" in the desired <GridColumn ... >. This displays a red circle with a line threw it when I hover over the header cell but it also displays the tooltip and since I do not have a HeaderText value, the tool tip says " 's filter bar cell". In addition, the cell also has the filter cell border.

I would expect that if you set AlllowFiltering="false" that it wouldn't  show the filter cell border and also that if you do not have a HeaderText value, the tool tip would not display.

Is there a relevant css class I can override with something like; ... 

border-width:0px;
border:none;

and a way to disable the tool tip?

[Rahul Narayanasamy]

Hi David, 

Greetings from Syncfusion. 

We have validated your query and you don’t want to show the filterbar and tooltip for the column while disabling particular column filtering. You can achieve your requirement by using FilterTemplate property. Find the below code snippets and sample for your reference. 

<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true"> 

    <GridPageSettings PageSize="5"></GridPageSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" AllowFiltering="false" Width="120"> 

            <FilterTemplate> 

                <div></div> 

            </FilterTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" AllowFiltering="false" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"> 

            <FilterTemplate> 

                <div></div> 

            </FilterTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-417641154  

Please get back to us if you need further assistance. 

Regards, 

Rahul 

[Jean-François Hermans]

Hi,

This logically doesn't work for GridCommandColumns.

Is there a solution ?

Regards.

 

[Naveen Palanivel]

Hi Jean,  

Sorry for the Inconvenience.

We are currently Validating  the reported query at our end and we will update the further details shortly. Until then we appreciate your patience.

Regards,

Naveen Palanivel

[Vignesh Natarajan]

Hi Jean,

Thanks for your patience.

We have achieved your requirement of hiding the filter bar to GridCommandColumns using JSInterop and the DataBound event of Grid. In the DataBound event of the Grid, we have found the Uid of the Command Column and sent it to the JavaScript method using JSInterop and on the JavaScript side, we have hidden that particular filter bar.

Refer to the below code example.

<SfGrid @ref="GridInstance" DataSource="@Orders" AllowFiltering="true" AllowPaging="true">

    <GridEvents DataBound="DataBoundHandler" TValue="Order"></GridEvents>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn HeaderText="Manage Records" Width="150">

            <GridCommandColumns>

                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn>

            </GridCommandColumns>

        </GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

 

    </GridColumns>

</SfGrid>

 

@code {

    SfGrid<Order> GridInstance { get; set; }

    public List<Order> Orders { get; set; }

    public async Task DataBoundHandler()

    {

        var cols = GridInstance.Columns;

        var t = cols.Where(x => x.HeaderText == "Manage Records").FirstOrDefault();

        await Runtime.InvokeVoidAsync("RemoveFilterBar", t.Uid);

    }

 

 

function RemoveFilterBar(val) {

    var filter = document.getElementsByClassName("e-filterbar")[0].querySelectorAll('[e-mappinguid="' + val + '"]');

    filter[0].style.visibility = "hidden";

}

Refer to the sample in the attachments for your reference. Refer to our UG documentation for your reference

https://blazor.syncfusion.com/documentation/datagrid/events#databound

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

Attachment: BlazorGrid_847e08aa.zip

[Jean-François Hermans]

Thanks for your solution,

Very heavy solution, I hope you will put a class that would allow us to distinguish the GridCommandColumns

<div class="e-filterdiv e-fltrinputdiv">
=> <div class="e-filterdiv e-fltrcommanddiv">

[Naveen Palanivel]

Hi Jean,

Thanks for the update

We will get back to you once the requested improvement is implemented at our end.

Untill then we request you to achieve the requirement using the solution provided in precious update

Regards,

Naveen Palanivel