How can I customize GridFilterSettings appearance

[Ben]

Hi,

On the right is a standard Checkbox filter settings and on the left is where I'm trying to get to. The controls seem quite universal, so if I get a box round the search field it negatively impacts other search fields. If I choose Excel the labels are 'OK' and 'Cancel' but for Checkbox they are 'Filter' and 'Clear'.

Is there a way that this appearance can be edited while keeping it isolated?

Thanks

Ben

[Vignesh Natarajan]

Hi Ben,  

 

Thanks for contacting Syncfusion support.  

 

Query: “How can I customize GridFilterSettings appearance” && “Is there a way that this appearance can be edited while keeping it isolated?” 

 

We have analyzed your query and we suspect that you want to customize the checkbox filter as per your requirement. We also understand that Excel Filter matches your requirement with slight modification. so we have modifed the appearance of the excel filter by applying the CSS styles to excel filter. Refer the below code example for your reference 

 

@using Syncfusion.Blazor.Grids 

  

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

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

    <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 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> 

<style> 

    .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu { 

        display: none; 

    } 

</style> 

 

 

Refer the below screenshot as output of above code example.  

 

 

 

For your convenience we have prepared a sample which can be downloaded from below 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165011/ze/DataGrid_Server137951905  

 

Please get back to us if you have further queries if above solution does not resolve your query or if we misunderstood your query. Do you want to customize the excel filter for particular column alone?.  

 

Regards, 

Vignesh Natarajan 

[Ben]

Hi Vignesh,

thanks very much for this, it was extremely helpful.

Cheers,

Ben

[Vignesh Natarajan]

Hi Ben,  

Thanks for the update.  

We are glad to hear that you have achieved your requirement using our solution.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan 

[Ben]

Hi Vignesh,

I'm wondering if it's possible to hide the search filter on specific columns only - on certain columns, particularly bool, if I type anything into the search field I get this type of error

[2021-06-17T06:43:32.878Z] Error: System.FormatException: String 'f' was not recognized as a valid Boolean.

   at System.Boolean.Parse(ReadOnlySpan`1 value)

   at System.Boolean.Parse(String value)

   at System.String.System.IConvertible.ToBoolean(IFormatProvider provider)

   at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)

   at Syncfusion.Blazor.Internal.SfBaseUtils.ChangeType(Object dataValue, Type conversionType, Boolean isClientChange)

   at Syncfusion.Blazor.Grids.Internal.FilterCheckBoxRenderer`1.GetActualValue(Object value)

   at Syncfusion.Blazor.Grids.Internal.FilterCheckBoxRenderer`1.InputArgs(ChangeEventArgs args)

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

by editing the css you provided as below

.sf-grid .e-excelfilter .e-input-group.e-control-wrapper {

    display: none;

}

I can hide the search box globally - this is what I'm after as an example - but have not found a way to do this for an individual column

Thanks

Ben

[Vignesh Natarajan]

Hi Ben, 

 

Thanks for the update. 

 

Query: “I can hide the search box globally - this is what I'm after as an example - but have not found a way to do this for an individual column” 

 

We have analyzed your query and we suggest you to hide the search text box for that particular column using the below solution. OnActionBegin event will be triggered when certain action is initiated. So while opening the Filter dialog, OnActionBegin will be triggered with RequestType FilterBeforeOpen. Here we can to add custom style to document to hide the search textbox for that particular column. 

 

Refer the below code example 

 

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

    <GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents> 

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

    <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 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> 

<style> 

    .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu { 

        display: none; 

    } 

</style> 

  

@if (CanAdd) 

{ 

    <style> 

        .e-excelfilter .e-dlg-content .e-searchcontainer .e-searchbox { 

            display: none; 

        } 

    </style> 

} 

  

  

@code{ 

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

    public bool CanAdd { get; set; } 

  

    public void OnActionBegin(ActionEventArgs<Order> Args) 

    { 

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterBeforeOpen) 

        { 

            if (Args.ColumnName == "CustomerID") 

            { 

                CanAdd = true; 

            } 

            else 

            { 

                CanAdd = false; 

            } 

        } 

    } 

 

 

For your convenience we have prepared a sample using above code example which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/165011/ze/DataGrid_Server-689991149.zip  

 

Refer our UG documentation for your reference  

 

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

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan