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

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