Filter like Excel doesn't show items

[Salvatore]

Hi, there's a strange thing happening with the Grid control. I have a razor page (used as a component) that contains a grid and is used on multiple pages.

What happens is that on a page (the grid is contained in a SplitterPane) when I activate the filter selection, on any column, a completely normal popup appears but without the labels of the possible filter elements while the same component if used on another page, same DataSource, shows the perfectly normal filter popup with all the labels (see annex file).

The only difference, in the first case, consists in the presence, within another splitterPane, of another Grid (with the same anomaly) . However, this does not seem to have any influence because if I remove it the behavior of the Grid does not change.

In any case, in any Content (razor) do I use special styles for the Grid or Template for the columns.

I'm using version 20.3.0.61 of Syncfusion.Blazor

this is the example of my code where LogContent is a razor page that contains a grid set in a classic way

<SplitterPane Collapsible="false" Min="20%" Size="50%">
    <ContentTemplate>
        <div>
            <div class="splitter-content">
                <h5 class="splitter-title text-white bg-secondary">Grid</h5>
                <LogsContent DayRange="1" FilterLogLevel="@(LogEventLevel.Error)"></LogsContent>
            </div>
        </div>
    </ContentTemplate>
</SplitterPane>

​

.splitter-content {
    padding: 2px;
}

.splitter-title {

    position: relative;
    /*text-align: center;*/
    padding: .25rem;
    font-size: 1rem;
}

Attachment: gridFilterError_8a4cfdec.zip

[Salvatore]

Hi,

this morning I realized that in another content, in another splitterpane on the same page, I had modified this css style (within the razor page, enclosed in the style tags, not in an external css file)

     // .e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label {

     // color: white !important;

     // }

which changed the color of the text to white.

I removed it and now the grid filter popup shows the labels.

since I need that checkbox to show the white color label, how can I modify only the checkbox without affecting the rest?

Thanks in advance

Greetings

[Monisha Saravanan]

Hi Salvatore,

Greetings from Syncfusion.

Query: “since I need that checkbox to show the white color label, how can I modify only the checkbox without affecting the rest?”

We suggest you to use the below highlighted solution at your end to change the checkbox color. Kindly check the below attached sample and code snippet for your reference.

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

 

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

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

    <GridColumns>

        ...

   </GridColumns>

</SfGrid>

<style>

    .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {

    background-color: white;

    border-color: black;

    color: black;

    }

</style>

Please let us know if you have any concerns.

Regards,

Monisha