Data Grid
Die Data Grid Komponente bietet eine Benutzeroberfläche zur Anzeige von Tabellendaten und ermöglicht Aktualisierungen der Datenquelle.
In diesem Artikel lesen Sie folgende Inhalte:
Tipp! Hier sehen Sie mehr von der Komponente!
1. Data Grid Properties
|
Properties |
Beschreibung |
|---|---|
|
ID |
Bezeichnung / Benamung der Headline |
|
Color Scheme |
Initiale Farbschemen:
|
|
Konfiguriert in Color Schemes |
|
|
CSS class |
Elemente einer Gruppe/Klasse zuordnen, für die bestimmte Formatierungen gelten Option 1: in Properties bestehende Bootstrap-Klassen einfügen Option 2: über Hauptmenü in den Page Templates (für “alles verfügbar”) Option 3: Page definitions (nur für diese Seite) |
|
Tab index |
Legt die Navigation in der Page bzw. im Formular durch die Tab-Taste fest (Tab-Reihenfolge). Für jedes Formularfeld kann ein Tab-index vergeben werden. |
|
Access |
Access rights / Berechtigungen der Komponente:
|
|
Data layer |
Data layer der Datenbank-Tabelle, View oder einer Abfrage. Asynchron Processing: to come Process data completely on the client: to come |
|
Header / Footer |
|
|
Editing |
Edit mode:
Enable inserting Enable editing Enable deleting Start edit by row click Show icons in command column Show command column on left side |
| Data handling |
Enable paging Enable filtering Enable search Enable sorting Enable Excel export Enable CSV export |
| Display settings |
Show column headers Show column lines Show row lines Show alternating rows Show selected row Show groups collapsed Auto size height Alle Datensätze werden auf der Page angezeigt - kein Scrolling. |
| State storing |
No state storing Vom User gesetzte Einstellungen wie Sortierung, Filter oder Spalten-Positionen werden über die Dauer der Sitzung hinaus gespeichert. Save state in page |
2. Data Grid Funktionalitäten
Events
|
Event |
Beschreibung |
|---|---|
|
rowSelected |
Dieses Ereignis wird ausgelöst, wenn der Benutzer eine Zeile auswählt. |
|
rowClicked |
Dieses Ereignis wird ausgelöst, wenn der Benutzer auf eine Zeile klickt. |
|
addRowTriggered |
Dieses Ereignis wird ausgelöst, wenn der Benutzer das Hinzufügen einer neuen Zeile auslöst. |
|
editRowTriggered |
Dieses Ereignis wird ausgelöst, wenn der Benutzer die Bearbeitung einer Zeile auslöst. |
|
deleteRowTriggered |
Dieses Ereignis wird ausgelöst, wenn der Benutzer das Löschen einer Zeile auslöst. |
|
saveTriggered |
Dieses Ereignis wird ausgelöst, wenn der Benutzer das Speichern der geänderten Daten auslöst. |
|
rowInserted |
Dieses Ereignis wird ausgelöst, wenn eine Zeile eingefügt wurde. |
|
rowUpdated |
Dieses Ereignis wird ausgelöst, wenn eine Zeile aktualisiert wurde. |
|
rowDeleted |
Dieses Ereignis wird ausgelöst, wenn eine Zeile gelöscht wurde. |
|
cellClicked |
Dieses Ereignis wird ausgelöst, wenn der Benutzer auf eine Zelle klickt. |
Actions
|
Kategorisierung |
Action |
Beschreibung |
|---|---|---|
|
State |
enable() |
Aktiviert / Zeigt das Grid. |
|
disable() |
Deaktiviert / Verbirgt das Grid. |
|
|
setEnabled(enabled) |
Aktiviert/deaktiviert das Grid. |
|
|
show() |
Grid wird angezeigt. |
|
|
hide() |
Versteckt das Grid / blendet das Grid aus. |
|
|
setVisible(visible) |
Zeigt/verbirgt das Grid. |
|
|
writeable() |
Macht das Grid beschreibbar. |
|
|
readonly() |
Macht das Grid schreibgeschützt. |
|
|
setReadOnly(readOnly) |
Setzt das Grid auf schreibgeschützt/schreibbar. |
|
|
setColumnReadOnly(column, readOnly) |
Legt eine Spalte des Grids als schreibgeschützt fest. |
|
|
Appearance |
setTitle(title) |
Legt den Titel des Grids fest.: title: Der zu setzende Titel. |
|
setTitleText(title) |
Legt den Titel des Grids fest.: title: Der zu setzende Texttitel. |
|
|
setTitleHtml(title) |
Legt den Titel des Grids fest.: title: Der zu setzende HTML-Titel. |
|
|
setFooter(footer) |
Legt die Fußzeile des Grids fest. |
|
|
setFooterText(footer) |
Legt die Fußzeile des Grids fest. |
|
|
setFooterHtml(footer) |
Legt die Fußzeile des Grids fest. |
|
|
setColumnHeader(column, header) |
Set the header text of a column. Legt den Überschriftentext einer Spalte fest. |
|
|
setExcelExportFilename(filename) |
Set filename for excel export (without extension). Legt den Dateinamen für den Excel-Export (ohne Erweiterung) fest. |
|
|
setCsvExportFilename(filename) |
Legt Dateiname für den CSV-Export fest (ohne Erweiterung). |
|
|
Data |
refresh() |
Daten aktualisieren. |
|
updateFormat() |
Aktualisiert das Format aller Gridzellen. |
|
|
newRow() |
Fügt eine neue Zeile hinzu- |
|
|
editRow() |
Ausgewählte Zeile bearbeiten. |
|
|
deleteRow() |
Ausgewählte Zeile löschen. |
|
|
saveEdit() |
Sichert die geänderten Daten. |
|
|
cancelEdit() |
Abbrechen der Bearbeitung. |
|
|
downloadSelected(column, filename) |
Herunterladen von Daten einer binären Spalte der ausgewählten Zeile. |
|
|
download(key, column, filename) |
Herunterladen von Daten einer Binärspalte. |
|
|
User interaction |
focus() |
Setzt den Fokus auf das Grid. |
|
expandAll() |
Erweitert alle gruppierten Zeilen im Raster. |
|
|
collapseAll() |
Alle gruppierten Zeilen im Raster einklappen. |
|
|
setExpanded(expanded) |
Erweitert oder reduziert alle gruppierten Zeilen im Raster. |
|
|
expandToLevel(level) |
Erweitert alle gruppierten Zeilen im Raster bis zu einer bestimmten Ebene. |
|
|
collapseFromLevel(level) |
Alle gruppierten Zeilen im Raster ab einer bestimmten Ebene einklappen. |
|
|
clearFilter() |
Löscht alle Filtereinstellungen. |
|
|
clearSorting() |
Hebt Sortierung der Zeilen auf. |
|
|
clearSelection() |
Löscht Auswahl der Zeilen. |
|
|
goToPage(page) |
Geht zu einer bestimmten Seite der Daten. |
|
|
scrollToTop() |
Scrollt die aktuelle Seite an den Anfang. |
|
|
scrollToBottom() |
Scrollt die aktuelle Seite ganz nach unten. |
|
|
navigateToRow(key) |
Navigiert zu der Zeile mit dem angegebenen Schlüssel. Führt Paging und Scrolling durch, um die Zeile anzuzeigen. |
|
|
selectRow(key) |
Navigiert zur Zeile und wählt die Zeile aus. Führt ein Paging und einen Bildlauf durch, um die Zeile anzuzeigen. |
|
|
exportToExcel() |
Exportiert den Inhalt des Grids nach Excel. |
|
|
exportToCsv() |
Exportiert den Inhalt des Grids in eine csv-Datei. |
