Poniżej przedstawiona została konfiguracja typów kolumn dostępnych dla zestawienia typu DataGrid. Ustawienia każdej z tych kolumn mogą różnić się w zależności od potrzeb aplikacji oraz preferencji użytkownika. Warto dopasować właściwości kolumny do rodzaju danych, które będą w niej przechowywane, aby zapewnić czytelność i funkcjonalność interfejsu aplikacji. W zależności od wybranego typu oraz oczekiwanego efektu konfiguracja elementu może się różnić. Dlatego istotne jest, aby uwzględnić specyfikę danych oraz zamierzone zastosowanie kolumny podczas dostosowywania jej właściwości.
Konfiguracja poszczególnych typów kolumn DataGrid:
Text
Kolumna umożliwia wyświetlanie tekstu lub krótkiego ciągu znaków, co stanowi podstawę dla wyświetlania informacji tekstowych. Możemy dostosować konfigurację tej kolumny do różnych potrzeb aplikacji, na przykład zmieniając formatowanie tekstu, szerokość kolumny lub ustawienia pogrubienia tekstu.
Check-box
Kolumna zawierająca pola wyboru (checkboxy), które można zaznaczyć lub odznaczyć. Jest używana do reprezentowania danych logicznych lub opcji wyboru.
Number
Kolumna ułatwia wyświetlanie wartości liczbowych, co ułatwia prezentację danych numerycznych. Aby wskazać sposób formatowania danych, należy skorzystać z pola „Value formating”.
Date
Kolumna służy do prezentacji danych w formacie daty. Aby wskazać sposób formatowania danych, należy korzystać z pola „Value formating”.
Image
Kolumna pozwala na wyświetlanie obrazków lub miniatur, co służy prezentacji danych w formie graficznej.
Image (Deflaut)
Wariant kolumny obrazka umożliwia wykorzystanie go jako domyślnej kolumny obrazkowej, jeśli nie został podany inny obrazek.
Guid image
Kolumna zawierająca obrazy identyfikowane za pomocą unikatowych identyfikatorów GUID.
Progress Bar
Kolumna wyświetla pasek postępu, który pozwala wizualizować stopień zaawansowania danego procesu.
Link
Kolumna zawiera odnośniki do innych miejsc w aplikacji lub w Internecie, umożliwiając nawigację do innych widoków lub stron.
Icon
Kolumna wyświetla ikony graficzne, które mogą reprezentować różne rodzaje danych lub akcji. Aby skonfigurować sposób wyświetlania w wierszu filtrowania dla tego typu kolumny, należy odpowiednio wypełnić wartości w polach: „Select”, „Value Column”, „Text Column” oraz „Html Column”.
Przykładowy select:
SELECT [icon] AS 'value’, CONCAT(’’) AS 'html’ FROM (VALUES (’fas fa-user-pen’), (’fas fa-lock-open’)) AS x([icon]);
HTML
Kolumna umożliwiająca wyświetlanie niestandardowej zawartości HTML. Pozwala na bardziej zaawansowaną prezentację danych, w tym na wstawianie interaktywnych elementów HTML.
Custom template
Niestandardowy szablon wykorzystywany do renderowania zawartości w komórce kolumny w data gridzie. Zamiast standardowego sposobu prezentacji danych, który jest zdefiniowany dla danego typu kolumny, można zastosować własny szablon HTML lub komponent Vue.js, aby dostosować wygląd i zachowanie komórki.
Oprócz standardowych opcji konfiguracyjnych, należy odpowiednio skomponować elementy:
- ’Element template” – zapewnia komponenty do budowania interfejsu użytkownika, określa ich układ oraz styl
oraz
- „Methods for the component” – implementuje logikę obsługi interakcji z użytkownikiem w aplikacji internetowej, służy m.in do nawigacji użytkownika w aplikacji
Przykład:
Konfigurowanie kolumny z ikoną wraz z tooltipem oraz interakcją po kliknięciu prowadzącą do formularza zmiany priorytetu:
Element template:
<div class=”d-flex justify-content-center text-center dx-datagrid-checkbox-size”> <span v-tooltip:top=”getTooltip”>
<i @click=”navigateTo() style=”cursor: pointer;”:class=”value” ></i></span></div>
Methods for the component:
{ getTooltip: function() { let rowData = this.cellData.rowData; let tooltipColumn=this.cellData.tooltipColumn; return rowData[tooltipColumn]|| „”; },
navigateTo: function() {console.log(this); const targetId = „insertupdate”; const InsertUpdateRefno = 6383989039816986;
const targetParameters = [{ id: „windowMode”, value: „modal” }, { id: „modalSize”, value: „modal-md” },
{ id: „allowRefreshOnClose”, value: true }, { id: „elementContextRequired”, value: true },
{ id: „uid”, value: InsertUpdateRefno }, { id: „mode”, value: „Update” },{ id: „id”, value: this.rowKey }, ];
const targetParametersJson = JSON.stringify(targetParameters); this.$mainEventBus.$emit(„navigate”, null, null, null, null, targetId, targetParametersJson); } }
Instrukcja konfiguracji Data Grid