Remove Searchbox in Excel Filter

[Mike-E]

We are experiencing errors when the user searches on an enum field:

How do we hide this?

Thank you for any assistance you can provide,

Michael

[Balamurugan Lakshmanan]

Hi Michael,

Greeting from Syncfusion Support.

From your query , we understood that you need to remove the Search Box in Excel Filter. We made a solution file based on your requirement. Kindly refer the attached code snippet and solution file for your reference.

<style>

 

    .sf-grid .e-excelfilter .e-searchbox

    {

        display:none;

    }

 

</style>

Kindly get back to us if you have further queries.

Regards,

Bala.

Attachment: BlazorApp1_c33900f7.zip

[Mike-E]

Thank you for the reply Bala.  That is a good suggestion.  However, we want to apply this to a particular column and not all of them.  Is there a way to do this?

[Balamurugan Lakshmanan]

Hi Mike,

From your query, we understood that you need to remove the Searchbox  to a particular column and not  for all of them. To achieve this ,we suggest you  to use the OnActionBegin event will be triggered with the RequestType argument as FilterBeforeOpen. At that point, based on the boolean value, we can customize it based on our requirement  using the CSS style. Kindly refer the below code snippet, attached solution file and UG documentation for your  reference.

@if (IsLarge)

{

    <style>

        .e-excelfilter .e-searchbox {

            display: none;

        }

    </style>

}

@code {

 

  public void OnActionBegin(ActionEventArgs<Order> Args)

    {

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

        {

            if (Args.ColumnName == "CustomerID")

            {

                IsLarge = true;               

            }

        }

    }

 

}

Kindly get back to us if you have further queries.

Regards,

Bala.

Attachment: BlazorApp1_e89e8a4b.zip

[Mike-E]

Thank you for the recommendation Bala, but I do not think that solves the problem.  It would take one column to trigger this and it would hide the search box for all filters going forward, correct?  Additionally, it would be tricky to do a specific search on a column name as prescribed.  What would be ideal is to have a general rule and/or property that says "only show search box when this type is not of enum."

Thank you for any further consideration/assistance you can provide.

[Balamurugan Lakshmanan]

Hi Mike,

From your query, we understood that you need to remove the Searchbox  to a particular column and not  for all of them. To achieve this ,we suggest you  to use the OnActionBegin event will be triggered with the RequestType argument as FilterBeforeOpen. At that point, based on the boolean value, we can customize it based on our requirement  using the CSS style. Kindly refer the below code snippet  for your  reference.

@if (IsLarge)

{

    <style>

        .e-excelfilter .e-searchbox {

            display: none;

        }

    </style>

}

@if (!IsLarge)

{

    <style>

        .e-excelfilter .e-searchbox {

            display:revert;

        }

    </style>

}

@code {

 

 public void OnActionBegin(ActionEventArgs<Order> Args)

    {

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

        {

            if (Args.ColumnName == "CustomerID")

            {

                IsLarge = true;           

            }

            if (Args.ColumnName != "CustomerID")

            {

                IsLarge = false;              

            }

        }

     

    }

 

}

Kindly get back to us if you have further queries.

Regards,

Bala.

[Mike-E]

Thank you for your reply, Bala.  Is there no way to tag the column header with a CssClass?  That would also allow us to easily address this issue without any code/event handlers.

Thank you for any continued assistance you can provide.  Your support team is really great and does a wonderful job. 👍

[Balamurugan Lakshmanan]

Hi Mike,

Could you please confirm that you are asking to add a Cssclass to the each column header in Syncfusion Blazor grid to change their style respectively. If not kindly explain your query elaborately for further validations.

Regards,

Bala.

[Mike-E]

Hi Bala, that is exactly what I would anticipate here.  Each column should have a tagged CssClass that I can easily apply and dive into the controls in this way.  That way for enum-based columns I could hide the interface that is causing an error in my application.

Thank you very much for your consideration and all your excellent support. 👍🙏

[Balamurugan Lakshmanan]

Hi Mike,

You can customize the DataGrid cells by adding a CSS class to the CustomAttributes property of the column. But it is not possible to hide the search box in the filter panel by using CSS Class.

https://blazor.syncfusion.com/documentation/datagrid/cell#custom-attributes

Kindly get back to us if you have further queries.

