Tabelle

using System;
using System.Collections.Generic;

namespace FMH.Komponente.WebUI.Areas.Tabelle.Models
{
    /// <summary>
    /// Eine Zeile der Demo-Tabelle. Die Eigenschaften decken die Fälle ab, die im Grid
    /// unterschiedlich behandelt werden: Text, Zahl, Datum, Wahrheitswert und ein leerer Wert.
    /// </summary>
    public class KursZeile
    {
        public int Id { get; set; }

        public string Bezeichnung { get; set; }

        public string Anbieter { get; set; }

        public DateTime Datum { get; set; }

        public decimal Punkte { get; set; }

        public bool IstAnerkannt { get; set; }

        /// <summary>
        /// Bewusst teilweise leer: zeigt, was EmptyColumnChar aus einer leeren Zelle macht.
        /// </summary>
        public string Bemerkung { get; set; }

        /// <summary>
        /// Fachliche Sperre der Zeile: Ein abgeschlossener Kurs darf nicht mehr entfernt werden.
        /// Grundlage für <c>Disabled(...)</c> und <c>Visible(...)</c> an den Zeilen-Aktionen.
        /// </summary>
        public bool IstAbgeschlossen { get; set; }

        /// <summary>
        /// Zustand des Umschalters. Wird über die Demo-Aktion «Bestanden» tatsächlich gekippt —
        /// deshalb veränderlich und nicht nur lesend.
        /// </summary>
        public bool Bestanden { get; set; }

        /// <summary>
        /// Unterzeilen der Tabelle. Bewusst bei einigen Kursen leer: Ohne Einträge rendert das Grid
        /// statt der Aufklapp-Schaltfläche das Zeichen aus EmptyColumnChar.
        /// </summary>
        public IReadOnlyList<KursDokument> Dokumente { get; set; } = new List<KursDokument>();

        /// <summary>
        /// Nur für den Tooltip der Aufklapp-Spalte — der Standardtext nennt sonst dieselbe Zahl
        /// ohne Bezug zum Kurs.
        /// </summary>
        public int AnzahlDokumente => this.Dokumente.Count;

        /// <summary>
        /// Fertig formatierte Punktzahl für die Gruppe «Datasource (Ajax)». Auf dem Ajax-Weg wirkt
        /// <c>Format(...)</c> nicht — der Wert geht so an den Browser, wie ihn der Endpunkt liefert.
        /// </summary>
        public string PunkteText => $"{this.Punkte:0.0} Punkte";

        /// <summary>
        /// Ersatz für <c>Format(GridValueFormat.YesNo)</c> auf dem Ajax-Weg. Sortiert wird über
        /// <c>SortByKey(x =&gt; x.Bestanden)</c> weiterhin nach dem Wahrheitswert.
        /// </summary>
        public string BestandenText => this.Bestanden ? "Ja" : "Nein";

        /// <summary>
        /// Kontaktadresse des Anbieters — Grundlage der Mail-Schaltfläche im Beispiel «Aktionen ohne
        /// Seitenwechsel». Sie setzt diesen Wert über <c>ClientDataKey("row.KontaktMail")</c> hinter
        /// das <c>mailto:</c> ihrer Adresse, statt wie sonst die Id der Zeile.
        /// </summary>
        public string KontaktMail => $"kurse@{Kuerzel(this.Anbieter)}.example.ch";

        /// <summary>
        /// Ersatz für eine <c>Custom</c>-Spalte auf dem Ajax-Weg: Das Markup entsteht im Endpunkt
        /// und nicht im Razor-Ausdruck, weil die Zeilen dort gar nicht vorliegen.
        /// </summary>
        public string StatusHtml => this.IstAbgeschlossen
            ? "<span class=\"badge text-bg-secondary\">abgeschlossen</span>"
            : "<span class=\"badge text-bg-success\">offen</span>";

        // Aus «Universität Zürich» wird «universitaet-zuerich»: Umlaute und Leerzeichen haben in
        // einer Mailadresse nichts verloren.
        private static string Kuerzel(string anbieter)
        {
            return (anbieter ?? string.Empty).ToLowerInvariant()
                .Replace("ä", "ae")
                .Replace("ö", "oe")
                .Replace("ü", "ue")
                .Replace(" ", "-");
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;

namespace FMH.Komponente.WebUI.Areas.Tabelle.Models
{
    /// <summary>
    /// Die Testdaten der Demo. Statisch und ohne Datenbank — jede Seite arbeitet auf derselben
    /// Liste, damit sich die Beispiele untereinander vergleichen lassen.
    /// </summary>
    /// <remarks>
    /// Die Liste ist prozessweit dieselbe Instanz. Die Beispiele «Umschalt-Aktion» und
    /// «Unterzeilen» verändern sie bewusst (Umschalten, Umbenennen), damit die Wirkung sichtbar
    /// wird; nach einem Neustart der Anwendung steht wieder der Ausgangszustand.
    /// </remarks>
    public static class KursDaten
    {
        private static readonly IReadOnlyList<KursZeile> Alle = new List<KursZeile>
        {
            Zeile(
                1,
                "Grundkurs Notfallmedizin",
                "FMH Bildung",
                "2026-01-14",
                12.5m,
                true,
                "Präsenzkurs",
                istAbgeschlossen: true,
                bestanden: true,
                dokumente: new[] { Dokument(101, "Anmeldebestaetigung.pdf", 184320), Dokument(102, "Teilnahmebeleg.pdf", 96256) }),
            Zeile(2, "Refresher Innere Medizin", "SIWF Akademie", "2026-02-03", 8m, true, null, istAbgeschlossen: true, bestanden: false),
            Zeile(
                3,
                "Workshop Gesprächsführung",
                "Kantonsspital Bern",
                "2026-02-19",
                4m,
                false,
                "Wartet auf Beleg",
                istAbgeschlossen: false,
                bestanden: false,
                dokumente: new[] { Dokument(103, "Programm.pdf", 512000) }),
            Zeile(4, "Fortbildung Radiologie", "Universität Zürich", "2026-03-07", 16m, true, null, istAbgeschlossen: true, bestanden: true),
            Zeile(5, "Seminar Qualitätssicherung", "FMH Bildung", "2026-03-22", 6.5m, false, null, istAbgeschlossen: false, bestanden: false),
            Zeile(
                6,
                "Kongress Kardiologie",
                "Swiss Heart",
                "2026-04-11",
                20m,
                true,
                "Zweitägig",
                istAbgeschlossen: false,
                bestanden: true,
                dokumente: new[]
                           {
                               Dokument(104, "Kongressprogramm.pdf", 1258291),
                               Dokument(105, "Hotelbestaetigung.pdf", 71680),
                               Dokument(106, "Quittung.pdf", 40960),
                           }),
            Zeile(7, "Kurs Strahlenschutz", "Bundesamt für Gesundheit", "2026-04-28", 9m, true, null, istAbgeschlossen: true, bestanden: true),
            Zeile(
                8,
                "Update Pädiatrie",
                "Kinderspital Zürich",
                "2026-05-15",
                7.5m,
                false,
                "Anmeldung offen",
                istAbgeschlossen: false,
                bestanden: false,
                dokumente: new[] { Dokument(107, "Anmeldung.pdf", 65536) }),
            Zeile(
                9,
                "Fallseminar Onkologie",
                "SIWF Akademie",
                "2026-06-02",
                11m,
                true,
                null,
                istAbgeschlossen: true,
                bestanden: false,
                dokumente: new[] { Dokument(110, "Fallsammlung.pdf", 327680), Dokument(111, "Auswertungsbogen.pdf", 88064) }),
            Zeile(10, "Praxiskurs Sonografie", "Universität Basel", "2026-06-24", 14m, true, null, istAbgeschlossen: false, bestanden: true),
            Zeile(11, "Kurs Palliative Care", "FMH Bildung", "2026-07-09", 10m, false, null, istAbgeschlossen: false, bestanden: false),
            Zeile(
                12,
                "Symposium Neurologie",
                "Inselspital",
                "2026-08-18",
                18m,
                true,
                "Mit Poster-Session",
                istAbgeschlossen: true,
                bestanden: true,
                dokumente: new[] { Dokument(108, "Posterabstract.pdf", 245760), Dokument(109, "Zertifikat.pdf", 133120) }),
        };

        public static IReadOnlyList<KursZeile> Laden()
        {
            return Alle;
        }

        public static KursZeile Laden(int id)
        {
            return Alle.FirstOrDefault(zeile => zeile.Id == id);
        }

        /// <summary>
        /// Leere Liste für das Beispiel «Ohne Daten».
        /// </summary>
        public static IReadOnlyList<KursZeile> Leer()
        {
            return new List<KursZeile>();
        }

        /// <summary>
        /// Kippt den Zustand für das Beispiel «Umschalt-Aktion» und liefert den neuen Wert.
        /// </summary>
        public static bool Umschalten(int id)
        {
            var zeile = Laden(id);

            if (zeile == null)
            {
                return false;
            }

            zeile.Bestanden = !zeile.Bestanden;
            return zeile.Bestanden;
        }

        public static KursDokument LadeDokument(int id)
        {
            return Alle.SelectMany(zeile => zeile.Dokumente)
                .FirstOrDefault(dokument => dokument.Id == id);
        }

        /// <summary>
        /// Umbenennen für das Beispiel «Unterzeilen». Der Aufruf kommt aus dem Umbenennen-Dialog
        /// des Grids und erwartet eine Antwort im JSON-Format.
        /// </summary>
        public static KursDokument BenenneDokumentUm(int id, string dateiname)
        {
            var dokument = LadeDokument(id);

            if (dokument == null || string.IsNullOrWhiteSpace(dateiname))
            {
                return null;
            }

            dokument.Dateiname = dateiname;
            return dokument;
        }

        private static KursDokument Dokument(int id, string dateiname, int dateigroesse)
        {
            return new KursDokument
            {
                Id = id,
                Dateiname = dateiname,
                Dateigroesse = dateigroesse,
            };
        }

        private static KursZeile Zeile(
            int id,
            string bezeichnung,
            string anbieter,
            string datum,
            decimal punkte,
            bool istAnerkannt,
            string bemerkung,
            bool istAbgeschlossen = false,
            bool bestanden = false,
            IReadOnlyList<KursDokument> dokumente = null)
        {
            return new KursZeile
            {
                Id = id,
                Bezeichnung = bezeichnung,
                Anbieter = anbieter,
                Datum = DateTime.Parse(datum),
                Punkte = punkte,
                IstAnerkannt = istAnerkannt,
                Bemerkung = bemerkung,
                IstAbgeschlossen = istAbgeschlossen,
                Bestanden = bestanden,
                Dokumente = dokumente ?? new List<KursDokument>(),
            };
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using FMH.Komponente.Basis.Erweiterungen;
using FMH.Komponente.Basis.Ui.Feedback.Alert;
using FMH.Komponente.Tabelle.Ui.Grid.Datatable;
using FMH.Komponente.WebUI.Areas.Tabelle.Models;
using Microsoft.AspNetCore.Mvc;

namespace FMH.Komponente.WebUI.Areas.Tabelle.Controllers.Beispiele
{
    // Die Gegenstelle der Gruppe «Datasource (Ajax)»: der Endpunkt für die Zeilen und die Ziele der
    // Zeilen-Aktionen.
    //
    // Zwei Dinge unterscheiden diesen Controller von TabelleBeispielController (dem der
    // serverseitig gebundenen Beispiele):
    //
    // 1. Der Endpunkt für die Daten nimmt GridDatatableParameter entgegen und antwortet mit
    //    GridDataSource<T> — beides in Pascal Case, weil das Grid die Felder so ausliest.
    // 2. Die Aktionen antworten mit JSON statt mit einer Weiterleitung: Entfernen, Dialog und
    //    Umschalten laufen mit einer Ajax-Datenquelle als Postback im Hintergrund. Die Antwort ist
    //    die Meldung, die das Grid danach einblendet.
    [Area("Tabelle")]
    public class TabelleAjaxController : Controller
    {
        // Pflicht: Der Json-Serializer arbeitet standardmässig mit Camel Case, das Grid liest die
        // Antwort aber in Pascal Case (Datasource, TotalRecords, TotalDisplayRecords, Draw). Ohne
        // diese Einstellung bleibt die Tabelle leer.
        private static readonly JsonSerializerOptions JsonPascalCase = new JsonSerializerOptions { PropertyNamingPolicy = null };

        /// <summary>
        /// Der Endpunkt aus <c>AjaxDataUrl(...)</c>. Sortieren, Suchen und Blättern passieren hier —
        /// der Browser bekommt nur die angeforderte Seite.
        /// </summary>
        [HttpPost]
        public IActionResult Daten(GridDatatableParameter parameter)
        {
            var alle = KursDaten.Laden();
            var gefiltert = Suchen(alle, parameter.Search);
            var sortiert = Sortieren(gefiltert, parameter.SortColumnName, parameter.SortDirection);

            var seite = sortiert.Skip(parameter.Skip)
                .Take(parameter.Take)
                .ToList();

            var quelle = new GridDataSource<List<KursZeile>>
                         {
                             Datasource = seite,
                             TotalRecords = alle.Count,
                             TotalDisplayRecords = gefiltert.Count,

                             // Draw zurückgeben: DataTables verwirft eine Antwort, deren Draw nicht
                             // zur Anfrage passt — die Tabelle bliebe sonst beim Blättern stehen.
                             Draw = parameter.Draw,
                         };

            return this.Json(quelle, JsonPascalCase);
        }

        /// <summary>
        /// Endpunkt des Beispiels «Suchformular über der Tabelle». Die Felder des Formulars hängt
        /// das Grid vor jeder Abfrage selbst an — hier kommen sie als Formularwerte an.
        /// </summary>
        [HttpPost]
        public IActionResult DatenGefiltert(GridDatatableParameter parameter, [FromForm] KursFilter filter)
        {
            return this.Json(Seite(parameter, filter), JsonPascalCase);
        }

        /// <summary>
        /// Endpunkt des Beispiels «Feste Filterwerte in der Adresse». Die Werte stehen als
        /// Abfrageparameter in der Adresse aus <c>AjaxDataUrl</c> — deshalb <c>[FromQuery]</c> und,
        /// passend zu <c>FormMethod.Get</c>, <c>[HttpGet]</c>.
        /// </summary>
        [HttpGet]
        public IActionResult DatenMitFilter(GridDatatableParameter parameter, [FromQuery] KursFilter filter)
        {
            return this.Json(Seite(parameter, filter), JsonPascalCase);
        }

        /// <summary>
        /// Ziel des Formulars aus dem Beispiel «Mehrfachauswahl». Die Auswahlkästchen posten unter
        /// dem Namen aus <c>ClientDataKey</c> — auf dem Ajax-Weg also nicht unter dem Spaltennamen.
        /// </summary>
        [HttpPost]
        public IActionResult Auswahl(int[] id)
        {
            if (id == null || id.Length == 0)
            {
                this.AddAlert("Kein Kurs ausgewählt.", AlertType.Warning, autoHide: true);

                return this.RedirectToAction("AjaxMehrfachauswahl", "Demo", new { area = "Tabelle" });
            }

            var bezeichnungen = id.Select(kursId => Bezeichnung(kursId))
                .ToArray();

            this.AddAlert($"{bezeichnungen.Length} ausgewählt: {string.Join(", ", bezeichnungen)}", AlertType.Info, autoHide: true);

            return this.RedirectToAction("AjaxMehrfachauswahl", "Demo", new { area = "Tabelle" });
        }

        /// <summary>
        /// Ziel der Aufklapp-Spalte aus <c>ChildForAsync</c>. Die Antwort ist das fertige Markup der
        /// Unterzeile; das Grid schiebt es unter die Zeile. Der Aufruf kommt als POST.
        /// </summary>
        [HttpPost]
        public IActionResult Dokumente(int id)
        {
            var zeile = KursDaten.Laden(id);

            return this.PartialView("_Dokumente", zeile?.Dokumente ?? new List<KursDokument>());
        }

        /// <summary>
        /// Ziel des Umschalters. Wie bei der serverseitig gebundenen Tabelle kommt der bisherige
        /// Zustand als Parameter mit — die Antwort ist hier aber JSON, kein Redirect.
        /// </summary>
        [HttpPost]
        public IActionResult Bestanden(int id, bool isBestanden)
        {
            var neu = KursDaten.Umschalten(id);

            return this.Json($"{Bezeichnung(id)}: {(isBestanden ? "war bestanden" : "war offen")} → {(neu ? "bestanden" : "offen")}", JsonPascalCase);
        }

        [HttpPost]
        public IActionResult Dialog(int id)
        {
            return this.Json($"Im Dialog bestätigt: {Bezeichnung(id)}", JsonPascalCase);
        }

        [HttpPost]
        public IActionResult Entfernen(int id)
        {
            // Nur Rückmeldung: Die Demo-Daten sind für alle Beispiele dieselben und werden nicht
            // verändert. Der Rückgabewert ist der Text, den das Grid nach dem Neuladen einblendet.
            return this.Json($"Entfernen ausgelöst: {Bezeichnung(id)}", JsonPascalCase);
        }

        /// <summary>
        /// Ziel einer Aktion mit <c>data-asyncactiondisabled="true"</c>. Diese Schaltfläche schickt
        /// ein gewöhnliches Formular ab — die Aktion muss deshalb selbst zurück auf die Seite
        /// leiten, sonst bleibt der Anwender auf einer leeren Antwort sitzen.
        /// </summary>
        [HttpPost]
        public IActionResult EntfernenMitSeitenwechsel(int id)
        {
            this.AddAlert($"Entfernen mit Seitenwechsel: {Bezeichnung(id)}", AlertType.Info, autoHide: true);

            return this.RedirectToAction("AjaxAktionen", "Demo", new { area = "Tabelle" });
        }

        /// <summary>
        /// Ziel der Ansehen-Aktion: ein gewöhnlicher Link, der die Seite wechselt — auch bei einer
        /// Ajax-Datenquelle.
        /// </summary>
        public IActionResult Ansehen(int id)
        {
            this.AddAlert($"Angesehen: {Bezeichnung(id)}", AlertType.Info, autoHide: true);

            var herkunft = this.Request.Headers.Referer.ToString();

            if (string.IsNullOrEmpty(herkunft))
            {
                return this.RedirectToAction("AjaxGrundfall", "Demo", new { area = "Tabelle" });
            }

            return this.Redirect(herkunft);
        }

        // Die Zusatzwerte ändern nichts am Ablauf des Endpunkts: Sie schränken die Menge ein, bevor
        // gesucht, sortiert und geblättert wird. TotalRecords meint danach den Bestand, den der
        // Filter übrig lässt — sonst nennt die Blätterleiste eine Zahl, die es auf dieser Seite gar
        // nicht gibt.
        private static GridDataSource<List<KursZeile>> Seite(GridDatatableParameter parameter, KursFilter filter)
        {
            var bestand = Filtern(KursDaten.Laden(), filter);
            var gefiltert = Suchen(bestand, parameter.Search);

            return new GridDataSource<List<KursZeile>>
                   {
                       Datasource = Sortieren(gefiltert, parameter.SortColumnName, parameter.SortDirection)
                           .Skip(parameter.Skip)
                           .Take(parameter.Take)
                           .ToList(),
                       TotalRecords = bestand.Count,
                       TotalDisplayRecords = gefiltert.Count,
                       Draw = parameter.Draw,
                   };
        }

        // Ein leeres Feld bedeutet «nicht filtern» — bei einer Suche über der Tabelle ist das der
        // Regelfall und kein Sonderfall.
        private static List<KursZeile> Filtern(IEnumerable<KursZeile> zeilen, KursFilter filter)
        {
            if (filter == null)
            {
                return zeilen.ToList();
            }

            if (string.IsNullOrWhiteSpace(filter.Bezeichnung) == false)
            {
                zeilen = zeilen.Where(zeile => Enthaelt(zeile.Bezeichnung, filter.Bezeichnung));
            }

            if (string.IsNullOrWhiteSpace(filter.Anbieter) == false)
            {
                zeilen = zeilen.Where(zeile => string.Equals(zeile.Anbieter, filter.Anbieter, StringComparison.OrdinalIgnoreCase));
            }

            return zeilen.ToList();
        }

        private static string Bezeichnung(int id)
        {
            return KursDaten.Laden(id)
                ?.Bezeichnung ?? $"Id {id}";
        }

        // Der Suchbegriff aus dem Suchfeld kommt in GridDatatableParameter.Search an. Über welche
        // Felder gesucht wird, entscheidet der Endpunkt — das Grid weiss davon nichts.
        private static List<KursZeile> Suchen(IEnumerable<KursZeile> zeilen, string suchbegriff)
        {
            if (string.IsNullOrWhiteSpace(suchbegriff))
            {
                return zeilen.ToList();
            }

            return zeilen.Where(
                    zeile => Enthaelt(zeile.Bezeichnung, suchbegriff)
                             || Enthaelt(zeile.Anbieter, suchbegriff)
                             || Enthaelt(zeile.Bemerkung, suchbegriff))
                .ToList();
        }

        private static bool Enthaelt(string wert, string suchbegriff)
        {
            return wert != null && wert.Contains(suchbegriff, StringComparison.OrdinalIgnoreCase);
        }

        // SortColumnName ist der Name der Eigenschaft, an die die Spalte gebunden ist — bei einer
        // Spalte mit SortByKey der Name des Sortierschlüssels. Der Endpunkt muss die Namen kennen;
        // was er nicht kennt, bekommt eine vernünftige Vorgabe.
        private static IEnumerable<KursZeile> Sortieren(List<KursZeile> zeilen, string spalte, string richtung)
        {
            var absteigend = string.Equals(richtung, "desc", StringComparison.OrdinalIgnoreCase);

            Func<KursZeile, object> schluessel = spalte switch
            {
                nameof(KursZeile.Bezeichnung) => zeile => zeile.Bezeichnung,
                nameof(KursZeile.Anbieter) => zeile => zeile.Anbieter,
                nameof(KursZeile.Punkte) => zeile => zeile.Punkte,
                nameof(KursZeile.PunkteText) => zeile => zeile.Punkte,
                nameof(KursZeile.Bestanden) => zeile => zeile.Bestanden,
                nameof(KursZeile.BestandenText) => zeile => zeile.Bestanden,
                nameof(KursZeile.IstAbgeschlossen) => zeile => zeile.IstAbgeschlossen,
                nameof(KursZeile.AnzahlDokumente) => zeile => zeile.AnzahlDokumente,
                _ => zeile => zeile.Datum,
            };

            return absteigend
                ? zeilen.OrderByDescending(schluessel)
                : zeilen.OrderBy(schluessel);
        }
    }
}

// Demo "Tabelle › Ui › Grid › Datasource (Ajax) › Ereignisse › Zellen auszeichnen".
//
// gridCellCreated läuft für jede einzelne Zelle und ist der Ersatz für CellAttributes und
// EmptyColumnChar – beide wirken nur beim serverseitigen Rendern.
//
//   detail.cell      der Wert, an den die Spalte GEBUNDEN ist – siehe die Falle weiter unten
//   detail.row       die ganze Zeile aus dem JSON
//   detail.element   das <td>
//   detail.colIndex  die Spalte, von 0 an gezählt
//
// Das Ereignis steigt bis zum document auf. Das Grid dieser Seite hat die Id
// "kurse-ajax-ereignis-zelle" mit den Spalten Kurs (0), Bestanden (1) und Bemerkung (2).
var TABELLE = 'kurse-ajax-ereignis-zelle';
var SPALTE_BESTANDEN = 1;
var SPALTE_BEMERKUNG = 2;

function melde(text) {
    var ausgabe = document.querySelector('[data-ereignis-ausgabe]');

    if (ausgabe !== null) {
        ausgabe.textContent = text;
    }
}

// Achtung: gridCellCreated liefert die Id in detail.tableId und OHNE vorangestelltes "#".
document.addEventListener('gridCellCreated', function (event) {
    if (event.detail.tableId !== TABELLE) {
        return;
    }

    // Ersatz für CellAttributes: die Zelle abhängig von ihrem Wert auszeichnen.
    //
    // ACHTUNG – detail.cell ist NICHT immer der angezeigte Text. Die Spalte «Bestanden» hat ein
    // SortByKey(x => x.Bestanden); damit bindet das Grid sie an «Bestanden», und in detail.cell
    // steht der Wahrheitswert (false), nicht «Nein». Angezeigt wird BestandenText. Der verlässliche
    // Weg führt deshalb über detail.row – dort stehen alle Eigenschaften der Zeile.
    if (event.detail.colIndex === SPALTE_BESTANDEN && event.detail.row.Bestanden === false) {
        event.detail.element.classList.add('fw-bold', 'text-danger');

        melde('gridCellCreated: Zeile ' + event.detail.rowIndex + ' («' + event.detail.row.Bezeichnung + '») ist nicht bestanden – Zelle hervorgehoben.');
    }

    // Ersatz für EmptyColumnChar: Auf dem Ajax-Weg bleibt eine leere Zelle leer, bis hier ein
    // Platzhalter hineingeschrieben wird. Diese Spalte hat kein SortByKey – hier ist detail.cell
    // tatsächlich der angezeigte Wert.
    if (event.detail.colIndex === SPALTE_BEMERKUNG && !event.detail.cell) {
        event.detail.element.textContent = '–';
        event.detail.element.classList.add('text-muted');
    }
});

// jQuery-Variante zum Beispiel «Zellen auszeichnen» – dasselbe wie im Tab "JavaScript", nur mit
// jQuery geschrieben. Diese Datei wird von der Demo-Seite NICHT geladen; sonst liefen beide
// Fassungen gleichzeitig. Sie ist als Vorlage zum Übernehmen gedacht.
//
// jQuery 3 kopiert detail vom nativen Event auf sein eigenes Event-Objekt; bei älteren Versionen
// führt der Weg über originalEvent.detail.
$(function () {
    var tabelle = '#kurse-ajax-ereignis-zelle';
    var spalteBestanden = 1;
    var spalteBemerkung = 2;

    function melde(text) {
        $('[data-ereignis-ausgabe]').text(text);
    }

    // Das Ereignis wird an der Tabelle ausgelöst – ein Listener direkt dort genügt, und die
    // Prüfung auf die eigene Id entfällt.
    $(tabelle).on('gridCellCreated', function (e) {
        var detail = e.detail || e.originalEvent.detail;

        // detail.cell ist der gebundene Wert, nicht der angezeigte Text: Die Spalte «Bestanden»
        // hat ein SortByKey und liefert deshalb den Wahrheitswert. Verlässlich ist detail.row.
        if (detail.colIndex === spalteBestanden && detail.row.Bestanden === false) {
            $(detail.element).addClass('fw-bold text-danger');

            melde('gridCellCreated: Zeile ' + detail.rowIndex + ' («' + detail.row.Bezeichnung + '») ist nicht bestanden – Zelle hervorgehoben.');
        }

        // Diese Spalte hat kein SortByKey – hier ist detail.cell der angezeigte Wert.
        if (detail.colIndex === spalteBemerkung && !detail.cell) {
            $(detail.element).text('–').addClass('text-muted');
        }
    });
});