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. |