Virtual scrolling only displays portion of data

[Thomas]

Hello,

I have a grid with an ajax data source and ServerOperation set to true. The data source has roughly about 1.5 million entries and I want to display them with virtual scrolling enabled so that only the relevant portion of the data is loaded into the DOM.

Now the problem is that only about half of the available data is shown in the grid when scrolled to the end. See picture "missing_data.png" for clarification.

I tried to troubeshoot the issue myself and came up with this KB article: Virtual Scrolling - Setting the scrollbar, but I cannot get all elements to show with either hint. Apparently a height of 36px is the minimum for a grid row and with that value not all rows are shown. Disabling word-wrap has no effect. I noticed the maximum amount of entries displayed when scrolled to the end changes with different themes and changes sometimes when I scroll to the bottom repeatedly.

Now my question is how can I reliably show all rows and keep virtual scrolling? Currently my grid looks like this:

@(Html.Kendo().Grid<LogEntry>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.EventDateTime)
            .Title("Date").Width(100)
            .Format("{0: dd.MM.yyyy HH:mm:ss}");
        //.Filterable(config => config
        //    .UI("DateTimeFilter")
        //    .Cell(cell => cell
        //        .Template("DateTimeFilterRow")));

        columns.Bound(c => c.EventLevel).Title("Level").Width(100);
        columns.Bound(c => c.MachineName).Title("Hostname").Width(150);
        columns.Bound(c => c.EventMessage).Title("Message").Width(600)
            .HtmlAttributes(new { @class = "nowrap" });

        //columns.Bound(c => c.StackTrace).Hidden();
        //columns.Bound(c => c.ErrorMessage).Hidden();
    })
    .ColumnMenu(config => config
        .Sortable(false)
        .Columns(true)
        .Enabled(true))
    .Sortable()
    .Groupable()
    .Filterable(config => config
        .Extra(false)
        .Mode(GridFilterMode.Row)
        .Operators(config => config
            .ForDate(config => config
                .Clear()
                .IsGreaterThanOrEqualTo("Ist nach")
                .IsLessThanOrEqualTo("Ist vor")
                .IsEqualTo("Ist gleich"))
            .ForString(config => config
                .Clear()
                .IsEqualTo("Ist gleich")
                .IsNotEqualTo("Ist ungleich")
                .StartsWith("Beginnt mit")
                .EndsWith("Endet mit")
                .Contains("Enthält")
                .DoesNotContain("Enthält nicht")
                .IsNullOrEmpty("ist NULL"))))
    .Scrollable(config => config
        .Height("auto")
        //.Endless(true)
        .Virtual(true))
    //.ClientDetailTemplateId("log-detail")
    .Resizable(config => config.Columns(true))
    .Reorderable(config => config.Columns(true))
    .Pageable(config => config
        .Refresh(true)
        .Numeric(true))
    //.Events(events => events
    //    .DetailExpand("onDetailExpand"))
    .DataSource(config => config
        .Ajax()
        .PageSize(200)
        .ServerOperation(true)
        .Read("Logs_Read", "Home")
        .Events(events => events
            .Error("error_handler"))
    )
)

 

 

[Angel Petrov]

Hello Thomas,

I have carefully examined the setup and would like to point-out the following.

1. The grid has enabled paging and virtualization which is not recommend and is noted in the limitations section in this artice. In order to verify that the last batch of records is extracted when the paging is disabled you can check the order in which they are in the DB.

2. Setting the scrollable heigth to auto is also not recommended. Please provide a specific height for the grid as shown in this demo(setting a height style in the HtmlAttributes).

3. Last but not least comes a limitation in regards of the number of records. In this section we mention that the grid can display between one or two million of records. Meaning that with the current setup you fall into that case.

Regards,
Angel Petrov
Progress Telerik

[Thomas]

[quote]Angel Petrov said:

Hello Thomas,

I have carefully examined the setup and would like to point-out the following.

1. The grid has enabled paging and virtualization which is not recommend and is noted in the limitations section in this artice. In order to verify that the last batch of records is extracted when the paging is disabled you can check the order in which they are in the DB.
[/quote]

Thanks for the heads up, but I am just using the paging to show the number of records currently displayed. It has no difference if I disable paging. I only used this for the screenshot to show the number of records displayed.

[quote]Angel Petrov said:
2. Setting the scrollable heigth to auto is also not recommended. Please provide a specific height for the grid as shown in this demo(setting a height style in the HtmlAttributes).
[/quote]

Actually this works like a charm. I want the grid to automatically span the whole page so I use "auto" for the scrollable height. It makes no difference if I use a set height.

[quote]Angel Petrov said:
3. Last but not least comes a limitation in regards of the number of records. In this section we mention that the grid can display between one or two million of records. Meaning that with the current setup you fall into that case.
[/quote]

Acutally it displays much less than one million records, thats the reason I asked about it.  

 

 

PS.

The forum editors is really bad, you should get some good BBCode WYSIWYG editor.

[Angel Petrov]

Hi,

In order to further assist you I would suggest isolating the problem in a sample project in which it can be observed. That said I would recommend opening a formal support ticket and attaching such a sample there. When creating the test project you can create a dummy list of data instead using a real database. Once we can replicate the behavior locally we should be able to quickly find what is causing it.

Regards,
Angel Petrov
Progress Telerik