Vis Bindings funktionieren nicht in allen Konstellationen?

[daniel.driessen]

Hallo liebe Community.
Nun habe ich auch nochmal eine Frage. Ich hoffe sie wurde nicht schon gestellt (kann ich mir zwar irgendwie nicht vorstellen, ich konnte aber nichts finden).

Ich würde in meiner Visualisierung gerne ein Image mit abgerundeten Ecken erstellen. Je nach Situation sollen aber nicht alle Ecken abgerundet sein.
Wenn ich in das Feld "- radius" unter dem Menüpunkt "CSS Ränder (border-...)" folgendes eintrage, dann bekomme ich auch nur die oberen Ecken meines Images mit abgerundeten Ecken dargestellt: 20px 20px 0px 0px. Funktioniert also soweit wunderbar.
Wenn ich das Ganze nun mit Bindings realisieren möchte um je nach Situation alle bzw. nur die oberen Ecken abzurunden dann funktioniert das leider nicht oder ich mache irgendwas falsch. Ich habe folgendes bereits versucht:
{value:0_userdata.0.Test_Datapoints.Test; value === "false" ? "20px" : "20px 20px 0px 0px"}
Meiner Meinung nach müsste das so gehen. Ist aber leider nicht der Fall. Keine der Ecken wird abgerundet dargestellt wenn ich dieses Binding benutze.
Wenn ich nun stattdessen folgendes Binding verwende, funktioniert zwar das Binding und die Ecken werden entweder abgerundet bzw. nicht abgerundet dargestellt, jedoch kann ich natürlich nicht nur die oberen Ecken abgerundet darstellen:
{value:0_userdata.0.Test_Datapoints.Test; value === "false" ? 20 : 0}

Es scheint mir als würde das Feld "- radius" (und andere wahrscheinlich auch) einen Datentyp "Number" verlangen wenn Bindings verwendet werden, wenn jedoch keine Bindings verwendet werden auch den Datentyp "String" akzeptieren. Oder mache ich etwas falsch?
Kennt vielleicht jemand eine Lösung?
Vielen Dank im Vorraus für die Hilfe!

Viele Grüße

Daniel

[Codierknecht]

@daniel-driessen sagte in Vis Bindings funktionieren nicht in allen Konstellationen?:

value === "false"

Ist Dein Datenpunkt vom Typ "string" oder "boolean"?
Deine Prüfung value === "false" prüft, ob der DP einen String-Wert "false" enthält.
Sollte Dein DP ein Bool sein, wäre hier vermutlich ein value == false korrekter.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality

Ich würde das Ganze auch nicht mit 'nem Binding im Radius machen, sondern per Binding die CSS-Klasse variabel besetzen.

[OliverIO]

@daniel-driessen

meine Empfehlung wäre auch, nicht die css-Anweisungen direkt in das jeweilige Feld reinzuschreiben, sondern

der auswahldatenpunkt wurde dann einfach als binding in das Feld CSS Class reingeschrieben.
Das ist weniger komplex, als die vielen if/thens

Hier zum importieren

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"{0_userdata.0.test.test1}"},"style":{"left":"222px","top":"73px","border-width":"3px","border-style":"solid","border-color":"red","width":"199px","height":"141px"},"widgetSet":"basic"},{"tpl":"tplJquiSelectList","data":{"oid":"0_userdata.0.test.test1","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","values":"lo;ro;lu;ru;o;u;l;r;a","texts":"lo;ro;lu;ru;o;u;l;r;a","height":"70","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"open":false,"no_style":true},"style":{"left":"124px","top":"91px","width":"44px","height":"23px"},"widgetSet":"jqui"}]

und für den css reiter zum hinzufügen

.lo {
    border-radius: 30px 0px 0px 0px;
}
.ro {
    border-radius: 0px 30px 0px 0px;
}
.ru {
    border-radius: 0px 0px 30px 0px;
}
.lu {
    border-radius: 0px 0px 0px 30px;
}
.o {
    border-radius: 30px 30px 0px 0px;
}
.u {
    border-radius: 0px 0px 30px 30px;
}
.l {
    border-radius: 30px 0px 0px 30px;
}
.r {
    border-radius: 0px 30px 30px 0px;
}
.a {
    border-radius: 30px 30px 30px 30px;
}

[daniel.driessen]

@codierknecht

Hallo codierknecht. Vielen Dank für deine Antwort.
Mein Datenpunkt ist definitiv vom Typ "Boolean".
Ich bin allerdings völlig deiner Meinung, dass der value === "false" Part in dem Binding eigentlich auf einen String prüfen müsste.
Tatsächlich ist das aber der einzige Weg wie ich die Bindings überhaupt zum Funktionieren bekomme. Wenn ich die Anführungszeichen weg lasse funktioniert es überhaupt nicht (egal ob mit 2 oder mit 3 Gleichheitszeichen). Mit den Anführungszeichen jedoch schon (ebenfalls egal ob mit 2 oder mit 3 Gleichheitszeichen). Wie gesagt, mein Datenpunkt ist definitiv vom Typ "Boolean".
Übrigens wird das mit dem "false" und "true" in Anführungszeichen auch in diversen Tutorials auf diversen Seiten immer so dargestellt.

Dein Tipp mit den variablen CSS-Klassen ist ne super Idee. Bin ich noch garnicht drauf gekommen. So werde ich es mal versuchen. Vielen Dank!

Grüße

[daniel.driessen]

@oliverio

Hallo OliverIO

auch dir vielen Dank für deine Antwort und dein ausführliches Code-Beispiel. Ich werde es so mal versuchen.

Vielen Dank!

Grüße