Regards,

Bala. 

[Mike-E]

Thank you for the confirmation, Bala.  The request here is to add a new property on the SfGrid column `CssClassTag` that will allow us to place a CSS tag on the column so that we can drill down on it and hide interface components as necessary on a CSS-strictly basis without the use of code/events.  Does that make sense?  Please let me know if you have any questions about this.

[babar ali]

I appreciate you making the suggestion, but I don't believe it will make the situation better. The search box for all future filters would be hidden once just one column caused this, am I correct? Also, performing a precise search on a column name as instructed would be challenging. A generic rule or attribute that states "only show search box when this type is not of enum" would be good.

[Mike-E]

Hi @babar your understanding of what I have in mind is incorrect.  I am asking for a way to tag a column header with a Css class name, much like the CssClass property currently works for SfGrid.  It would take the provided string and adds it to the column header container class attribute and that is all it does, much like how the SfGrid takes the CssClass property and adds the provided string to the emitted class attribute of the rendered HTML.

Once the CSS class is emitted we can do with the header as we please, much like the same with SfGrid's CssClass property.

So something like:

<SfGrid ...>

<Columns>

  <GridColumn Field="Name" />

  <GridColumn Field="MyEnumField" HeaderCssClass="enum-header" />

</Columns>

</SfGrid>

Notice how the HeaderCssClass is only assigned to MyEnumField and does not impact other columns.  Now I can do something like the following in my CSS:

.e-grid .e-control .enum-header .path-to-textbox { display: none }

Make sense?

[Mike-E]

I wanted to check in and see if my explanation helped clarify the request here.  To be honest, it is surprising that `CssClass` and `HeaderCssClass` are not already properties of the `GridColumn` component. 🤔

[Balamurugan Lakshmanan]

Hi Mike,

We apologize for any inconvenience caused by our current architecture of grid. Unfortunately, based on our current architecture of grid, it is not possible to meet your requirement.

We would like to explain you that, the header content of our grid only contains the table, th elements, and icons. Clicking on the icons in the header content will open an external panel based on the position of that icon, which is placed on that header content, i.e., the Filter panel. Unfortunately, it is not possible to traverse from the header content to the filter panel as per your requirement.

Please get back to us if you have further queries.

Regards,

Bala.

[Mike-E]

Thank you for your continued dialogue, Bala.  It is appreciated.

I did take a look at your generated HTML and I see what you mean.  The Filter Dialog is not contained in the <th></th> tags which is what I believe you are describing.

Instead, what I would recommend is doing something like this:

<SfGrid ...>

<Columns>

  <GridColumn Field="Name" />

  <GridColumn Field="MyEnumField" FilterCssClass="enum-filter" />

</Columns>

</SfGrid>

Then it would add this to the filter's `class` attribute when it is added/displayed to the page:

Would something like this be possible?  Or do I have something misunderstood here?

Thank you for any continued consideration/discussion.

[Vignesh Natarajan]

Hi Mike-E,

We understand your explanation. But we would like to inform you that we have implemented the excel and checkbox filter type based on Microsoft excel filter. Also, the filter dialog is rendered outside the grid content and header. So, adding a specific class by traversing from column is currently not possible. Since it is unique requirement, we are able to consider and implement this requirement at our source level. So, we request you to achieve this requirement using the solution provided in the below update.

https://www.syncfusion.com/forums/180744/remove-searchbox-in-excel-filter?reply=SFa5xg

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

[Mike-E]

Thank you for your continued dialogue, @Vignesh.

To start, please be aware that this same problem also occurs with FilterType.Checkbox in addition to the Excel filter:

Typing in this text box also produces an error in my query.  It would seem that at the very least for both Checkbox and Excel filter types, there should be an easy way to configure this text box to display or not. 

>  Since it is unique requirement, we are able to consider and implement this requirement at our source level.

Thank you.  This is the request that I am making here. 🙏

> So, we request you to achieve this requirement using the solution provided in the below update.

I will further investigate this, but, of course, it is preferred to have a simple CSS rule applied to an element as opposed to introducing new element(s) into the DOM whenever a grid event fires.  Thank you for any further consideration.

[Balamurugan Lakshmanan]

Hi Mike ,

Thank you for your patience.

