仮想スクロール

仮想スクロールを使用すると、大量データを表示するときにグリッドのレンダリングをスピードアップできます。この機能により、グリッドはサーバーへのコールバックからデータを取得できるため、滑らかなスクロールを維持しながらデータロードを高速化できます。

次の例は、ScrollingSettings、VirtualizationSettings、およびCallbackSettingsプロパティを設定して行と列に仮想スクロールを実装する方法を示します。このマークアップは*.aspx ページの本体のコンテンツに追加できます。

ソースビュー

ソースビュー	コードのコピー
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <%--Bind the grid to a datasource--%> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0; Data Source=\|DataDirectory\|\C1NWind.mdb;Persist Security Info=True" ProviderName="System.Data.OleDb" SelectCommand="SELECT * FROM ORDERS"> </asp:SqlDataSource> <%--Set C1GridView's ScrollingSettings.VirtualizationSettings.Mode and CallbackSettings.Action--%> <cc1:C1GridView ID="C1GridView1" runat="server" DataSourceID="SqlDataSource1" Height="400px"> <CallbackSettings Action="Scrolling" /> <ScrollingSettings Mode="Both"> <VirtualizationSettings Mode="Both" /> </ScrollingSettings></cc1:C1GridView>

コードのコピー

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">      
     <asp:ScriptManager ID="ScriptManager1" runat="server">       
</asp:ScriptManager> 
<%--Bind the grid to a datasource--%>
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;
    Data Source=|DataDirectory|\C1NWind.mdb;Persist Security Info=True"
 ProviderName="System.Data.OleDb" SelectCommand="SELECT * FROM ORDERS">       
    </asp:SqlDataSource>          
 <%--Set C1GridView's ScrollingSettings.VirtualizationSettings.Mode and 
                        CallbackSettings.Action--%>           
  <cc1:C1GridView ID="C1GridView1" runat="server" DataSourceID="SqlDataSource1" 
  Height="400px">        
  <CallbackSettings Action="Scrolling" />                
  <ScrollingSettings Mode="Both">                       
  <VirtualizationSettings Mode="Both" />                 
  </ScrollingSettings></cc1:C1GridView>

上記の例のような仮想スクロールを実装するには、以下の手順に従います。

グリッドをデータソースにバインドします。
ScrollingSettingsプロパティを Bothに設定し、仮想スクロール機能を有効にします。
VirtualizationSettingsのMode値をRows、Columns、またはBothに設定して、行や列のスクロールを許可します。
ActionプロパティをScrollingに設定します。これは、スクロール時にサーバーへのコールバックを使用するようにグリッドに指示します。CallbackSettingsプロパティによって決定される仮想スクロールモードには、次の２つがあります。１つは静的モードで、クライアントはすべてのデータを利用できますが、行はスクロール時にレンダリングされます。もう１つは動的モードで、Scrolling値によって設定されます。データの新しい部分は、レンダリングが必要になったときに、サーバーに要求されます。