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: 

Data Grid Properties

Data Grid Funktionalitäten

TD_FT_DataGrid

Tipp! Hier sehen Sie mehr von der Komponente!

1. Data Grid Properties

Properties

Beschreibung

ID

Bezeichnung / Benamung der Headline

Color Scheme 

Initiale Farbschemen:

  • Normal: schwarz

  • Default: blau

  • Success: grün

  • Danger: rot

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:

  • Row click: Klicken, um weitere Actions auszulösen
  • Insert: Daten in das Formularfeld einpflegen

  • Update: Daten aus dem Formularfeld bearbeiten
  • Read data: ausgegebenen Daten sehen / lesen

  • Excel export: Excel Export der Tabellendaten

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

  • Show header / Show footer: Checkbox steuert, ob der Header / Footer angezeigt wird
    • Display: 
      Option 1: Use Text (Text wird ohne Formatierung ausgegeben)
      Option 2: Use HTML (Im Text kann HTML verwendet werden)
  • Border: Checkbox Show border steuert ob die Komponente mit Rahmen angezeigt wird. Zusätzlich kann bei Padding der Abstand in Pixel definiert werden.

Editing

Edit mode:

  • Row
    Ein Datensatz wird bearbeitet. Beim Speichern wird der Datensatz aktualisiert.

  • Column
    Bearbeiten muss nicht extra aktiviert werden. Durch Klick in eine Zelle, kann der Wert eingegeben oder geändert werden. Beim verlassen des Feldes wird der Datensatz aktualisiert.

  • Batch
    Es können alle Felder in allen sichtbaren Datensätzen bearbeitet werden. Beim Speichern werden alle Datensätze aktualisiert.

Enable inserting
Erlaubt das Erstellen von neuen Datensätzen.

Enable editing
Erlaubt das Bearbeiten von Datensätzen

Enable deleting
Erlaubt das Löschen von Datensätzen

Start edit by row click
Klick auf die Zeile oder Zelle aktiviert den Bearbeitungs-Editor.

Show icons in command column
Die Optionen "Bearbeiten" und "Löschen" werden als Icons angezeigt (statt als Text).

Show command column on left side
Icons für "Bearbeiten" und "Löschen" werden auf der linken Seite angezeigt.

Data handling

Enable paging
Erlaubt den Umbruch von Datensätzen auf ein neues Tabellenblatt.

Enable filtering
Erlaubt das Filtern der Datensätze nach einem Suchbegriff.

Enable search
Erlaubt das Durchsuchen der Datensätze über ein Eingabefeld.

Enable sorting
Erlaubt die Sortierung der Datensätze.

Enable Excel export
Erlaubt einen Excel Export der Datensätze.

Enable CSV export
Erlaubt einen CSV Export der Datensätze.

Display settings

Show column headers
Erlaubt Anzeigen der Spalten-Header / Spaltennamen.

Show column lines
Erlaubt das Anzeigen von Trennlinien zwischen den Spalten.

Show row lines
Erlaubt das Anzeigen von Trennlinien zwischen den Zeilen.

Show alternating rows
Erlaubt eine abwechselnde Hinterlegung der Datensätze.

Show selected row
Zeile, die angeklickt/ausgewählt wird, hebt sich farblich von den anderen Datensätzen ab. 

Show groups collapsed
Alle Gruppen werden eingeklappt angezeigt.

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
Vom User gesetzte Einstellungen wie Sortierung, Filter oder Spalten-Positionen werden für die Dauer der Sitzung gespeichert.

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.
Bei Verwendung dieses Ereignisses wird das Standardverhalten vollständig weggelassen.

editRowTriggered

Dieses Ereignis wird ausgelöst, wenn der Benutzer die Bearbeitung einer Zeile auslöst.
Bei Verwendung dieses Ereignisses wird das Standardverhalten vollständig weggelassen.

deleteRowTriggered

Dieses Ereignis wird ausgelöst, wenn der Benutzer das Löschen einer Zeile auslöst.
Bei Verwendung dieses Ereignisses wird das Standardverhalten vollständig weggelassen.

saveTriggered

Dieses Ereignis wird ausgelöst, wenn der Benutzer das Speichern der geänderten Daten auslöst.
Bei Verwendung dieses Ereignisses wird das Standardverhalten vollständig weggelassen.

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.
enabled: Flagge zur Anzeige von aktiviert oder deaktiviert.

show()

Grid wird angezeigt. 

hide()

Versteckt das Grid / blendet das Grid aus.

setVisible(visible)

Zeigt/verbirgt das Grid.
visible: Flagge zum Anzeigen oder Ausblenden.

writeable()

Macht das Grid beschreibbar.

readonly()

Macht das Grid schreibgeschützt.

setReadOnly(readOnly)

Setzt das Grid auf schreibgeschützt/schreibbar.
readOnly: Flagge, die angibt, ob das Gitter schreibgeschützt oder schreibbar ist.

setColumnReadOnly(column, readOnly)

Legt eine Spalte des Grids als schreibgeschützt fest.
column: Der Name oder Index der Spalte.
readOnly: Ein boolean Flag, das angibt, ob die Spalte nur gelesen oder auch geschrieben werden kann.

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.
footer: Die zu setzende Fußzeile.

setFooterText(footer)

Legt die Fußzeile des Grids fest.
footer: Der zu setzende Fußzeilentext.

setFooterHtml(footer)

Legt die Fußzeile des Grids fest.
footer: Die zu setzende HTML-Fußzeile.

setColumnHeader(column, header)

Set the header text of a column.
column: The name or index of the column.
header: The header text to set.

Legt den Überschriftentext einer Spalte fest.
column: Der Name oder Index der Spalte.
header: Der zu setzende Überschriftentext.

setExcelExportFilename(filename)

Set filename for excel export (without extension).
filename: The filename to set (without extension).

Legt den Dateinamen für den Excel-Export (ohne Erweiterung) fest.
filename: Der zu setzende Dateiname (ohne Erweiterung).

setCsvExportFilename(filename)

Legt Dateiname für den CSV-Export fest (ohne Erweiterung).
filename: Der zu setzende Dateiname (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.
column: Name der Spalte, die die Daten enthält.
filename: Name für die Datei der heruntergeladenen Daten.

download(key, column, filename)

Herunterladen von Daten einer Binärspalte.
key: Schlüssel der Zeile, die die Daten enthält.
column: Name der Spalte, die die Daten enthält.
filename: Name für die Datei der heruntergeladenen Daten.

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.
expanded: Flagge, die anzeigt, ob eine Zeile erweitert oder eingeklappt ist.

expandToLevel(level)

Erweitert alle gruppierten Zeilen im Raster bis zu einer bestimmten Ebene.
level: Ebene (1-basiert), auf die erweitert werden soll.

collapseFromLevel(level)

Alle gruppierten Zeilen im Raster ab einer bestimmten Ebene einklappen.
level: Ebene (1-based), ab der eingeklappt werden soll.

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.
page: Die Seite (0-based), zu der gewechselt werden soll.

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.
key: Schlüssel der Zeile, zu der navigiert werden soll.

selectRow(key)

Navigiert zur Zeile und wählt die Zeile aus. Führt ein Paging und einen Bildlauf durch, um die Zeile anzuzeigen.
key: Schlüssel der auszuwählenden Zeile.

exportToExcel()

Exportiert den Inhalt des Grids nach Excel.

exportToCsv()

Exportiert den Inhalt des Grids in eine csv-Datei.