From your query, we understood that you are facing an issue with "Typing in this text box also produces an error in my query.  It would seem that at the very least for both Checkbox and Excel filter types, there should be an easy way to configure this text box to display or not." Kindly  share the below requested details for further validation at our end:

1.Explain what kind of issue you are facing elaborately .

2.If possible, Kindly share us the issue reproduceable video demo.

The above requested details are helpful for further validation at our end.

Regards,

Bala.

[Mike-E]

Hi Bala, thank you for your reply.  

The problem is that the column that I am typing in here is an enum that is not defined in the database:

When I type, the search is done on the enum which does not exist, leading to errors.  As the checkboxes are bound to the numerical values (byte), they work as expected.  However, typing leads to exceptions which I am trying to avoid.

Having a CSS style that is applied to the column header would be greatl

Thank you for any further consideration,

Michael

[Sajjad Ali]

Although I appreciate your suggestion, I don't think it will improve the circumstance. Am I correct in thinking that once only one column triggered this, the search box for all subsequent filters would be hidden? Also, it would be difficult to conduct a specific search on a column name as instructed. It would be beneficial to have a general rule or attribute that states, "only show search box when this type is not of enum."

[Mike-E]

>  . Am I correct in thinking that once only one column triggered this, the search box for all subsequent filters would be hidden?

Thank you for your reply @Sajjad.  It does sound like I am not doing a good enough job explaining the request here, which is super duper simple.  Specifically, the ask here is to allow an HTML `class` attribute to propagate to the filter div element that displays the column filter.  It only affects the column it is applied to and no other columns.

>  Also, it would be difficult to conduct a specific search on a column name as instructed

It is in fact very easy and straightforward to do via CSS, and I have explained how this would be implemented here:

https://www.syncfusion.com/forums/180744/remove-searchbox-in-excel-filter?reply=SFpJk2

>  It would be beneficial to have a general rule or attribute that states, "only show search box when this type is not of enum."

I would actually appreciate this as well, but I am thinking the CSS route is more beneficial because it gives developers full control over their filter interfaces without having to resort to any server-side code/configuration (I use Blazor Server-side FWIW).

I appreciate any further dialogue toward determining the best approach here.

[Balamurugan Lakshmanan]

Hi Mike,

We could not be able to reproduce the reported issue at our end while preparing a sample as per your suggestion. We have attached the sample file and video demo. Kindly refer the attachment for your reference. If the issue still persists, Kindly modify the attached sample as per your suggestion.

If possible , Kindly share us the issue reproducible video demo for further validation at our end.

Please get back to us if you have further queries.

Regards,

Bala.

Attachment: BlazorApp3_93430ae5.zip

[Mike-E]

Thank you for your continued dialogue and collaboration, Bala.  Please be aware that this does not occur with a local list as you are creating in your demo, but during an EntityFramework Core query evaluation after applying the filter on an enum column.  If you are able to provide a demonstration of working without failure I would greatly appreciate it. :)

[babar ali]

It won't, in my opinion, make things better. Am I right in assuming that the search box for all future filters would be disabled once only one column triggered this? Also, it would be challenging to carry out the required particular search on a column name. A generic rule or attribute that specifies "only show search box when this type is not of enum" would be helpful.

[Mike-E]

>  It won't, in my opinion, make things better

This may be your opinion, but currently, I have exceptions being thrown in my production environment due to this issue, so anything better than this would be better for me. :)

>  Am I right in assuming that the search box for all future filters would be disabled once only one column triggered this?

I have answered this question which appears to have been copy/pasted 3 times now. 🤔

[Mike-E]

Hi Bala, I wanted to check in on this issue.  Were you able to use EntityFramework Core successfully with the query generated by your filter?  I am still experiencing errors in production so I hope you can understand my persistence.  Thank you for any update you can provide.

[Balamurugan Lakshmanan]

Hi Mike,

Thank you for your patience.

Before proceeding further with your requirement, we need some more clarifications from your end. Kindly explain what kind of issue you are facing with entity framework. Please share us the stack trace  or issue reproducible sample for further validation at our end.

Please get back to us if you have further queries.

Regards,

Bala.

[Mike-E]

Thank you for your continued dialogue and investigation Bala. When typing a query in the Excel Filter that is bound to an enum column via a EntityFramework Query, I get the following type of exception thrown:

