DevExtreme DataGrid komponenta u Angular aplikaciji

DevExtreme DataGrid komponenta u Angular aplikaciji

DevExpress je skup alata i kontrola koji pomažu pri izradi korisničkog grafičkog sučelja, te nudi mnoštvo HTML5/JS widgeta. Na taj način štedi se vrijeme programeru, a ujedno ih je vrlo jednostavno prilagoditi prema potrebi.

DevExtreme is a component suite for creating highly responsive web applications for touch devices and traditional desktops. The suite includes 50+ UI components ready to use with jQuery, Angular, AngularJS, Knockout, ASP.NET MVC or ASP.NET Core: data grid, interactive charts, data editors, navigation and multi-purpose widgets designed to look and behave harmoniously in any browser. – Izvor

Integracija DevExtreme komponenti i Angular projekta vrlo je jednostavna. U već kreiranu Angular aplikaciju potrebno je dodati najnoviju verziju DevExtreme paketa na sljedeći način:

$ npm install devextreme@19.1 devextreme-angular@19.1 –save –save-exact

čime je omogućeno korištenje DevExpress komponenti.

DevExtreme DataGrid NPM

Nakon što pokušamo pokrenuti projekt, dobijemo sljedeću poruku:

DevExtreme Stream Error

Kako bismo riješiti taj problem, potrebno je instalirati stream pomoću naredbe $ npm install stream.

Sljedeći korak je u datoteku angular.json unutar ‘styles’ dodati dx.common.css i dx.light.css kako bismo primijenili zadanu temu na željene komponente. Temu je moguće odabrati na službenoj stranici.

DevExtreme Styles

Posljednja stvar koju je potrebno napraviti kako bi se mogle koristiti DevExtreme komponente je dodati u ngModule naziv komponente koju želimo prikazati. U ovom primjeru to je DxDataGridModule, a to činimo na sljedeći način:

DxDataGridModule

Nakon toga u HTML-u kreiramo tablicu i dobijemo sljedeći rezultat.
U prikazu se vidi kreirana tablica s podacima koje možemo filtrirati po bilo kojem parametru i sortirati ih po želji. Dakle, moguće je automatsko sortiranje i filtriranje podataka uvozom DevExtreme komponente. Manipulacija podacima je vrlo jednostavna.

DxDataGridModule

Kako bismo utjecali na izgled tablice, potrebno je koristiti selektor pseudoklase “ng-deep”. (Inače, ukoliko imamo više komponenti, potrebno je ispred ::ng-deep dodati ‘:hostkako bi se CSS primjenjivao isključivo na tu komponentu, a ne globalno. No, budući da ovaj primjer ima samo jednu komponentu, ostavit ćemo ovako.

Pomoću sljedećeg koda učinit ćemo zaglavlje tablice tamno sivim, a nazive zaglavlja boldanim:

DevExtreme bold

Sljedeća stavka je omogućavanje brisanja i uređivanja podataka. To je potrebno učiniti unutar taga gdje se navodi način uređivanja, a isto tako moguće je pojedinačno odrediti hoće li biti dopušteno brisanje, uređivanje ili dodavanje novog reda pomoću true/false vrijednosti.
To se čini naredbom “mode”.
U našem primjeru omogućeno je uređivanje, dodavanje i brisanje u popup prozoru, a osim njega postoji još i “row mode”, “batch mode”, “cell mode” i “form mode”.

DevExtreme dxo-editing

U podnožju tablice može se dodati sažetak svakog stupca, tzv. “totalItems niz”. Najjednostavniji način je da se proslijedi naziv stupca koji se želi sumirati i na koji način, ovisno o tome koji podaci se žele dobiti. U ovom primjeru prikazat će se sažetak po broju korisnika, smješten ispod stupca “Ime”. Također, u prikazu se vidi kako se broj povećava dinamično, odnosno ovisno o dodavanju novih ili brisanju postojećih korisnika.

DisplayFormat DevExtreme

DisplayFormat služi kako bismo samo odredili što će pisati u podnožju tablice, umjesto predefiniranih “Sum/Count…DevExtreme formata, dok mu se pomoću {0} prosljeđuje vrijednost koju želimo prikazati.

DevExtreme DataGrid Demo

Ukoliko se želi primijeniti dodatni efekt na “hover” kod pojedinog elementa unutar komponente, potrebno je pozvati metodu (onCellHoverChanged) = “hover($event)”
unutar dx-data-grid taga u html dokumentu, dok je unutar .ts komponente tu metodu potrebno definirati na sljedeći način:

DevExtreme Hover

Navedena metoda prikazuje nekoliko uvjeta pomoću kojih govorimo komponenti da, ukoliko je tip retka ‘data’, (to je potrebno kako se efekt ne bi odnosio na naslove, odnosno zaglavlje tablice) i ukoliko je riječ o stupcu ‘Ime’, tada želimo da event mouseover za posljedicu ima da podatak unutar odabranog elementa ćelije bude BOLDAN i obojan žutom bojom, u suprotnom će boja biti crna i fontWeight normal.

DevExtreme Hover demo

U naš primjer dodat ćemo još jedan stupac pod nazivom “Broj stanovnika po km2”. To ćemo učiniti na sljedeći način. Kako bismo dodali potenciju u naziv stupca, potrebno je u html dokumentu željenom stupcu dodijeliti “template” [headerCellTemplate] gdje mu proslijedimo neko ime po želji. Nakon što smo definirali stupac i odredili mu format prikaza podataka u tablici (type: ‘fixedPoint’, precision: 0), potrebno je reći što želimo od tog zaglavlja učiniti. Stoga u dxTemplate-u unutar <div> elementa odredimo ime stupca po želji uz dodatni tag između kojeg unosimo broj koji želimo da se prikaže kao potencija. Ostatak je čisti CSS.

DevExtreme CSS

Sada je potrebno u CSS-u odrediti koje dimenzije želimo da ta brojka ima, a to činimo na način da najprije, uz selektor pseudoklase ‘ng-deep’ navedemo id tablice (#gridContainer) i element na koji utječemo (sup).

DevExtreme #gridContainer

Rezultat učinjenoga je sljedeći:

DevExtreme DataGrid komponenta u Angular aplikaciji

To bi bio pojednostavljeni prikaz korištenja DevExtreme data grid komponente u Angular projektu. U nekom sljedećem postu osvrnut ćemo se na ostale komponente i njihovu implementaciju. Za eventualna pitanja, slobodno se javite.

Pošaljite upit

Leave a Comment