Hi,
I can suggest the following solution.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
public List<object> MyData = new List<object>
{
new { test = "test1" },
new { test = "test2" },
new { test = "test3" },
new { test = "test4" },
new { test = "test5" },
new { test = "test6" },
new { test = "test7" },
new { test = "test8" },
new { test = "test9" }
};
protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
List<object> data = this.MyData;
var limit = e.Limit;
if ((e.Start + e.Limit) > data.Count)
{
limit = data.Count - e.Start;
}
List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
e.Total = data.Count;
(sender as Store).DataSource = rangeData;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET Example</title>
<script type="text/javascript">
var myOnKeyPress = function (e, name) {
var up = name == "up",
method = up ? "selectPrevious" : "selectNext",
add = up ? -1 : 1,
last,
store = this.grid.getStore(),
pt = this.grid.getPagingToolbar(),
pageData,
ap,
ptMethod,
callback;
if (this.last !== false && this.lastActive !== false) {
pageData = pt.getPageData();
ap = pageData.activePage;
if (up && !this.hasPrevious() && ap > 1) {
ptMethod = "movePrevious";
callback = function () {
this.selectLastRow();
};
}
if (!up && !this.hasNext() && ap < pageData.pages) {
ptMethod = "moveNext";
callback = function () {
this.selectFirstRow();
};
}
if (ptMethod) {
pt[ptMethod]();
store.on("load", callback, this, { single : true });
return;
}
}
if (!e.shiftKey || this.singleSelect) {
this[method](false);
} else if (this.last !== false && this.lastActive !== false) {
last = this.last;
this.selectRange(this.last, this.lastActive + add);
this.grid.getView().focusRow(this.lastActive);
if (last !== false) {
this.last = last;
}
} else {
this.selectFirstRow();
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server" OnRefreshData="Store_RefreshData">
<Proxy>
<ext:PageProxy />
</Proxy>
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="3" Mode="Raw" />
</BaseParams>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server">
<CustomConfig>
<ext:ConfigItem Name="onKeyPress" Value="myOnKeyPress" Mode="Raw" />
</CustomConfig>
</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" PageSize="3" />
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>
