A példa használatához hozzunk létre a web szerverünkön egy DataGrid06 virtuális könyvtárat, mely a mellékelt példára mutat. A program futtatása után a TextBox-ok és CheckBox-ok értekeinek változtatása csak akkor kerül érvényesítésre, ha a DataGrid-ben egy másik oldalra lapoz.
Ahhoz, hogy példánkban szereplő DataGrid-ben legyen mit lapozni, állítsunk elő első lépésként egy olyan adathalmazt, mely 100 sort tartalmaz. Ez már elég nagy ahhoz, hogy ne egy táblázatban jelenítsük meg, hanem több lapra tördeljük.
A példa egyszerűségének kedvéért most az adatokat programból generáljuk. Ehhez létrehozunk egy CreateDataView nevű függvényt, mely egy DataView-ban szolgáltatja a létrehozott adathalmazt, melyet a DataGrid már képes megjeleníteni.
Létrehozunk egy DataTable-t két oszloppal. Az elsőbe az adott sor sorszámát helyezzük el, míg a másodikba egy véletlenszerű számot írunk majd.
private DataView CreateDataView()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Row", typeof(int)));
dt.Columns.Add(new DataColumn("Value", typeof(string)));
Egy új sor létrehozásához szükségünk lesz egy DataRow osztályra.
DataRow row;
Random r = new Random();
A 100 sor generálásához egy for ciklust használunk.
for (int i=0; i<100; i++)
{
A ciklusmagban létrehozunk egy új sort, majd értéket adunk a két mezőnek, végül a létrehozott sort hozzáadjuk a DataTable-hoz.
row = dt.NewRow();
row[0] = i;
row[1] = r.Next(int.MaxValue).ToString("### ### ### ### ###");
dt.Rows.Add(row);
}
Az adatok feltöltése után létrehozunk egy új DataView osztályt a DataTable-t felhasználva, melyet a függvény visszatérési értékének adunk.
return new DataView(dt);
}
Az adataink most már rendelkezésre állnak, így tegyünk fel egy DataGrid kontrolt és kapcsoljuk össze azokat. Ehhez a Page osztály Load eseményét fogjuk használni. A DataGrid
private void Page_Load(object sender, System.EventArgs e)
{
...
if (!IsPostBack)
{
...
DataGrid1.DataSource = CreateDataView();
DataGrid1.DataBind();
Label1.Text = DataGrid1.PageCount.ToString();
}
}
Most már megjelennek a táblázatunkban az adatok, de jelenleg még egyszerre mind a száz sor. Ahhoz, hogy ez lapokra legyen osztva a következőt tegyük: kattintsunk jobb gombbal a DataGrid-en és válasszuk a Property Builder menüpontot. Itt a Paging lapon találjuk azokat a tulajdonságokat, melyek a lapokra való osztással függnek össze. Ebből most nézzük csak az Allow Paging checkbox-ot, melyet kijelölve engedélyezzük a táblázat lapokra osztását. Hogy egy lapon hány sor jelenjen meg a táblázatban, azt a Page Size mezőbe írt szám határozza meg.
Ha bezárjuk ezt az ablakot és most futtatjuk a programot, akkor már csak az engedélyezett számú sorok jelennek meg a százból és megjelennek azok a linkek is, melyek a lapozásban segítenek bennünket. Ezek viszont most még nem működnek, hiába is kattintunk rájuk. Hogy ez is életre keljen, a DataGrid-ben fel kell használnunk annak PageIndexChanged nevű indexét. Ez az esemény akkor jön létre, amikor a felhasználó rákattint valamely linkre, mely a lapozást segíti elő.
Paraméterként kapunk egy számot a DataGridPageChangedEventArgs típusban lévő NewPageIndex property-n keresztül. Ebből fogjuk tudni, hogy melyik az a sor száma, amelyik a kezdő sor lesz a táblázatban. Ezt akár tetszőlegesen módosíthatjuk is igény szerint.
private void DataGrid1_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
Label2.Text = e.NewPageIndex.ToString();
A DataGrid CurrentPageIndex property-jébe kell írnunk annak a sornak a számát, amelyiket elsőként szeretnénk viszontlátni a táblázatban. Ez most egyenlő lesz a kapott sorszámmal.
DataGrid1.CurrentPageIndex = e.NewPageIndex;
Ezek után újra kell generálni az adatokat és ismét a DataGird-hez kötni. Erre azért van szükség, mert amikor a felhasználó a számára megjelenített web oldalon valamely lapozó linkre kattint, akkor ezzel egy újabb kérést küld a weben keresztül alkalmazásunk felé. Mivel alkalmazásunk ekkor újraindul, így nem „emlékezhet” a már egyszer létrehozott adatokra. Más az eset persze, ha használjuk a Cache-t, vagy az adatokat nem magunk generáljuk, hanem mondjuk adatbázisból kérdezzük le.
DataGrid1.DataSource = CreateDataView();
DataGrid1.DataBind();
}
Ezzel a táblázatunk már lapozhatóvá válik. Ha most indítjuk a programunkat, akkor ezzel már nem lesz probléma.
Nézzük most, milyen lehetőségeink vannak arra vonatkozólag, hogy lapozással kapcsolatos tulajdonságokon keresztül hogyan befolyásolhatjuk a megjelenő linkeket, illetve a lapozás folyamatát.
A PageSize property-ről már volt szó: itt adhatjuk meg, hogy hány sora lehet a táblázatnak egy oldalon. Ha az adataink száma mondjuk 15 és a PageSize értéke 10, akkor értelemszerűen a második oldalon csak 5 sor fog megjelenni, tehát a PageSize csak a maximum sorok számát adja meg.
DataGrid1.PageSize = Convert.ToInt32(TextBox1.Text);
Arról is rendelkezhetünk, hogy a táblázat alján megjelenő linkekből - melyekkel egy-egy konkrét oldalra ugorhatunk - hány darab lehet. Ehhez a PageButtonCount property-t használhatjuk. Ha több oldal lenne, mint amekkora számot itt megadunk, akkor a felsorolás elején és végén szükség szerint egy olyan link jelenik meg, mely három pontot tartalmaz. Erre kattintva a linkeket is lapozni lehet.
DataGrid1.PagerStyle.PageButtonCount = Convert.ToInt32(TextBox2.Text);
A DataGrid PagerStyle property-jén keresztül állíthatjuk be a lapozó sor stílusát. Ezen belül a Mode property határozza meg, hogy milyen linkek jelenjenek meg. A NextPrev érték megadása esetén két olyan link jelenik meg, mellyel az előző, illetve a következő oldalra ugró linket kapunk. Ha a megadott érték NumericPages, akkor olyan linkek jelennek meg, melyekkel közvetlenül egy megadott oldalra ugorhatunk.
DataGrid1.PagerStyle.Mode = PagerMode.NumericPages;
A PagerStyle Position property-je rendelkezik arról, hogy a megjelenő linkek hova kerüljenek a táblázatban:
- Top - a tetejére
- Bottom - az aljára
- TopAndBottom - a tetejére és az aljára is.
Ha a Mode property NextPrev értéket kap, akkor megadhatjuk a megjelenő két link feliratát is a NextPageText és a PrevPageText property-ken keresztül:
DataGrid1.PagerStyle.NextPageText = "Következő |";
DataGrid1.PagerStyle.PrevPageText = "| Előző | ";
A PagerStyle property CopyFrom függvényét használva egy már elkészített stílus tulajdonságait másolhatjuk le és alkalmazhatjuk a táblázatunk lapozásért felelős sorára.
Style s = new Style();
s.BackColor = Color.AliceBlue;
s.Font.Bold = true;
DataGrid1.PagerStyle.CopyFrom(s);
A MergeWith függvény segítségével összefűzhetünk egy már meglévő stílust a már megadott értékekkel.
A PagerStyle Visible property-jével átmenetileg letilthatjuk, vagy engedélyezhetjük a láthatóságát a táblázat ezen sorának.
Végül a Reset függvény hívása egy lépésben visszaállítja a PagerStyle property alapértelmezett tulajdonságait.