C# - Web DataGrid kontrol használata

DataGrid 2. rész

forráskód letöltése
Sorozatunk mostani részében azt vizsgáljuk, hogy miként helyezhetünk egy táblázat minden sorába olyan linket, melynek segítségével a felhasználó kiválaszthat egy számára megfelelő sort a táblázatból. Hogy e kiválasztott sornak milyen sorsot szánunk, az már csak az adott feladatunktól függ.
Megvizsgáljuk továbbá azt is, hogy miként tudjuk a táblázatot egyedi külsővel ellátni, valamint azt, hogy hogyan hozhatunk létre programból egy adattáblát és helyezhetünk el benne adatokat a megjelenítéshez.
Adatokat úgy is megjeleníthetünk, hogy azokat nem egy adatbázisból vesszük, hanem programból létrehozzuk. Ezt a létrehozást is csak egyszer tesszük meg, majd a létrejött adathalmazt elhelyezzük a Cache-ben, így a következő kérés érkezésekor már nem kell újra generáltatnunk az adatokat, hanem csak előszedni a Cache-ből azokat.
Ezekre a műveletekre a Load eseménynél kerül sor.
    private void Page_Load(object sender, System.EventArgs e)
    {
      DataTable FDataTable;
      DataRow row;
A Cache-re majd SoftwareOnlineData névvel helyezzük el az adattáblának, így első lépésként azt kell ellenőriznünk, hogy a Cache tartalmaz már ilyen nevű objektumot, vagy még nem.
      if (Cache["SoftwareOnlineData"] == null) 
      {
Ha még nincs adat a Cache-ben, akkor létre kell hoznunk azt.
        FDataTable = new DataTable();
Az új táblába felveszünk három oszlopot.
        FDataTable.Columns.Add(new DataColumn("Name", typeof(string)));
        FDataTable.Columns.Add(new DataColumn("Value1", typeof(int)));
        FDataTable.Columns.Add(new DataColumn("Value2", typeof(double)));
Majd egy ciklussal felveszünk a táblába 10 sornyi adatot is.
        for (int i = 0; i<10; i++)
        {
Ehhez első lépésként egy új sort kell kérnünk a táblától a NewRow függvénnyel.
          row = FDataTable.NewRow();
Ezt követően minden cellának értéket adunk.
          row[0] = Convert.ToChar(i+64);
          row[1] = i * 1958;
          row[2] = Convert.ToDouble(i) / 1958;
Végezetünk pedig a táblához adjuk a létrehozott és feltöltött sort a Rows property Add függvényével.
          FDataTable.Rows.Add(row);
        }
Most már elhelyezhetjük a létrehozott és adatokkal feltöltött táblát a Cache-ben.
        Cache["SoftwareOnlineData"] = FDataTable;
Végül jelezzük is a web oldalon, hogy az adat most lett létrehozva. Megfigyelhető a programban, hogy ez a felirat csak egyszer, az első kérés lefutásakor jelenik meg, majd a következő kérések érkezésekor már a Cache-ből jön az adat.
        Label1.Text = "DataTable létrehozva";
      }
      else 
      {
A feltétel else ága fut, ha a keresett adat már szerepel a Cache-ben. Ekkor nincs más dolgunk, mint az elhelyezett táblát kiolvasni onnan és jelezni a web lapon, hogy most már Cache-ből jönnek az adatok.
        FDataTable = (DataTable)Cache["SoftwareOnlineData"];        
        Label1.Text = "DataTable a Cache-ből származik";
      }    
Miután a tábla rendelkezésre áll a két mód közül valamelyik alapján, már csak hozzá kell kötni a DataGrid-hez, hogy az adatok meg is jelenjenek.
      DataGrid1.DataSource = new DataView(FDataTable);
      DataGrid1.DataBind();
    }
Nézzük most az egyedi kinézet kialakítását. A múltkor a DataGrid AutoFormat funkcióját használtuk arra, hogy ne csak egy egyszerű táblázatot kapjunk. Ha megnézzük a Properties ablakot, ott a Style kategóriában sok azonos típusú property-t találunk, melyeknek mindegyike a DataGrid egy-egy objektumának kinézetéért felelős. Ezeket a property-ket használva már jelentősen befolyásolhatjuk az eredmény táblázat megjelenését.
További lehetőség a CellPadding és CellSpacing property. Ezekkel a cellán belüli tartalom távolságát a cella szélétől adhatjuk meg, illetve cellák közötti távolságot szabályozhatjuk.
A GridLines property-ben előírhatjuk, hogy a táblázatnak csak a sorai, vagy csak az oszlopai legyenek körvonalazva, vagy esetleg mindkettő, vagy akár egyik se.
A Border... kezdetű property-k segítségével a táblázat keretének tulajdonságait adhatjuk meg, míg a BackImageUrl felhasználásával egy tetszőleges háttérképet adhatunk a táblázathoz.
Helyezzünk el most egy új oszlopot, melyben egy link jelenik meg, amellyel kiválaszthatunk egy tetszőleges sort.
Ehhez kattintsunk a Columns property-re. A megjelenő szerkesztő ablak Available Columns hierarchiájában keressük elő a Button Column – Select elemet és jelöljük ki, majd helyezzük át a Selected Columns listába. Ez után a Text mezőben megadhatjuk, hogy mi legyen a megjelenő link felirata. A Button Type combobox-ból választhatjuk ki a típust, mely most LinkButton legyen. Ennek hatására egy <a href=... kód jelenik meg a HTML kódban. Itt lehetőségünk van PushButton választásával a link helyett egy nyomógombot is megjeleníteni, melynek funkciója egyezik a linkkel.
Most már csak az a kérdés, hogy ha a felhasználó kiválaszt egy linket, akkor erről miként szerezhetünk tudomást. A válasz egyszerű: csak kezelnünk kell az ItemCommand eseményt.
Felmerülhet az a kérdés, hogy egy adathalmazban nem lehet tudni a sorok számát előre, ráadásul ez dinamikusan változhat is, így miként tudjuk azonosítani az egyes linkek alapján, hogy melyik sor lett kiválasztva az adatok közül. Ezzel a kérdéssel viszont nem kell foglalkoznunk, a problémát megoldja helyettünk az ASP.NET, mely olyan web oldalt generál, ahol a linkek automatikusan olyan paramétereket kapnak, melyek után alkalmazásunk egyértelműen azonosítani tudja a kiválasztott sort.
Így az ItemCommand eseménynél csak a kapott DataGridCommandEventArgs típusú paramétert kell felhasználnunk, melyből egyszerűen kiolvashatjuk a kiválasztott sor adatait, melyet az egyszerűség kedvéért most egy ListBox-ba helyezünk.
    private void DataGrid1_ItemCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
    {
      ListBox1.Items.Add(e.Item.Cells[1].Text+" - "+e.Item.Cells[2].Text+" - "+e.Item.Cells[3].Text);
    }
Kiválasztás után látható, hogy a táblázat adott sora már stílust kap. Ezt a SelectedItemStyle property-ben megadott tulajdonságokkal érhetjük el.

DataGrid cikksorozat