I'm trying to figure out how to get smooth scrolling experience when virtul scroll mode is used. Some of the cells in my data can contain a couple, or over 100 words (or more), and when scrolling, the rows skip and jump in an obvious way, and it's not acceptable. I've tried to wrap my head around the RowHeight property without really understanding what it means. As each row in my data can be of different height, setting the proper RowHeight gets inpossible. What is the recommended solution in scenarios like mine? The users would like to see all the content of the cells.
I coded up my own virtual scroll table in javascript some time ago, where I calculated the row height for each row, depending on the text content of the cells, and that made it possible to calculate the total virtual height of the table achieve smooth scroll. Is there a way to do the same for the TelerikGrid? I'd like to convert to Blazor and TelerikGrid, to get the benefits of sorting, filtering and all that. Using virtual scroll IS probably necessary because there can be hundreds of thousand rows, and the users would prefer to not using paging...
Appreciate any tips here.
Grid code:
<TelerikGrid Data="@MyData"
Size="@ThemeConstants.Grid.Size.Small"
ScrollMode="GridScrollMode.Virtual"
Sortable="true"
FilterMode="@GridFilterMode.FilterRow"
RowHeight="100"
PageSize="50"
Width="1000px"
Height="600px">
<GridColumns>
<GridColumn Title="#" Width="100px">
<Template>
@{
var row = context as ExpandoObject;
var rowIndex = MyData.IndexOf(row) + 1;
}
@rowIndex
</Template>
</GridColumn>
@{
foreach (var item in MyData.First())
{
<GridColumn Field="@item.Key" FieldType="@item.Value.GetType()"
Title="@item.Key.Replace("_"," ")"
Width="@(item.Key.EndsWith("3") ? "300px" : "75px")">
</GridColumn>
}
}
</GridColumns>
</TelerikGrid>
Just a sample picture of sample data in a sample table: