Excel Like Filter with broken styles
In the recent updates, I have noticed that the UI for the filter menus that open up in case of Excel-Type have lost their styles:
I can click but there is no mouse cursor change and also, the sub-menu opens very basic:
I cannot remember which build caused this but right now I'm using the latest as of writing (v18.3.0.44) and am facing this issue.
Code Extract:
@using Microsoft.AspNetCore.Http
@using Microsoft.Extensions.DependencyInjection
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Popups
@using ClickEventArgs = Syncfusion.Blazor.Navigations.ClickEventArgs
@using InputType = Syncfusion.Blazor.Inputs.InputType
@using SelectionType = Syncfusion.Blazor.Grids.SelectionType
@using FilterType = Syncfusion.Blazor.Grids.FilterType
<div id="ControlRegion">
<SfGrid ID="Grid" DataSource="@_allProjects" @ref="_grid" AllowPaging="true" AllowFiltering="true" AllowReordering="false"
AllowResizing="true" AllowGrouping="false" AllowExcelExport="true" AllowSelection="true" AllowSorting="true" Toolbar="@_gridToolbarItems">
<GridEditSettings AllowAdding="false" AllowEditing="false" AllowDeleting="false"></GridEditSettings>
<GridFilterSettings Type="FilterType.Excel" EnableCaseSensitivity="false">
<GridFilterColumns>
<GridFilterColumn Field=@nameof(DesignProjectViewModel.DesignManager01) MatchCase=false Operator="Operator.StartsWith" Predicate="and" Value="@_currentUser"></GridFilterColumn>
</GridFilterColumns>
</GridFilterSettings>
<GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings>
<GridEvents OnToolbarClick="GridToolbarClick" DataBound="GridDataboundHandler" TValue="DesignProjectViewModel"></GridEvents>
<GridPageSettings PageCount="5" PageSizes="false" PageSize="19"></GridPageSettings>
<GridTemplates>
<DetailTemplate>
</DetailTemplate>
</GridTemplates>
<GridColumns>
<GridColumn Width="100" AllowFiltering="false" Field=@nameof(DesignProjectViewModel.InvestmentKey) HeaderText="Id" IsPrimaryKey="true"></GridColumn>
<GridColumn Width="050" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.IsNonRadarProject) HeaderText="NRP" Filter="@(new {type = "CheckBox"})" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Center">
<Template>
@{
var currentRadarProject = (context as DesignProjectViewModel);
var customIsNonRadarProject = (currentRadarProject?.IsNonRadarProject) ?? false;
if (customIsNonRadarProject)
{
<span>Y</span>
}
else
{
<span>N</span>
}
}
</Template>
</GridColumn>
<GridColumn Width="090" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.ProjectNumber) HeaderText="Project #"></GridColumn>
<GridColumn Width="450" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.ProjectName) HeaderText="Name"></GridColumn>
<GridColumn Width="250" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.ProgrammeSponsor) HeaderText="Sponsor"></GridColumn>
<GridColumn Width="250" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.ProgrammeLead) HeaderText="Lead"></GridColumn>
<GridColumn Width="250" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.ProjectManager) HeaderText="Project Manager"></GridColumn>
<GridColumn Width="250" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.DesignManager01) HeaderText="Design Manager"></GridColumn>
<GridColumn Width="200" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.Status) HeaderText="Status"></GridColumn>
<GridColumn Width="070" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.Funding) HeaderText="F"></GridColumn>
<GridColumn Width="100" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.Gate) HeaderText="Gate"></GridColumn>
<GridColumn Width="250" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.DaDeliveryStage) HeaderText="Delivery Stage (DA)"></GridColumn>
<GridColumn Width="120" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.ProjectGate) HeaderText="Project Gate"></GridColumn>
<GridColumn Width="150" AllowFiltering="true" Field=@nameof(DesignProjectViewModel.DesignTeamClassification) HeaderText="Classification"></GridColumn>
</GridColumns>
</SfGrid>
</div>
<style type="text/css" class="cssStyles">
.detailTable td {
font-size: 13px;
padding: 4px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.formLabelHeader {
font-weight: bold;
}
.tableCellAlignRight {
text-align: right;
}
</style>
@{
var currentRadarProject = (context as DesignProjectViewModel);
var customIsNonRadarProject = (currentRadarProject?.IsNonRadarProject) ?? false;
if (customIsNonRadarProject)
{
Y
}
else
{
N
}
}
SIGN IN To post a reply.
13 Replies
Hi DoomerDGR8,
Greetings from Syncfusion.
Query: Excel Like Filter with broken styles- I have noticed that the UI for the filter menus that open up in case of Excel-Type have lost their styles:
We have validated your query and checked the reported problem at our end. We could not reproduce the problem at our end. The excel filter dialog shown correctly. Find the below sample for your reference.
 |
We could view the second screenshot which you have shared. Could you please share more information about that problem?
Also, could you please share the below details. It will be helpful to validate and provide a better solution.
- Share your _Host.cshtml file.
- Did you downloaded CSS reference from theme studio and referred in your _Host.cshtml file?
- Video demonstration of the problem.
Regards,
Rahul
Hi Roberto,
Sorry for the inconvenience.
We have validated your query and checked the reported problem at our end. We have checked the problem by generating theme from theme studio and referred in the application. But we could not reproduce the problem at our end. Find the below sample for your reference.
We have generated theme from theme studio and checked the problem for both material and bootstrap4 CSS.
 |
If you are still facing the problem, then could you please share the below details. It will be helpful to validate and provide a better solution.
- Reproduce the problem in the provided sample and revert back to us.
- Did you face the problem in any specific version?
- Video demonstration of the problem.
- Share a simple reproduceable sample if possible.
Regards,
Rahul
SIGN IN To post a reply.
