For reasons unknown, our TelerikGrid rows all render with each <tr> element having the "k-alt k-table-alt-row" classes associated with them. This causes the background colour for each row to be the same, rather than alternating between two colours.
For example, the following block of code...
<TelerikGrid Id="@(Utility.CleanCssId("CrewGrid"))"
DetailTemplate="GridDetailTemplate"
EnableLoaderContainer="@ShowLoading"
Groupable="false"
Height="100%"
OnRead="@OnGridRead"
OnStateChanged="@OnGridStateChanged"
OnStateInit="@OnGridStateInit"
Pageable="true"
PageSize="@PageSize"
PageSizeChanged="@OnGridPageSizeChanged"
Reorderable="IsLargeScreen"
Resizable="IsLargeScreen"
SelectionMode="GridSelectionMode.Single"
ShowColumnMenu="IsLargeScreen"
Size="@GetGridSize"
Sortable="true"
SortMode="SortMode.Multiple"
TItem="CrewListItem"
@ref="Grid"
@bind-SelectedItems="@SelectedItems"
OnRowRender="OnRowRender">
<NoDataTemplate>
<strong>@RecordsMessage</strong>
</NoDataTemplate>
<GridSettings>
<GridColumnMenuSettings Lockable="false" FilterMode="ColumnMenuFilterMode.None" />
<GridPagerSettings InputType="PagerInputType.Buttons" PageSizes="@PageSizes" ButtonCount="5" Adaptive="false" Position="PagerPosition.Bottom" />
</GridSettings>
<GridColumns>
<GridColumn Field="@nameof(CrewListItem.Color)"
Width="@(IsLargeScreen ? "40px" : "50px")"
Resizable="false"
ShowColumnMenu="false"
Groupable="false"
ShowColumnChooser="false"
Sortable="false"
HeaderClass="k-text-transparent"
OnCellRender="OnGridCellRender">
<Template>
@{
var item = (CrewListItem)context;
<M360ListColumnColor Color="@item.Color" IsLargeScreen="IsLargeScreen" />
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(CrewListItem.Name)" Title="@TMessages.Crew" OnCellRender="OnGridCellRender" VisibleInColumnChooser="false">
<Template>
@{
var item = (CrewListItem)context;
<div class="k-d-flex k-h-full @(IsLargeScreen ? "k-align-items-stretch" : "k-align-items-center")">
<M360ListColumnLink Url="@string.Concat("crew/", item.Id)" Text="@item.Name" EntityType="Crew" IsPrimary="true" />
</div>
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(CrewListItem.DivisionsJson)" Title="Division(s)" Sortable="true" Visible="IsLargeScreen" OnCellRender="OnGridCellRender">
<Template>
@{
var item = (CrewListItem)context;
<M360ListColumnList Items="@item.Divisions.ToList()" />
}
</Template>
</GridColumn>
.
.
.
</GridColumns>
</TelerikGrid>...results in markup like this...
<tbody class="k-table-tbody" role="rowgroup">
<tr
role="row"
class="k-master-row k-table-row k-alt k-table-alt-row"
data-render-row-index="0"
aria-rowindex="1"
>
. . .
</tr>
<tr
role="row"
class="k-master-row k-table-row k-alt k-table-alt-row"
data-render-row-index="1"
aria-rowindex="3"
>
. . .
</tr>
<tr
role="row"
class="k-master-row k-table-row k-alt k-table-alt-row"
data-render-row-index="2"
aria-rowindex="5"
>
. . .
</tr>
. . .
</tbody>
I can see that the "aria-rowindex" increments by two, yet the "data-render-row-index" increments by one. Are we missing something simple, yet crucial here? What could cause the skipping of rows during render?
Many thanks,
Nem
Hello Nem,
Just to be sure that we are on the same page about the default behavior, I want to start with that, the Grid styling includes alternating row color. This works by adding extra classes (k-alt and k-table-alt-row) to each alternating row so that they may be styled differently.
As far as I understand, on your side the Grid only renders the rows with the additional k-alt and k-table-alt-row classes. Is that correct? The provided code is not runnable and full and I cannot confirm the exact reason but I suspect some custom CSS may be in charge here. There are several places where a custom CSS could be set in the provided code:
- Id="@(Utility.CleanCssId("CrewGrid"))"
- OnRowRender="OnRowRender"
- OnCellRender="OnGridCellRender"
Can you please review and confirm if you have set some styles to the Grid rows? If we confirm this causes the issue, we can close the ticket.
If the problem persists please send me a runnable example so I can reproduce the implementation and investigate in details what could cause this problem.
Regards,
Nansi
Progress Telerik