This is a migrated thread and some comments may be shown as answers.

Bug with OData returning large dataset?

16 Answers 248 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 10 Apr 2012, 03:31 PM
We're currently testing the KendoUI Grid to see what is the maximum number of row that can be handled (with an OData Service).

To run our tests, we did create a table with 1 000 000 records.  After displaying 553 385 records, the grid starts to struggles... only half of the row #553 386 is displayed, and then we can't scroll any further in the list.

Did someone else noticed bugs with the grid when displaying more than 500 000 rows?

16 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 10 Apr 2012, 04:12 PM
Hi,

 The Kendo grid is not capable of displaying that many table rows unless virtualization is enabled. Here is a demo showing how to do that: http://demos.kendoui.com/web/grid/virtualization-remote-data.html 

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Simon
Top achievements
Rank 1
answered on 10 Apr 2012, 04:22 PM
I forgot to mention... the virtualization is enabled on my grid.
0
Atanas Korchev
Telerik team
answered on 10 Apr 2012, 04:48 PM
Hi,

 We have successful customer implementations with close to a million records. Here is one of them: http://wakanda.spirit.de:8081/ Does that work for you? How is your grid configured by the way?
 

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Simon
Top achievements
Rank 1
answered on 10 Apr 2012, 06:34 PM
Hello Atanas,

Are you sure the example you gave me is working properly???

If you sort you grid by last name, "Obrien" is the last name in the list but there's many missing records (every last name from "Obrien" to "Zuniga".

EDIT
The problem is only with IE9...  Firefox and Chrome are ok
0
Atanas Korchev
Telerik team
answered on 11 Apr 2012, 04:35 PM
Hi,

IE9 has maximum limit for the total height of a DOM element. It is likely that this limit has been hit which prevents the virtual scrolling from working. Other browsers also have a limit but the number is just bigger.

Anyway I couldn't reproduce this problem in IE9 (see this video ). I suggest you send us a runnable sample project which shows the problem you are experiencing.

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Simon
Top achievements
Rank 1
answered on 11 Apr 2012, 04:42 PM
Hello Atanas,

I just looked at your video... you only scrolled a few lines in the grid (From Z to Y).  Try to scroll all the way down and you'll see the bug.

Simon
0
RainerAtSpirit
Top achievements
Rank 1
answered on 13 Apr 2012, 06:14 PM
[Update]: Here are two links that demonstrate the correct behavior with Firefox and the IE8/9 issue

I can confirm that this is an issue in IE8/9. Interestingly enough it's working in IE7.
I've updated the example at http://wakanda.spirit.de:8081/ with the information about an IE8/IE9 issue and linked it back to this thread.

Frohes Schaffen

Rainer
0
Rosen
Telerik team
answered on 17 Apr 2012, 11:55 AM
Hello guys,

We have looked into the problem however, it seems that IE9 limits the maximum scroll height of scrollable elements. Unfortunately, this will yield incorrect scrollbar height, which will not allow all of grid items to be visible. Here is very basic sample which demonstrates the issue:


Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RainerAtSpirit
Top achievements
Rank 1
answered on 17 Apr 2012, 12:38 PM
Hello Rosen,

In another demo that I'm working on we're hit by an Firefox issue after command columns have been added, which is probably related to the way virtual scrolling is implemented (http://openaccess.spirit.de/?ReadWrite=1). Looks like adding a couple of pixels per line (itemheight) with a dataSource.total() of 1 million violates the limit in firefox as well.

In Kendo.grid.js line 216 totalheight is calculated as follows.
totalHeight = dataSource.total() * itemHeight + addScrollBarHeight;
 
        for (idx = 0; idx < math.floor(totalHeight / maxHeight); idx++) {
            html += '<div style="width:1px;height:' + maxHeight + 'px"></div>';
        }

Probably worth to look into the scrolling algorythm and enhance it to support larger datasets. Something along the line of figuring out the max supported total height per browser and use that to slice the totalHeight into managable junks.

Frohes Schaffen

Rainer






0
Rosen
Telerik team
answered on 18 Apr 2012, 10:17 AM
Hi Rainer,

I suspect that your case have hit the FireFox's limit for the total height of a DOM element. You may consider either constraining the number of total loaded items in the grid or making rows smaller, for example by decreasing the font size. 

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RainerAtSpirit
Top achievements
Rank 1
answered on 18 Apr 2012, 10:35 AM
Hi Rosen,

Maybe the demos with 1 million items are simply beyond what can be done with virtual scrolling today. @Simon did some measurements and according to his findings he hit a limit at #553 386 items. Would that be KendoUI's recommendation to not work with larger sets than that?

While 553 386 is still an impressive number one million simply sounds better ;-), but on a more serious note I'd expect that eventually with virtual scrolling there should be no limit at all.

As to the second issue with command columns and Firefox, I agree with you that this has probably nothing to do with reaching Firefox's DOM height limit, so I'll do some more testing and come back in a separate thread.

Rainer

0
Rosen
Telerik team
answered on 19 Apr 2012, 11:28 AM
Hi Rainer,

The item count will depend on the height of the elements, therefore it will vary at case by case bases.

Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RainerAtSpirit
Top achievements
Rank 1
answered on 19 Apr 2012, 11:51 AM
Hi Rosen,

I agree with you that there is an upper limit of items that can be handled in the grid, where the limit itself is based on various factors like row height, browser version etc.
As said before I think  that the virtualisation algorithm shouldn't introduce such a limitation I will therefore go ahead and file a support request.

Thanks,

Rainer
0
Simon
Top achievements
Rank 1
answered on 19 Apr 2012, 12:49 PM
+1 to rainer's request
0
shijilesh
Top achievements
Rank 1
answered on 16 Dec 2012, 04:38 PM
hai i was trying with batch editing , i could retrieve only max 15,000 row if count exceeds more than 15,000
nothing is coming  ??



@(Html.Kendo().Grid<MvcApplication1.Models.ItemMaster>()    
    .Name("Grid")    
    .Columns(columns => {        
        columns.Bound(p => p.Item_Code );
        columns.Bound(p => p.Item_Name ).Width(140); 
        columns.Command(command => command.Destroy()).Width(110);
    })
    .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();        
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
             
        .Ajax()         
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.Item_Code ))
        .Create("Editing_Create", "item")
            .Read("Editing_Read", "item")
            .Update("Editing_Update", "item")
            .Destroy("Editing_Destroy", "item")
    )
)
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script> 
0
Rosen
Telerik team
answered on 17 Dec 2012, 07:20 AM
Hello shijilesh,

I'm afraid that I'm not sure how your question or scenario is related to this thread initial topic. Therefore, please open a separate one. Meanwhile, you should check the troubleshooting section in our documentation here.

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Simon
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Simon
Top achievements
Rank 1
RainerAtSpirit
Top achievements
Rank 1
Rosen
Telerik team
shijilesh
Top achievements
Rank 1
Share this question
or