C# - Web DataGrid adatainak rendezése tetszőleges oszlop szerint

DataGrid 4. rész

forráskód letöltése
Ha a web oldalunkon megjelenítünk egy táblázatban mondjuk egy adatbázis lekérdezés eredményét a DataGrid segítségével, akkor viszonylag egyszerűen megoldhatjuk azt, hogy ez az eredményhalmaz a szerint legyen rendezve, hogy a felhasználó a táblázat melyik oszlopának fejlécére kattint.
A példa használatához hozzunk létre a web szerverünkön egy DataGrid04 virtuális könyvtárat, mely a mellékelt példára mutat. A példához az MS SQL adatbázis szerver Northwind példaadatbázisát használjuk. A példa fordítása előtt az sqlConnection1 komponens ConnectionString-jén valószínűleg változtatni kell annak függvényében, hogy mi az SQL szervert futtató gép neve, milyen bejelentkezési nevünk és jelszavunk van annak eléréséhez!
Vegyük sorra most azokat a lépéseket, mellyel a mellékelt példa létrejött.
Az új web projekt megnyitása után tegyünk egy DataGrid kontrolt a web oldalra.
A Northwind adatbázisban az Orders táblára futtatunk egy lekérdezést, annak minden oszlopára és első tíz sorára. Ehhez tegyük a következőt: válasszuk a View - Server Explorer menüpontot, vagy nyomjuk le a Ctrl + Alt + S billentyűkombinációt. Az itt megjelenő hierarchiában keressük elő azt a számítógépet, melyen fut az SQL szerver. Ezen belül menjünk el a Northwind Orders táblájáig. Ezt fogjuk meg egérrel és húzzuk Drag and Drop-al a web lapra. Ekkor létrejön egy sqlConnection1 és sqlDataAdapter1 komponens, mely tartalmazni fogja a szükséges adatbázis kapcsolatot és a megfelelő select utasítást.
Ez utóbbit módosítsuk. Válasszuk az sqlDataAdapter1 komponenst és keressük elő a SelectCommand.CommandText property-t itt a select szó után írjuk be, hogy top 10, annak érdekében, hogy csak az első tíz sor kerüljön az eredményhalmazba.
Kattintsunk most jobb gombbal az sqlDataAdapter1 komponensen és válasszuk a Generate Dataset menüpontot. A megjelenő ablakban fogadjuk el a felajánlott értékeket.
Jelöljük most ki a DataGrid kontrolt és jobb gomb után válasszuk a Property Builder menüpontot. A megjelenő ablakban a General lapon a DataSource legördíthető listából válasszuk a dataSet11 elemet. A DataMember-nél pedig az Orders tételt. Bezárva ezt az ablakot meg is jelenik a lekérdezés eredménye a DataGrid-ben. Ha most futtatnánk az alkalmazást, akkor viszont nem látnánk semmit! Ehhez még két lépésre szükségünk van. Keressük elő a forráskódban már automatikusan létrejött Load eseménykezelőt a Page_Load függvényt. Itt rendelkeznünk kell arról, hogy a dataSet11 legyen feltöltve és ennek aktuális tartalma legyen a DataGrid-hez kapcsolva.
    private void Page_Load(object sender, System.EventArgs e)
   {
      if (!IsPostBack)
      {
        sqlDataAdapter1.Fill(dataSet11);
        DataGrid1.DataBind();
      }
    }
Ezzel a kezdeti lépésekkel végeztünk is, most nézzük miként érhetjük el, hogy a táblázat fejléceinek elemére történő kattintáskor annak megfelelően legyenek rendezve az adatok.
Válasszuk ismét a DataGrid kontrolt és jobb gomb után a Property Builder menüpontot. A General lapon az Allow sorting checkbox-ot válasszuk ki. Ennek hatására a program futásakor a megjelenő táblázat fejlécében minden szöveg linkként fog működni. Amikor a felhasználó valamely linkre kattint, akkor jön létre a DataGrid SortCommand nevű eseménye. Ezt felhasználva rendezhetjük igény szerint az adatainkat, mivel az nem automatikusan történik meg, hanem ránk van bízva, hogy mit is tegyen ez esetben a programunk. Ezt nem árt megjegyeznünk, hiszen így más célra is használhatjuk ezeket a linkeket nem csak adatrendezésre.
Ha tehát létrejön a SortCommand esemény, ott az „e” paraméter SortExpression property-jében kapjuk meg sztringként annak az oszlopnak a nevét, melyre a kattintás történt, vagyis amelyik szerint a rendezést el kellene végeznünk.
    private void DataGrid1_SortCommand(object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
    {
      Label1.Text = "<b>Rendezve: </b>" + e.SortExpression;      
Ennek céljából új select parancsot fogalmazunk meg, melyben már szerepel a szükséges rendezés, majd ezt követően hozzákötjük az új adatokat a DataGrid-hez.
      sqlDataAdapter1.SelectCommand.CommandText = "SELECT top 10 * FROM Orders ORDER BY " + e.SortExpression;
      sqlDataAdapter1.Fill(dataSet11);
      DataGrid1.DataBind();
    }

DataGrid cikksorozat