Stránkování v ovládacím prvku DataGrid

11. března 2004

•

Pokud vypisujete například seznam položek z databáze, který se nevejde na jednu obrazovku, jistě vás napadne použít stránkování. Ovládací prvek DataGrid má v sobě již připraveny nástroje pro snadnou realizaci zobrazování svého obsahu po jednotlivých stránkách, nemusíte tedy složitě vytvářet vlastní zobrazovací engine, ale pouze jej v případě potřeby trochu zmodifikujete.

Co je tedy potřeba udělat pro spuštění stránkování? V zásadě pouze tři jednoduché úkony:

povolit stránkování vlastností AllowPaging
nastavit počet záznamů na stránce pomocí PageSize
implementovat metodu ošetřující událost OnPageIndexChanged

Nastavení DataGridu

V následující ukázce si provedeme výpis produktů z ukázkové databáze Northwind, ale pokud chcete, můžete si ukázku u sebe vyzkoušet na jakékoli jiné databázi. Pokud neuvedete vlastnost PageSize, bude použito standardní nastavení velikosti stránky na deset záznamů.

<%@ Page language=“c#“ Codebehind=“WebForm1.aspx.cs“ AutoEventWireup=“false“ Inherits=“datagrid.WebForm1″ %>
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN“ >
<HTML>
  <HEAD>
    <title>WebForm1</title>
    <meta name=“GENERATOR“ Content=“Microsoft Visual Studio .NET 7.1″>
    <meta name=“CODE_LANGUAGE“ Content=“C#“>
    <meta name=“vs_defaultClientScript“ content=“JavaScript“>
    <meta name=“vs_targetSchema“ content=“http://schemas.microsoft.com/intellisense/ie5″>
  </HEAD>
  <body MS_POSITIONING=“GridLayout“>
    <form id=“Form1″ method=“post“ runat=“server“>
     <asp:DataGrid id=“DG“ runat=“server“ AllowPaging=“True“ PageSize=5>
     </asp:DataGrid>
    </form>
  </body>
</HTML>

Provedeme implementaci metody DG_PageIndexChanged, která je volána při události PageIndexChanged. V metodě zajistíme načtení dat z databáze, nastavení příslušné stránky výpisu a naplnění DataGridu načtenými daty. Všimněte si prosím, že vlastnost CurrentPageIndex je vlastností DataGridu a nikoli datového zdroje. A proč na toto upozorňuji? Proto, aby si každý z vás uvědomil, že tento způsob stránkování není příliš efektivní. Proč tomu tak je, bude podrobněji vysvětleno na konci tohoto článku.

private void DG_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
  SqlConnection conn1=new
  SqlConnection(ConfigurationSettings.AppSettings[„conn_DB“]);
  conn1.Open();
  string SQL_Dotaz;
  SQL_Dotaz=“SELECT * FROM Products“;
  SqlDataAdapter cmd1=new SqlDataAdapter(SQL_Dotaz,conn1);
  DataSet ds=new DataSet();
  cmd1.Fill(ds);
  cmd1.Dispose();
  // pristup do db uz nepotrebujeme zavreme je tedy
  conn1.Close();
  conn1 = null;
  DG.CurrentPageIndex=e.NewPageIndex;
  DG.DataSource=ds;
  DG.DataBind();
}

V příkladu je použito načtení konfiguračních paremetrů (v tomto případě connection string pro připojení do SQL serveru) ze souboru web.config. Podrobnější informace o použití souboru web.config pro ukládání konfiguračních parametrů aplikace najdete v článku o konfiguraci ASP.NET aplikací. Výsledek činnosti si můžete prohlédnout na následujícím obrázku:

DataGrid - základní vzhled

Nelíbí se vám způsob, jakým se listuje po stránkách? Nevadí, provedeme úpravy vzhledu a zmodifikujeme i nastavení vlastností PagerStyle, kde si přesně zadáme, jak mají odkazy pro stránkování vypadat:

<asp:DataGrid id=“DG1″ runat=“server“ AllowPaging=“True“ PageSize=“5″
PagerStyle-NextPageText=“Další“
PagerStyle-PrevPageText=“Předchozí“>
</asp:DataGrid>

Změnami vlastností PagerStyle-NextPageText a PagerStyle-PrevPageText jsme změnili text listovacích odkazů z původních „špičatých“ závorek na vlastní texty. Výsledek změny je opět na obrázku:

DataGrid - změna textu odkazu

Kromě změny textu odkazu lze měnit i barvy textu, pozadí či font, nebo dokonce přiřadit vlastní CSS styl:

<asp:DataGrid id=“DG2″ runat=“server“ AllowPaging=“True“ PageSize=“5″
  PagerStyle-NextPageText=“Další“
  PagerStyle-PrevPageText=“Předchozí“
  PagerStyle-BackColor=“#999900″
  PagerStyle-ForeColor=“#ccffff“
  PagerStyle-Font-Name=“Tahoma“
  PagerStyle-Font-Bold=“True“>
</asp:DataGrid>

Myslím, že provedené změny není nutno podrobněji popisovat, výsledný obrázek je mnohem výmluvnější:

DataGrid - restyling oblasti odkazů

Pokud se vám nelíbí stránkování pomocí odkazů „dopředu“ a „dozadu“, můžete změnou vlastnosti PagerStyle-Mode ze standardní hodnoty PrevNext na hodnotu NumericPages docílit toho, že budou uvedeny odkazy na jednotlivé stránky. Počet takto zobrazených odkazů lze změnit pomocí vlastnosti PagerStyle-PageButtonCount, která má standardní hodnotu 10. Jestliže je počet stran vyšší než nastavený počet odkazů, je zobrazen požadovaný počet odkazů a doplněn odkaz, pomocí kterého lze přejít na další sadu odkazů na stránky. Současně dojde k přechodu na další stránku a je umožněno se vrátit zpět.

<asp:DataGrid id=“DG3″ runat=“server“ AllowPaging=“True“ PageSize=“5″
  PagerStyle-BackColor=“#999900″
  PagerStyle-ForeColor=“#ccffff“
  PagerStyle-Font-Name=“Tahoma“
  PagerStyle-Font-Bold=“True“
  PagerStyle-Mode=“NumericPages“
  PagerStyle-PageButtonCount=“7″>
</asp:DataGrid>

O provedených změnách se opět nejlépe přesvědčíte pohledem na obrázek:

DataGrid - změna metody listování

Další záležitostí ohledně stránkovaní v DataGridu je určení polohy odkazů pro listování. Změna umístění ze standardní dolní pozice se provede pomocí vlastnosti PagerStyle-Position, která může nabývat hodnot Bottom, Top a TopAndBottom. Odkazy pro listovaní pak budou umístěny tam, kde je budeme požadovat.

<asp:DataGrid id=“DG4″ runat=“server“ AllowPaging=“True“ PageSize=“5″
  PagerStyle-BackColor=“#999900″
  PagerStyle-ForeColor=“#ccffff“
  PagerStyle-Font-Name=“Tahoma“
  PagerStyle-Font-Bold=“True“
  PagerStyle-Mode=“NumericPages“
  PagerStyle-PageButtonCount=“7″
  PagerStyle-Position=“TopAndBottom“>
</asp:DataGrid>

Jak se projeví změna nastavení umístění stránkování je opět nejlépe patrné z ilustračního obrázku:

DataGrid - změna pozice listování

Naposledy bych se ještě zmínil o možnosti zarovnání odkazů na listování v rámci buňky, ve které jsou umístěny. Pro zarovnání ve vodorovném směru slouží vlastnost PagerStyle-HorizontalAlign, nabývající hodnot Left, Right, Center a NoSet. Pro zarovnání ve svislém směru pak použijete vlastnost PagerStyle-VerticalAlign, která může nabývat hodnot Middle, Top, Bottom a NoSet.

<asp:DataGrid id=“DG5″ runat=“server“ AllowPaging=“True“ PageSize=“5″
  PagerStyle-BackColor=“#999900″
  PagerStyle-ForeColor=“#ccffff“
  PagerStyle-Font-Name=“Tahoma“
  PagerStyle-Font-Bold=“True“
  PagerStyle-Mode=“NumericPages“
  PagerStyle-PageButtonCount=“7″
  PagerStyle-Position=“Top“
  PagerStyle-HorizontalAlign=“Right“>
</asp:DataGrid>

V příkladu je použito vodorovné zarovnání vpravo a listovací číselný box je umístěn nahoře. Výsledek změn je opět vidět na obrázku:

DataGrid - finální úprava

Povšimněte si, že i když modifikuji dost zásadním způsobem provedení listovaní stránkami, nemusím vůbec zasahovat do obsluhujícího kódu v pozadí.

Využití CustomPaging

Pozorný čtenář či znalec problematiky jistě namítne, že toto řešení je pomalé a zbytečně „žere“ výkon serveru. Ti znalí mohou s klidem zbylý text vynechat, těm ostatním se pokusím v krátkosti přiblížit, v čem je problém.

Do objektu DataSet, který je použit jako zdroj dat pro DataGrid, je vždy načítána celá sada záznamů (třeba i stovky tisíců), přestože je jich nakonec zobrazeno deset či dvacet. Ovšem naplnění DataSetu obrovským množstvím záznamů zabere nějaký čas, takže jak do tabulky přibývají záznamy, dochází k postupnému poklesu výkonu aplikace.

Co s tím? Naštěstí DataGrid umožňuje implementovat volitelné stránkování CustomPaging, které povolíte nastavením vlastnosti AllowCustomPaging na true, a následně implementujete metodu ošetřující událost OnPageIndexChanged, která (například ve spolupráci s uloženou procedurou na MS SQL) zajistí naplnění objektu DataSet pouze těmi daty, kterých je skutečně třeba.

Pozor, při použití uživatelského stránkování nelze dost dobře použít vestavěné řazení v DataGridu, je tedy více než vhodné implementovat svoje vlastní řazení. Proč tomu tak je, to už je námět na další článek, v němž vám přinesu i funkční ukázku.