Hello Radzen Team!
I'm implementing a DataGrid with fixed columns and some variable ones, that are based on stored data. The latter will be visible if they are checked in a dropdown that accepts multiple values.
Page.Load events:
Column class:
public class InterfaceService {
public class Column
{
public bool Filterable { get; set; }
public int Id { get; set; }
public string Property { get; set; }
public bool Sortable { get; set; }
public string Title { get; set; }
public bool Visible { get; set; }
}
}DropDown to select visible columns/documents:
The DataGrid with the binded documentColumns:
<RadzenGrid @ref="companiesDataGrid" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@companies" EmptyText="@(Language.GetLabel(EnumeratorService.EN_LabelType.Registrations_Auxiliaries_Companies_Empty))" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" TItem="SolidAccessWeb.Models.SiSaw.SiCompany" PageNumbersCount="10" PageSize="10" RowSelect="@CompaniesDataGridRowSelect">
<Columns>
<RadzenGridColumn TItem="SolidAccessWeb.Models.SiSaw.SiCompany" Property="name" Title="@(Language.GetLabel(EnumeratorService.EN_LabelType.Registrations_Auxiliaries_Companies_Fields_Name))">
</RadzenGridColumn>
@foreach(var documentColumn in documentColumns)
{
<RadzenGridColumn Filterable=@documentColumn.Filterable Property=@documentColumn.Property Sortable=@documentColumn.Sortable TItem="SolidAccessWeb.Models.SiSaw.SiCompany" Title=@documentColumn.Title Visible=@documentColumn.Visible >
<Template Context="data">
@(data.SiCompanyDocuments.FirstOrDefault(x => x.document == documentColumn.Id)?.number)
</Template>
</RadzenGridColumn>
}
<RadzenGridColumn TItem="SolidAccessWeb.Models.SiSaw.SiCompany" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="60px">
<Template Context="solidAccessWebModelsSiSawSiCompany">
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Size="ButtonSize.Small" style="height: 100%; width: 100%" Click="@((args) =>DeleteButtonClick(args, solidAccessWebModelsSiSawSiCompany))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
</RadzenGridColumn>
</Columns>
</RadzenGrid>Here are the results:
When no columns/documents are selected:
When any column/document is selected:
This is right after selecting it from the DropDown. Notice how the Title, the Width and some other properties did not render as they should
After doing what is described above, if you hover the mouse to the DataGrid, everything renders correctly:
When unselecting the value, it gets even worse:
Again, this is right after unselecting the value from the DropDown
After hovering the mouse over the DataGrid, it goes back to normal:
The same bug escalates quickly when selecting all the items:
