RowClassesProvider

Kann genutzt werden, um die Darstellung von Tabellenzeilen oder -zellen in Abhängigkeit von den enthaltenen Daten zu ändern. Dazu wird das Attribut mit einer benutzerdefinierten Funktion konfiguriert, die den Inhalt einer einzelnen Tabellenzeile entgegennimmt und ein Array von Strings zurückgibt, welche als CSS-Klassen auf das jeweilige Zeilenelement gesetzt werden. Mithilfe einer benutzerdefinierten CSS-Datei oder eines Themes können diese Klassen genutzt werden, um das Aussehen der Tabelle anzupassen.

Schema: tchmi:framework#/definitions/Function

Herkunft: Datagrid

Siehe auch

Attribut-Getter: getRowClassesProvider

Attribut-Setter: setRowClassesProvider

Verfügbar ab Version 1.10

Beispiel

Um dieses Attribut zu nutzen, muss dem Projekt zunächst eine neue Funktion hinzugefügt werden. Rechtsklicken Sie dazu auf den gewünschten Ordner in Ihrem Projekt und wählen Sie „Add“ > „New Item…“. Wählen Sie im „Add New Item“-Dialog die Vorlage „Function (TypeScript)“, benennen Sie die neue Funktion und klicken Sie auf „Add“. Im Solution Explorer Ihres Projekts finden Sie nun zwei neue Dateien, eine mit der Endung „.ts“, die den Code der Funktion enthält und darunter eine mit der Endung „.function.json“, welche die Funktionsparameter, den Typ des Rückgabewertes und weitere Metadaten definiert. Doppelklicken Sie diese, um den Dialog zur Konfiguration der Funktion zu öffnen.

Eine Funktion, die als RowClassesProvider genutzt werden soll, muss ein Array von Strings zurückgeben und drei Parameter entgegennehmen:

1. Der Wert der Tabellenzeile, also die einzelnen Werte, die im Array, das als Wert für das Attribut SrcData gesetzt ist, oder an das Attribut DataSymbol gebunden ist, enthalten sind. Falls ein Datentyp für die Zeilenwerte vorhanden ist, kann dieser hier verwendet werden, andernfalls verwenden Sie den Typ „tchmi:general#/definitions/Any“.
2. Der 0-basierte Index der Tabellenzeile im ursprünglichen Array. Dieser Parameter ist vom Typ „Integer“
3. Die Zeilennummer der Zeile in der Tabelle. Die Zeilennummer ist 0-basiert und wird nicht vom Attribut RowNumbersStartNumber beeinflusst. Er kann aber vom Index im ursprünglichen Array abweichen, wenn die Daten im Datagrid sortiert oder gefiltert werden.

Konfigurieren Sie die Funktion also wie folgt:

Dann können Sie die Funktion an sich programmieren. Für dieses Beispiel wird eine Datagrid verwendet, die noch die Standardwerte für SrcData und Columns enthält, die beim Erstellen des Controls angewendet wurden. Ziel ist es, jede zweite Zeile hellgrau einzufärben, sowie jede Zelle, die eine aktive Checkbox enthält, grün zu markieren. Dafür wird folgender Code verwendet:

export function MyRowClassesProvider(
    rowValue: {
        Test1: string;
        Test2: number;
        Test3: boolean;
        Test4: string;
    },
    dataIndex: number,
    rowNumber: number
) {
    const classes: string[] = [];

    if (rowNumber % 2 === 1) {
        classes.push('odd');
    }

    if (rowValue.Test3) {
        classes.push('active');
    }

    return classes;
}

Da für den Standardwert der Daten kein TypeScript-Typ existiert, wird hier der Typ inline definiert. Falls es einen existierenden TypeScript-Typen gibt, kann natürlich auch dieser verwendet werden. Ansonsten ist der Code simpel. Es werden der Reihe nach die Bedingungen überprüft, für die CSS-Klassen gesetzt werden sollen, die entsprechenden Klassen einem Array hinzugefügt und dieses schlussendlich zurückgegeben.

Um diese CSS-Klassen nun zu nutzen, muss dem Projekt eine neue Stylesheet-Datei hinzugefügt werden. In dieser können die Klassen beispielsweise folgendermaßen verwendet werden:

.TcHmi_Controls_Beckhoff_TcHmiDatagrid tr.odd td.TcHmi_Controls_Beckhoff_TcHmiDatagrid-template-cell {
    background-color: #ededed;
}

.TcHmi_Controls_Beckhoff_TcHmiDatagrid tr.active td[data-column-name="Test3"] {
    background-color: green;
}

Die Klasse .TcHmi_Controls_Beckhoff_TcHmiDatagrid beschränkt hierbei die Anwendung der Style-Regeln auf Datagrid-Controls. Mit tr.odd, bzw. tr.active werden nun die in der Funktion definierten CSS-Klassen angesprochen. td.TcHmi_Controls_Beckhoff_TcHmiDatagrid-template-cell wählt alle Zellen aus. Würde man die Klasse weglassen und nur td verwenden, so würden auch die Zellen der Zeilennummern angesprochen. td[data-column-name="Test3"] wählt nur die Zellen aus, in denen das Feld „Test3“ der Daten angezeigt wird.

Das Ergebnis sieht so aus:

Die RowClassesProvider-Funktion wird bei jeder Änderung der Daten automatisch erneut ausgeführt. Wenn sie also eine Checkbox in dieser Datagrid aktivieren oder deaktivieren, so wird die Einfärbung der Zelle sofort aktualisiert.

In diesem Beispiel wird nur die Hintergrundfarbe der Zellen angepasst, aber selbstverständlich können auch eine ganze Reihe anderer CSS-Eigenschaften genutzt werden, um beispielsweise das Schriftbild zu verändern oder Hintergrundbilder einzubetten.