PDA

View Full Version : [CLOSED] [#32] 10000 records in gridpanel



marco.morreale
Sep 18, 2012, 8:32 AM

Daniil
Sep 18, 2012, 1:15 PM
Hi,

Unfortunately, too many records to get it working faster. It is a browser and its JavaScript engine restriction, not ours one.


I would prefer to avoid paging or infinite scrolling (customer requirement).

Yes, this options can be a solution. Please clarify why not infinite scrolling? Anyway, a user will have to scroll to observe 10000 rows.

marco.morreale
Sep 18, 2012, 2:05 PM
Records are 6700 , exactely.

Is there a best binding method to make the control more responsive?
And what if a disable some features?
M

Daniil
Sep 18, 2012, 5:10 PM
Records are 6700 , exactely.

It is also too many.



Is there a best binding method to make the control more responsive?


The best thing would be setting

Buffered="true"
and some PageSize for the Store.

Please answer on this comment.



I would prefer to avoid paging or infinite scrolling (customer requirement).

Yes, this options can be a solution. Please clarify why not infinite scrolling? Anyway, a user will have to scroll to observe 10000 rows.



And what if a disable some features?


I don't think it will help. It almost doesn't affect on main rendering process which causes the issue.

Aurelio
Sep 18, 2012, 9:44 PM
Hi Marco (ciao)
In this mode, load 9450 record in page of 500 in 6 second..whit application no intranet (Server Web in Germany and my connection 3MB in download :( )
Not use Internet Explore, here is to many slow...the best is Chrome.

(Con questo modo carico circa 9450 record n pagine da 500 l'una in circa 6 secondi )



<ext:Store ID="StoreCapComuni" runat="server" DataSourceID="SqlDataSourceCapCom" PageSize="500" OnReadData="StoreCapComuni_ReadData" >
<Model>
<ext:Model ID="ModelCapComuni" runat="server" IDProperty="CapComId">
<Fields>
<ext:ModelField Name="CapComId" Type="Int" />
<ext:ModelField Name="CapComCod" Type="String" />
<ext:ModelField Name="CapComCom" Type="String" />
<ext:ModelField Name="ProSig" Type="String" />
<ext:ModelField Name="ProDes" />
<ext:ModelField Name="NazCodIso" />
<ext:ModelField Name="NazId" />
<ext:ModelField Name="ProId" Type="Int" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="NazCodIso" />
<ext:DataSorter Property="ProSig" />
<ext:DataSorter Property="CapComCom" />
</Sorters>
</ext:Store>


Thanks
Aurelio

marco.morreale
Sep 19, 2012, 7:51 AM
Aurelio,
it is a project requirement not to use paging.
Thank you very much anyway
M



Hi Marco (ciao)
In this mode, load 9450 record in page of 500 in 6 second..whit application no intranet (Server Web in Germany and my connection 3MB in download :( )
Not use Internet Explore, here is to many slow...the best is Chrome.

(Con questo modo carico circa 9450 record n pagine da 500 l'una in circa 6 secondi )



<ext:Store ID="StoreCapComuni" runat="server" DataSourceID="SqlDataSourceCapCom" PageSize="500" OnReadData="StoreCapComuni_ReadData" >
<Model>
<ext:Model ID="ModelCapComuni" runat="server" IDProperty="CapComId">
<Fields>
<ext:ModelField Name="CapComId" Type="Int" />
<ext:ModelField Name="CapComCod" Type="String" />
<ext:ModelField Name="CapComCom" Type="String" />
<ext:ModelField Name="ProSig" Type="String" />
<ext:ModelField Name="ProDes" />
<ext:ModelField Name="NazCodIso" />
<ext:ModelField Name="NazId" />
<ext:ModelField Name="ProId" Type="Int" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="NazCodIso" />
<ext:DataSorter Property="ProSig" />
<ext:DataSorter Property="CapComCom" />
</Sorters>
</ext:Store>


Thanks
Aurelio

marco.morreale
Sep 19, 2012, 8:02 AM
Daniil,
does buffer disable sorting?
I need sorting and filtering for my grid.
M

marco.morreale
Sep 19, 2012, 3:32 PM

Daniil
Sep 19, 2012, 4:49 PM
does buffer disable sorting?
I need sorting and filtering for my grid.

Unfortunately, yes, buffered Store doesn't allow to use local sorting and filtering.

Maybe, it is possible to get remote sorting and filtering working. We will look into it.




In order to keep the grid light I replaced the editor with a template column with html control.


I think it doesn't help to get the grid more lightweight. Unfortunately. Or, even, it can worsen the situation. The Editor is showed when a user clicks the cells and there is a single Editor component for all cells. But the TemplateColumn will render its Template for each cells.




Can you provide an example of how to parse html controls e post the content with a direct method?


It would be rather difficult.

marco.morreale
Sep 19, 2012, 5:01 PM
The problem with CellEditing is that when I click on the cell I want to edit, it take several seconds to render the editor.
Is there a way to allow input of a number (quantity) in a gridpanel cell without switching state?

I simply need to gather a quantity for each product line and then postback them.

M

Daniil
Sep 19, 2012, 6:20 PM
The problem with CellEditing is that when I click on the cell I want to edit, it take several seconds to render the editor

Well, it should not take too much time. Generally, it should be rendered immediately. Please provide us with a sample to reproduce.

geoffrey.mcgill
Sep 20, 2012, 12:22 AM
Is there a way to allow input of a number (quantity) in a gridpanel cell without switching state?

I simply need to gather a quantity for each product line and then postback them.

If you have a new question, please start a new thread.

I believe this original thread should now be closed.

Summary... you are sending too many records to the client. Either implement server-side paging, or possibly infinite scrolling.

marco.morreale
Sep 26, 2012, 10:02 AM
Hi Daniil,
I would like to post a message with an attachment to this thread.
The file is a compressed .rar containing a small project in wich we reproduced our problem (very slow line state change on click to edit in Internet Exporer).

Unfortunately I get an error when I upload the file: "Invalid file type".
How can I send you the project?
Thanks in advance
M

Daniil
Sep 26, 2012, 11:56 AM
Please send a test project to
support@object.net

I will investigate.

Daniil
Sep 26, 2012, 2:46 PM
Thank you, Marco, I reproduced the problem.

But, unfortunately, loading so many records is too heavy for a browser.

I tried

buffered: true,
pageSize: 500
for the Store and it extremely improved the performance.

marco.morreale
Oct 09, 2012, 4:40 PM
I understand.

Anyway, please consider this:
- in browser different from IE the change is fast.
- when I edit a line the records are already loaded
- if I set buffer=true I can't use sorting and filtering anymore (am I right?)
- the problem becomes significant far before reaching the number of 10000 records. Even with 400 records the problem appears

M

Daniil
Oct 09, 2012, 6:43 PM
- in browser different from IE the change is fast.


Unfortunately, it is a common issue for IE because of the fact that it has much slower JavaScript engine comparing with others like Chrome or FireFox. We can't do anything with this.



- when I edit a line the records are already loaded


I don't understand this item. Please clarify.



- if I set buffer=true I can't use sorting and filtering anymore (am I right?)


If you mean local filtering and sorting, then yes, you are right, it doesn't work for now. Maybe, there is a possibility to get it working. We will look into. Tagged the thread [OPEN].

Remote sorting and filtering should both work.



- the problem becomes significant far before reaching the number of 10000 records. Even with 400 records the problem appears


Confirm. It doesn't work well in IE9 with about 400 records. But it works pretty good in Chrome.

ExtJS announced that they are going to improve IE performance in 4.2. Hope they will improve.

Though it definitely won't work well with 10000 records anyway. We would highly recommend to consider a possibility to use remote paging, sorting, filtering.

marco.morreale
Oct 11, 2012, 2:03 PM
I don't understand this item. Please clarify.



The row editing event occurs after the grid has already been rendered (I mean, when the user click on a row to edit it).
I expect the row state change doesn't require to reload all records. Then it should be quick (like in Chrome e Firefox actually is).

RCN
Oct 11, 2012, 2:43 PM

Daniil
Oct 11, 2012, 5:00 PM
The row editing event occurs after the grid has already been rendered (I mean, when the user click on a row to edit it).
I expect the row state change doesn't require to reload all records. Then it should be quick (like in Chrome e Firefox actually is).

Well, a Store should not reload after editing. Please clarify does it happen in your application?

Daniil
Oct 11, 2012, 5:51 PM
By the way, here are two Sencha threads related to the problem.
http://www.sencha.com/forum/showthread.php?245478
http://www.sencha.com/forum/showthread.php?230719

There is a recommendation to set

Ext.supports.Direct2DBug = false;
to improve the performance in IE.

You could try it.

Baidaly
Nov 17, 2012, 1:21 AM
Opened an Issue to track this defect, see

https://github.com/extnet/Ext.NET/issues/32

Daniil
Jan 13, 2013, 7:25 AM
- if I set buffer=true I can't use sorting and filtering anymore (am I right?)


If you mean local filtering and sorting, then yes, you are right, it doesn't work for now. Maybe, there is a possibility to get it working. We will look into. Tagged the thread [OPEN].


Local sorting and filtering for buffered GridPanel appears to be working well now with the Ext.NET sources from the trunk.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();

object[] data = new object[5000];

for (int i = 0; i < 5000; i++)
{
data[i] = new object[] { "test" + i };
}
store.DataSource = data;
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Height="400">
<Store>
<ext:Store runat="server" PageSize="5000">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<Plugins>
<ext:BufferedRenderer runat="server" />
</Plugins>
<Features>
<ext:GridFilters runat="server" Local="true">
<Filters>
<ext:StringFilter DataIndex="test" />
</Filters>
</ext:GridFilters>
</Features>
</ext:GridPanel>
</form>
</body>
</html>

Also in this blog post
http://www.sencha.com/blog/first-look-at-ext-js-4-2-grid
they are saying that editing should also work well now.

There was a bug regarding editing.
http://www.sencha.com/forum/showthread.php?251834

It is marked [FIXED]. It will be included in ExtJS 4.2.0 beta 3 (or the final release).

Currently, there is ExtJS 4.2.0 beta 2 in our trunk version in SVN. We will apply ExtJS 4.2.0 beta 3 (or final) release shortly after Sencha will release it.