C# - Web DataGrid

DataGrid 6. rész

forráskód letöltése
Web oldalainkon megjelenítendő táblázatok gyakran tartalmaznak annyi sort, hogy annak megjelenítése egy oldalon már nem lenne célszerű. Ekkor a szokásos módszer az, hogy több „oldalra” osztjuk a táblázatot és lehetőséget biztosítunk arra, hogy a felhasználó lépkedjen e lapok között. Ekkor a web lapunkon a teljes táblázatból mindig csak néhány sor látható, majd ez lapozható előre-hátra, illetve ugorhatunk egy tetszőleges oldalra is.
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.

DataGrid cikksorozat