nicht angemeldet
Rolf b
Matthias Apsel
Rolf b
Matthias Apsel
Rolf b
Gunnar Bittersmann
dedlfix
Rolf b
Moin,
ich weiß, die Frage klingt merkwürdig. Aber ich habe folgendes Problem: Ich zeige eine Übersichtstabelle an, und gelegentlich muss ich Zellen in dieser Tabelle hervorheben. Die Schwierigkeit ist - zu der Zeit, wo ich entscheiden will, ob eine Hervorhebung nötig ist oder nicht, da gibt's die Table noch nicht im DOM. Und ich habe auf die Erzeugung des <TD> keinen Einfluss. Ich erzeuge nur per Cell-Template die Inhalte (die Table wird danach erst vom Kendo UI Grid drumherum generiert).
Ich sehe derzeit zwei Möglichkeiten.
Ich nutze das Databound-Event des Grid. Dann gibt's die Table und ich kann über das von Kendo generierte DOM laufen, anhand eines data-Attributs in den tr mein Datenobjekt finden, und dann nachträglich die TDs mit einer class versehen, um Dinge hervorzuheben. Das funktioniert, ist aber TRÄGE.
Ich erzeuge nicht Text, sondern bei Bedarf im Cell-Template kleine HTML-Fragmente als Inhalt, z.B. ein div mit einer class, die die Hervorhebung auslöst. Nun sind die Tabelleneinträge mal länger und mal kürzer, d.h. sie brechen ggf. um und die Row-Höhe ist nicht konstant, Wenn ich in einer Row einzeilige und mehrzeilige Inhalte mische, und dann den einzeiligen Inhalt hervorheben will, dann füllt das DIV nicht die Zelle aus (bzw. tut es schon, aber die TDs der Row sind laut DOM Explorer unterschiedlich hoch). Siehe "problematische Seite".
Keine Alternative ist: Auf Kendo verzichten. Weil ich sonst vieles nachprogrammieren müsste, was ich von Kendo frei Haus bekomme.
Die Alternative 1 funktioniert, ist aber langsam. Ohne Databound-Handler läuft das Grid viel geschmeidiger.
Das Ergebnis von Alternative 2 ist eben nur sehr unschön. Wie bekomme ich es hin, dass alle TD einer TR gleich hoch sind, damit das DIV mit width:100% und height:100% die Zelle korrekt ausfüllt?
Alternativen, die ich NICHT nutzen will, sind:
a. auf Kendo verzichten. Das Grid ist gesetzt.
b. feste Zeilenhöhe pro Row. Damit würde die Table in den meisten Fällen sehr auseinandergerissen.
c. Row-Templates statt Cell-Templates. Ich hätte dann zwar die Kontrolle über die TDs, aber mein Grid ist inline editierbar und das geht mit Row-Templates nicht zusammen. Ein dokumentiertes Kendo-Defizit.
Hat jemand eine Idee, wie ich meine Hervorhebungen zellfüllend bekommen könnte?
Rolf
Hallo Rolf b,
$("td > .mark").parent.addClass("mark");?
Bis demnächst
Matthias
Hallo Matthias,
das ist jQuery und es funktioniert, wenn die Tabelle im DOM ist. Aber wie gesagt, das geht nur im Nachhinein, im DataBound Event, und macht das Grid träge (weil es wohl Kendo irgendwie querschießt oder Kendo es zu oft aufruft, keine Ahnung).
Zu dem Zeitpunkt wo ich die Markierungen setzen will ist das DOM noch nicht da. Die TDs kann ich nicht beeinflussen. Darum suche ich nach einer Lösung, die rein zell-intern arbeitet.
Aber ich probiere das trotzdem mal, vielleicht ist deine jQuery-Variante ja im databound nicht so träge wie meine bisherige Postprocess-Schleife.
Bytheway hab ich auch nochmal gebastelt und bin auf das hier gekommen, als reine Zell-interne Lösung. Nur, da ersaufe ich in DIVs und breche mir mit versteckten Übergrößen einen ab. Ich bezweifle, dass das eine gute Lösung ist.
Rolf
Hallo Rolf b,
das ist jQuery und es funktioniert, wenn die Tabelle im DOM ist. Aber wie gesagt, das geht nur im Nachhinein, im DataBound Event, und macht das Grid träge (weil es wohl Kendo irgendwie querschießt oder Kendo es zu oft aufruft, keine Ahnung).
Es würde doch aber gehen, wenn Kendo fertig ist? Oder stört es, wenn die Markierungen etwas später erscheinen?
Bytheway hab ich auch nochmal gebastelt und bin auf das hier gekommen, als reine Zell-interne Lösung. Nur, da ersaufe ich in DIVs und breche mir mit versteckten Übergrößen einen ab. Ich bezweifle, dass das eine gute Lösung ist.
Vor allem wegen der absoluten Positionierung.
Bis demnächst
Matthias
Nein, optisch fällt es nicht auf, dass ein postprocessing stattfindet, weil es zwischen Erzeugung des DOM und den Postprocessing im Databound-Handler keine Render-Phase gibt (es ist sozusagen alles ein Javascript Aufruf).
Es ist nur so, dass Kendo eigentlich ein sehr schnelles Templating hat (im Gegensatz zum Beispiel zu knockoutJS) und das Grid ohne postprocessing flott und geschmeidig ist. Kendo baut das komplette HTML für das Grid in einem String zusammen und knallt diesen String als eine Einheit dem Brauser vor die innerHTML Methode, das machen andere Engines nicht.
Durch postprocessing - also nachträgliches Fummeln an den classes - wird es träge. Verschärft wird die Lage noch durch die Ausführungsplattform: Internet Explorer 11. Firmenstandard.
Naja. Ich habe jetzt Feierabend (heute war Software-Release-Bereitschaft) und kümmere mich am Montag drum.
Tschö
Rolf
@@Rolf b
gelegentlich muss ich Zellen in dieser Tabelle hervorheben.
Was weißt du denn über die herzuvorhebenden Zellen? Deren Position?
Dann erzeugst du ein style-Element, das eine Regel mit den entsprechenden Selektoren für die herzuvorhebenden Zellen enthält. Dieses kannst du völlig unabhängig von der Tabelle ins DOM hängen.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Hallo Gunnar,
nein, ich weiß aus HTML/CSS Sicht gar nichts. Ich zeige Daten tabellarisch an, so ca 10 Spalten. Es KANN sein, dass diese Daten inkonsistent sind und dann will ich genau die Zellen, die auf Inkonsistenzen hinweisen, optisch hervorheben. Was hervorzuheben ist, hängt also allein vom dargestellten Inhalt ab. Und welcher Inhalt wo steht, hängt von den eingestellten Filtern oder der aufgeblätterten Seite ab. Und - wie gesagt - die Inhaltsdaten werden vom Kendo Grid eingesammelt und zu einem HTML-String zusammengedreht, bevor das Ganze ins DOM geschossen wird. DANACH löst Kendo ein DataBound Event aus und ich kann auf dem DOM rumkaspern; was aber bedeutet, dass ich die Konsistenzprüfung dahin verschieben oder mein Viewmodell mit Konsistenzhinweisflags verpesten muss. Deshalb suche ich eine Lösung, die rein per Zellinhalt funktioniert.
Aber die Idee von Matthias, mit dem .mark-Element in der Zelle und einem kompakten jQuery-Postprozess, probiere ich noch aus. Ich komm nur grad nicht dazu...
Ich glaube, ich denke einfach noch zu sehr in Windows Forms. Da wär das ja alles SOO einfach gewesen :(
Rolf
@@Rolf b
Es KANN sein, dass diese Daten inkonsistent sind und dann will ich genau die Zellen, die auf Inkonsistenzen hinweisen, optisch hervorheben. Was hervorzuheben ist, hängt also allein vom dargestellten Inhalt ab.
Wer prüft denn, ob die Daten inkonsitent sind? Das Kendo-Framework?
Wenn geprüft wird, ob eine Zelle hervorgehoben werden soll, ist dann nicht bekannt, in welcher Reihe/Spalte diese Zelle steht, so dass du all diese Zellen in einer Liste sammeln kannst?
… zu einem HTML-String zusammengedreht, bevor das Ganze ins DOM geschossen wird. DANACH löst Kendo ein DataBound Event aus und ich kann auf dem DOM rumkaspern;
Wenn du die Lösung mit dem style-Element verfolgst, musst du gar nichts „auf dem DOM rumkaspern“ – außer dieses eine Element ins DOM zu hängen. Und wie gesagt, ob dieses vor oder nach der Tabelle ins DOM gehängt wird, ist völlig egal.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Wer prüft denn, ob die Daten inkonsitent sind? Das Kendo-Framework?
Nein. Ich. Zur Zeit an der Stelle, wo ich die Zell-Inhalte für das Grid ermittle, also in den Zell-Templates. Das sind kleine Funktionen, die man pro Spalte in der Grid-Konfiguration angeben kann. Wenn die laufen, habe ich aber keine Information, in welcher Zeile der Wert landet. Und das HTML für das Grid wird im Hintergrund von Kendo erzeugt, ohne mir eine Chance zu geben, auf die TR oder TD Tags dynamisch Einfluss zu nehmen. Ich kann statisch Klassen vorgeben, die gelten dann aber für alle TD einer Spalte. Das hilft mir nicht.
Ich müsste also in den Zell-Templates mitzählen, in welcher logischen Zeile ich gerade bin und mich darauf verlassen, dass Kendo die Zeilen sequenziell von oben nach unten aufbaut. DANN könnte ich tatsächlich CSS nachschießen, das mit tr:nth-child und td:nth-child arbeitet und die benötigten Zellen umstyled.
Könnte klappen. Wie robust das sein mag, das muss ich mir noch überlegen. Vor allem weiß ich noch nicht, wie das mit dem Editiermodus zusammen passt. Nach einem Edit sind ggf. Inkonsistenzen weg. D.h. ich muss dieses nachgeschossene CSS auch noch updaten (was jetzt nicht das K.O. wäre, nur wieder umständlich). UND ich habe dann Styles im Javascript rumfliegen, weil ich ja CSS Regeln generieren muss und nicht einfach Querverweise auf existierende CSS Klassen machen kann. Sowas hier geht ja nicht.
tr:nth-child(3) td:nth-child(2) { augment-with-class: .hugo }
Aber ich hab grad mal Google befragt: CSS Selectors Level 4, HEUTE veröffentlicht, enthält den :has() Selektor. Der wäre auch ganz nett. Und ich dachte schon, der käme erst in CSS Version Drölf.
Aber eigentlich wollte ich ja nur alle td einer tr auf die gleiche Höhe bringen, egal wieviel drinsteht, dann wäre mein Ausgangsproblem gelöst.
Rolf
@@Rolf b
das mit tr:nth-child und td:nth-child arbeitet
Könnte bei dir auch gehen; ich hatte in meinem Pen bewusst :nth-of-type() verwendet.
ich habe dann Styles im Javascript rumfliegen, weil ich ja CSS Regeln generieren muss und nicht einfach Querverweise auf existierende CSS Klassen machen kann.
Aus dem Grund hatte ich im Pen die Hintergrundfarbe als custom property im Stylesheet hinterlegt (wohl wissend, dass das im IE/Edge noch nicht geht). Noch cooler wäre, wenn man nicht nur den Wert, sondern auch die Eigenschaft (hier background) so hinterlegen könnte.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Tach!
Hat jemand eine Idee, wie ich meine Hervorhebungen zellfüllend bekommen könnte?
Cell color based on ... - klappt das nicht auf diese Weise? Der Punkt scheint mir das class-Attribut zu sein, dem man eine Expression übergeben kann, die das Kendo auswertet.
dedlfix.
Hey! Das könnte der Tipp sein den ich brauche. Dass man im Class-Attribut Templates einsetzen kann, hatte ich bisher nicht gesehen.
Probiere ich aus. Danke!
Rolf