Feb 08, 2017, 4:05 PM
[CLOSED] Buffered Store Grid with Locked Columns and Row Selection causes alignment issue. Scroll freezes the grid.
Scrolling a buffered store grid with locked columns causing two issues.
1. If you scroll from top or bottom using the scrollbar arrow icons, it scrolls a while and then scroll freez.
2. Scrolling by dragging the scroll bar works, but time to time it creates highlighted selected row misalignment.
Steps to reproduce.
0. Use the chrome release 56.
1. Use the following example from Ext.net provided example but change the GridPanel attribute from DisableSelection="true" to DisableSelection="false". Make sure you lock one more column.
https://examples2.ext.net/#/GridPane...ite_Scrolling/
Here is the code to reproduce.
1. If you scroll from top or bottom using the scrollbar arrow icons, it scrolls a while and then scroll freez.
2. Scrolling by dragging the scroll bar works, but time to time it creates highlighted selected row misalignment.
Steps to reproduce.
0. Use the chrome release 56.
1. Use the following example from Ext.net provided example but change the GridPanel attribute from DisableSelection="true" to DisableSelection="false". Make sure you lock one more column.
https://examples2.ext.net/#/GridPane...ite_Scrolling/
Here is the code to reproduce.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
{
Store store = (Store)sender;
List<StockQuotation> data = new List<StockQuotation>();
int start = e.Start,
limit = e.Limit;
Random randow = new Random();
DateTime now = DateTime.Now;
bool desc = false;
if (e.Sort.Length > 0 && e.Sort[0].Direction == Ext.Net.SortDirection.DESC)
{
desc = true;
}
for (int i = start + 1; i <= start + limit; i++)
{
StockQuotation qoute = new StockQuotation()
{
Company = "Company " + (desc ? 50000 - i + 1 : i),
Price = randow.Next(0, 200),
LastUpdate = now
};
data.Add(qoute);
}
store.Data = data;
e.Total = 50000;
}
class StockQuotation
{
public string Company { get; set; }
public int Price { get; set; }
public DateTime LastUpdate { get; set; }
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Infinite Scroll Grid with lockable columns - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Infinite Scrolling</h1>
<p>Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
<p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
<p>The number of rendered rows is only just larger than the visible row count. As the edge of the rendered data scrolls towards being in
view, the table is refreshed, and repositioned to maintain visual scroll position.</p>
<p>It is not possible to lock or unlock <i>all</i> columns using the user interface. Each side, locked or unlocked must always contain at least one column.</p>
<ext:GridPanel
runat="server"
Width="500"
Height="500"
DisableSelection="false"
Title="Stock Price">
<Store>
<ext:Store
runat="server"
RemoteSort="true"
Buffered="true"
PageSize="100"
OnReadData="Store_ReadData">
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:PageProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Company" />
<ext:ModelField Name="Price" />
<ext:ModelField Name="LastUpdate" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Company" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn
runat="server"
Lockable="false"
Locked="true"
Width="50" />
<ext:Column
runat="server"
Text="Company"
DataIndex="Company"
Locked="true"
Width="170" />
<ext:Column
runat="server"
Text="Price, $"
DataIndex="Price"
Width="170"
Sortable="false"
Align="Center" />
<ext:Column
runat="server"
Text="Last Update"
DataIndex="LastUpdate"
Sortable="false"
Width="170">
<Renderer Format="Date" FormatArgs="'n/j/Y g:i:s A'" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" TrackOver="false" />
</View>
<SelectionModel>
<ext:RowSelectionModel runat="server" PruneRemoved="false" Mode="Multi" />
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by fabricio.murta; Mar 10, 2017 at 6:29 PM.
Reason: no user feedback for 7+ days
