We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Remove Searchbox in Excel Filter

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


36 Replies 1 reply marked as answer

BL Balamurugan Lakshmanan Syncfusion Team February 27, 2023 03:17 PM UTC

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


MI Mike-E February 27, 2023 04:54 PM UTC

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?



BL Balamurugan Lakshmanan Syncfusion Team March 1, 2023 11:33 AM UTC

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

Marked as answer

MI Mike-E March 1, 2023 01:06 PM UTC

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.



BL Balamurugan Lakshmanan Syncfusion Team March 8, 2023 04:13 AM UTC

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.



MI Mike-E March 8, 2023 09:52 AM UTC

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



BL Balamurugan Lakshmanan Syncfusion Team March 9, 2023 12:25 PM UTC

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.



MI Mike-E March 10, 2023 10:15 AM UTC

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. 👍🙏



BL Balamurugan Lakshmanan Syncfusion Team March 13, 2023 05:50 AM UTC

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. 



MI Mike-E March 20, 2023 08:43 AM UTC

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.



BA babar ali March 20, 2023 10:48 AM UTC

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.



MI Mike-E March 20, 2023 11:06 AM UTC

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?



MI Mike-E March 22, 2023 11:33 AM UTC

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



BL Balamurugan Lakshmanan Syncfusion Team March 23, 2023 02:23 AM UTC

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.



MI Mike-E March 23, 2023 11:24 AM UTC

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.



VN Vignesh Natarajan Syncfusion Team March 29, 2023 08:58 AM UTC

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



MI Mike-E March 29, 2023 10:18 AM UTC

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.



BL Balamurugan Lakshmanan Syncfusion Team April 5, 2023 04:46 PM UTC

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.



MI Mike-E April 7, 2023 03:05 PM UTC

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



SA Sajjad Ali April 9, 2023 05:28 AM UTC

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



MI Mike-E April 9, 2023 05:17 PM UTC

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



BL Balamurugan Lakshmanan Syncfusion Team April 10, 2023 03:49 PM UTC

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


MI Mike-E April 10, 2023 07:01 PM UTC

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. :)



BA babar ali April 12, 2023 06:28 AM UTC

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.



MI Mike-E April 12, 2023 07:51 AM UTC

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



MI Mike-E April 27, 2023 01:11 PM UTC

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.



BL Balamurugan Lakshmanan Syncfusion Team May 3, 2023 10:08 AM UTC

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.



MI Mike-E May 4, 2023 09:28 AM UTC

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.



BL Balamurugan Lakshmanan Syncfusion Team May 5, 2023 09:30 AM UTC

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.




MI Mike-E May 7, 2023 10:47 PM UTC

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.



BL Balamurugan Lakshmanan Syncfusion Team May 18, 2023 02:44 PM UTC

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.



MI Mike-E May 18, 2023 06:47 PM UTC

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.



MI Mike-E May 18, 2023 06:48 PM UTC

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



BL Balamurugan Lakshmanan Syncfusion Team May 22, 2023 08:29 AM UTC

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.



MI Mike-E June 5, 2024 09:17 AM UTC

Thank you again Bala and team for all your efforts out there, and for your patience in dealing with customers such as myself who sometimes may misunderstand your guidance.

I was under the impression that the provided answer would impact all columns.  It does, but since there is only one filter being displayed at a time, this really only impacts one: the visible one.

I was able to implement this and got it working as desired.

It would be ideal to be able to use CSS instead as it would be less messy and more performant, but this will do for now.

Thank you again!



PS Prathap Senthil Syncfusion Team June 6, 2024 02:04 PM UTC

Thank you for the update. We're glad to hear that the provided solution worked for you. We are closing the thread now.



Loader.
Live Chat Icon For mobile
Up arrow icon