GridView Virtual Scrolling in ASP.NET AJAX Virtual Scrolling
If the data source is too large, loading all the data and show in grid is too slow. So maybe you want to show only some data firstly, like the first 50 data rows or the rows fill with the first screen view. Then show the left data when necessary. Kettic asp.net grid view control provide a solution for you. There are two ways Kax.Grid support. One is using virtual scroll bar, the other is using loading on request event. Virtual scroll bar
One way is using virtual scroll bar in asp.net gridview. In this way, web grid control will calculate the total row count in server side, and display the vertical scroll bar's height as total row count value. However, the gridview only display the first screen data items out. While you drag or roll down the scroll bar, the left data items will be load and show dynamically. Additional, while your scrolling, a label will popup to show which page is displaying currently. To enable virtual scroll bar, you need: 1. Set ClientSettings.Scrolling.AllowScroll and ClientSettings.Scrolling.EnableVirtualScrollPaging properties to True. 2. Set the AllowPaging and AllowCustomPaging properties to True. 3. Set the VirtualItemCount property to the total row count in the data source. 4. Use NeedDataSource event to load new record in the data source.  ASPX example code:
<kettic:KaxCodeBlock ID="KaxCodeBlock1" runat="server">
<script type="text/javascript">
function HandleScrolling(e) {
var grid = $find("<%=KaxGrid1.ClientID %>");
var scrollArea = document.getElementById("<%= KaxGrid1.ClientID %>" + "_GridData");
if (IsScrolledToBottom(scrollArea)) {
var currentlyDisplayedRecords = grid.get_mainView().get_pageSize() * (grid.get_mainView().get_currentPageIndex() + 1);
if (currentlyDisplayedRecords < 100) {
$find("<%= KaxAjaxConsole1.ClientID %>").ajaxRequest("LoadMoreRecords");
}
}
}
function IsScrolledToBottom(scrollArea) {
var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight; return currentPosition == scrollArea.scrollHeight;
}
</script>
</kettic:KaxCodeBlock>
<kettic:KaxAjaxConsole ID="KaxAjaxConsole1" runat="server" OnAjaxRequest="KaxAjaxConsole1_AjaxRequest">
<AjaxSettings>
<kettic:AjaxSetting AjaxControlID="KaxGrid1">
<UpdatedControls>
<kettic:AjaxUpdatedControl ControlID="KaxGrid1" WaitIndicatorID="KaxAjaxWaitIndicator1" />
</UpdatedControls>
</kettic:AjaxSetting>
</AjaxSettings>
</kettic:KaxAjaxConsole>
<kettic:KaxAjaxWaitIndicator ID="KaxAjaxWaitIndicator1" runat="server" Height="75px"
Width="75px" Transparency="25">
<img alt="Please waiting..." src='<%= KaxAjaxWaitIndicator.GetWebResourceUrl(Page, "waiting.gif") %>' />
</kettic:KaxAjaxWaitIndicator>
<kettic:KaxGrid ID="KaxGrid1" runat="server" Skin="MetroBlue" DataSourceID="SqlDataSource1"
AllowSorting="True" AllowPaging="true" PageSize="10" Width="600px" GridLines="None">
<PagerStyle Visible="False" />
<MainView TableLayout="Fixed" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst">
</MainView>
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="150px" />
<ClientEvents OnScroll="HandleScrolling" />
</ClientSettings>
</kettic:KaxGrid>
Load on request
The other way is loading on request. In this way, when the scroll bar reaches the endpoint, asp.net grid view control will load the new records and add them to the end of the page programmatically.
To enable load on request, you need:
1. Set AllowPaging property to True. But Set PagerStyle.Visible property to False.
2. Add javascript to calculate whether the scroll bar is at the bottom, and if true, request to add new records to the grid. And bind this javascript as the OnScroll event of the grid.
ASPX sample code:
<kettic:KaxCodeBlock ID="KaxCodeBlock1" runat="server">
<script type="text/javascript">
function HandleScrolling(e) {
var grid = $find("<%=KaxGrid1.ClientID %>");
var scrollArea = document.getElementById("<%= KaxGrid1.ClientID %>" + "_GridData");
if (IsScrolledToBottom(scrollArea)) {
var currentlyDisplayedRecords = grid.get_mainView().get_pageSize() * (grid.get_mainView().get_currentPageIndex() + 1);
if (currentlyDisplayedRecords < 100) {
$find("<%= KaxAjaxConsole1.ClientID %>").ajaxRequest("LoadMoreRecords");
}
}
}
function IsScrolledToBottom(scrollArea) {
var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight; return currentPosition == scrollArea.scrollHeight;
}
</script>
</kettic:KaxCodeBlock>
<kettic:KaxAjaxConsole ID="KaxAjaxConsole1" runat="server" OnAjaxRequest="KaxAjaxConsole1_AjaxRequest">
<AjaxSettings>
<kettic:AjaxSetting AjaxControlID="KaxGrid1">
<UpdatedControls>
<kettic:AjaxUpdatedControl ControlID="KaxGrid1" WaitIndicatorID="KaxAjaxWaitIndicator1" />
</UpdatedControls>
</kettic:AjaxSetting>
</AjaxSettings>
</kettic:KaxAjaxConsole>
<kettic:KaxAjaxWaitIndicator ID="KaxAjaxWaitIndicator1" runat="server" Height="75px"
Width="75px" Transparency="25">
<img alt="Please waiting..." src='<%= KaxAjaxWaitIndicator.GetWebResourceUrl(Page, "waiting.gif") %>' />
</kettic:KaxAjaxWaitIndicator>
<kettic:KaxGrid ID="KaxGrid1" runat="server" Skin="MetroBlue" DataSourceID="SqlDataSource1"
AllowSorting="True" AllowPaging="true" PageSize="10" Width="600px" GridLines="None">
<PagerStyle Visible="False" />
<MainView TableLayout="Fixed" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst">
</MainView>
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="150px" />
<ClientEvents OnScroll="HandleScrolling" />
</ClientSettings>
</kettic:KaxGrid>
C# sample code:
protected void KaxAjaxConsole1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
KaxGrid1.PageSize = 10 + KaxGrid1.PageSize;
KaxGrid1.Rebind();
}
| 