```System.InvalidOperationException: The LINQ expression 'DbSet()

// omitted for brevity

.Where(e => e.Inner.Id == m.Outer.Outer.Id)

.Any() ? Available : DbSet()

.Where(t => EF.Property(m.Outer.Outer, "Id") != null && object.Equals(

objA: (object)EF.Property(m.Outer.Outer, "Id"),

objB: (object)EF.Property(t, "LicenseId")))

.OrderByDescending(t => t.Sequence)

.FirstOrDefault() == null ? m.Outer.Inner.Listed ? m.Outer.Inner.Allowed && m.Outer.Inner.Active ? Available : Unavailable : Delisted : Sold.ToString().ToLower().Contains("a"))' could not be translated. Additional information: Translation of method 'System.Enum.ToString' failed. If this method can be mapped to your custom function, see https://go.microsoft.com/fwlink/?linkid=2132413 for more information. Either rewrite the query in a form that can be translated, or switch to client evaluation explicitly by inserting a call to 'AsEnumerable', 'AsAsyncEnumerable', 'ToList', or 'ToListAsync'. See https://go.microsoft.com/fwlink/?linkid=2101038 for more information.

```

Note in particular the ` Sold.ToString().ToLower().Contains("a"))` which is where the exception is occurring. Note that the Enum is stored as a byte (and not as a string) in the database, leading to this issue.

The checkboxes work as expected because they are sending the byte values. However, when typing it is attempting to get a string translation of the enum which does not exist in the database (is my understanding), leading to the exception.

This only occurs when I type in the Excel Filterbox, thus it would be valuable to easily hide it in such cases, which would be easily accomplished with a simple CSS rule on the column.

Thank you for any further consideration.

[Balamurugan Lakshmanan]

Hi Mike,

 

Thanks for your update.

 

From your query, We understood that you are facing an issue with Enum is stored as a byte (and not as a string) in the database, leading to this issue. We would like to inform you that  we do not currently offer direct support for binding dropdown data with byte enum conversion. We apologize for any inconvenience this may cause.

 

Please get back to us if you have further queries.

 

Regards,

Bala.

[Mike-E]

Hi Bala,

Thank you for the confirmation.  As discussed, this problem presents itself when using the search box in the SfGrid filter control.  The request is to be able to hide the control via Css class property that can reach the control and style it accordingly.  This is preferred to the recommended approach which involves further (unnecessary) server-side calls that ultimately impact performance.

Thank you for your consideration.

[Balamurugan Lakshmanan]

Hi Mike,

We have considered your requirement “Need an Api Support for Remove Searchbox in Excel Filter ” as an uncertain improvement. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. It will be implemented in any of our upcoming releases.

https://www.syncfusion.com/feedback/43812/need-an-api-support-for-remove-searchbox-in-excel-filter

We are closing this ticket for now. You can communicate with us regarding the open features at any time using the above Feature Report page.  

Please let us know if you have any concerns.

Regards,

Bala.

[Mike-E]

Thank you Bala.  I remain concerned over the comprehension of this request.  It is simply emitting a CssClass property into the particular filter control when displayed for a column.  It really should only be a few hours worth of work.

Additionally, looking at Telerik's offering, they appear to give full control over the filtering experience:

https://docs.telerik.com/blazor-ui/components/grid/templates/filter

I looked for this in Syncfusion and did not see this.  I only see Filterbar, Menu, Checkbox, and Excel.

Having custom filters would be ideal, but this is a lot of work.  Really all that is needed here is a recommended `FilterCssClass` property on the GridColumn as described above.

Thank you for your continued consideration.

[Mike-E]

Hi Bala,

Please note that this appears to go to a 404 page:

https://www.syncfusion.com/feedback/43812/need-an-api-support-for-remove-searchbox-in-excel-filter

Thank you,

Michael

[Balamurugan Lakshmanan]

Hi Mike ,

Sorry for the inconvenience caused.

Now, you can track the current status of your request and contact us for any further inquiries through this link.       

https://www.syncfusion.com/feedback/43812/need-an-api-support-for-remove-searchbox-in-excel-filter

We are closing this ticket for now. You can communicate with us regarding the open features at any time using the above Feature Report page. Please let us know if you have any concerns.

Regards,

Bala.