Hello
I've just upgraded from KendoUI v2017.3.913 to KendoUI v2018.1.221 and had some not nice visual changes in kendoDialog and kendoConfirm.
See attachment:
- KendoUI v2017_3_13.png : How it was and how I would like to have it again
- KendoUI v2018_1_221.png : Screwed up in latest KendoUI version
Two unwanted things in latest release:
1. Pressed button, ignoring content
2. Unwanted grey bar at the bottom of the dialog (same bar with title activated)
-> I have the exactly same problem in kendoDialog and kendoConfirm.
To point 1:
Of course it works in your widget samples, so I made a standalone sample (outside from my project). The button appears but is not fully visible. I have the fully working code here:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <!-- Telerik Framework --> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.blueopal.min.css" /> <script src="http://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script> <!-- Font Awesome --> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <style type="text/css"> .green { color: #208e14; } </style> <script> $(document).ready(function() { $("#dialog").kendoDialog({ title: false, width: 900, height: 400, closable: false, buttonLayout: "normal", actions: [{ text: "<i class='fas fa-check green' style='font-size: 18px; width: 30px;'></i>", action: function(e){ // e.sender is a reference to the dialog widget object alert("OK action was clicked"); // Returning false will prevent the closing of the dialog return true; }, }] }); }); </script> </head> <body> <div id="dialog"></div> </body></html>
The fact the button is pressed in my project is a problem I have to find but I don't understand why the button is not centered/fully visible in the code above.
To point 2 (grey bar):
I've checked the API documentation of kendoDialog and kendoConfirm how to get rid off that grey bar but couldn't find something. If I wanted a grey bar I would place it by myself. So I don't understand why Telerik changed the layout that way
The question here is: How can I get rid off that unwanted grey bar at the bottom (probably same way as on top with active title).
Regards
6 Answers, 1 is accepted
Rank 1
Iron
I've found the button squeeze problem (a style I had to set to make the buttons visible, not needed anymore).
Now I've tried to set the header (title) content of the dialog window. I either do something wrong or HTML is now allowed in title area (while its allowed in bottom area (see screenshot). Just to test it I used the same HTML code in title as well as in action area (bottom).
$("#infookdiv").kendoDialog({ visible: true, title: "<i class='fas fa-check fa-inverse text_darkgreen' style='font-size: 18px; width: 30px;'></i>", closable: false, modal: true, buttonLayout: "normal", width: 900, height: 500, actions: [{ text: "<i class='fas fa-check fa-inverse text_darkgreen' style='font-size: 18px; width: 30px;'></i>", action: function(e){ // Ok was clicked } }]});
How can I make the header accept my HTML code?
Regards
Rank 1
Iron
Tried this as well:
... title: kendo.template('<div style=\"float: left; font-weight: bold; margin-bottom: 10px; font-size: 20px;\">Übersicht Spielprüfung</div>');...
Header output: "function anonymous(data) { var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(..."
So this seems to work neither.
I am glad to hear that you have managed to successfully resolve the initial issue faced.
As of the Kendo UI 2017 R1 SP1 release, adding HTML to the Window/Dialog widget's title option is no longer supported. This change has been introduced in order to prevent any possibility of a script injection when using this property and is related to the following GitHub issue.
However, you can still work around the issue by programmatically inserting HTML in the title of the widget (as shown in the following Knowledge Base Article):
<script> dlgOpen.click(function () { var dialog = $("#infookdiv").data("kendoDialog"); dialog.element.prev().find(".k-window-title").html("<b class='custom'>HTML title</b><i class='k-icon k-i-globe'></i>"); dialog.open(); });</script>Regards,
Dimitar
Progress Telerik
Rank 1
Iron
Hi Dimitar
Thank you for the answer. I'm just thinking whether to create an own dialog box or to stay on Telerik's one. There is still the other issue (grey bar) you probably missed in my message but I think there is no official way to change it, so I tend to an own dialog box.
Btw.: You still can directly implement HTML code to the action button(s) like this:
... actions: [{ text: "<i class='fas fa-check fa-inverse text_darkgreen' style='font-size: 18px; width: 30px;'></i>"
Considering security issue. ;)
They grey bar is visible because an action is defined in the configuration options of the Dialog. In case you would like for it to be hidden or with a modified appearance, then this could be achieved by either removing all the actions from the configuration of the widget, or hiding/modifying it with CSS as follows:
<style> .k-dialog-buttongroup { display: none; }</style>Concerning the vulnerability suggestion, currently only the title option of the Dialog is encoded, as this might be a very common case, where the data for this option can come from a database. For the action buttons, no encoding has been currently implemented, as this has not yet been reported as a potential vulnerability (due to its usage). However, I would encourage you to log a new feature request in the Kendo UI Feedback Portal for implementing an encoding utility for the Dialog actions. Alternatively, you could also contribute to the Kendo UI Core repository (Dialog is open source) and extend the widget with additional feature/property.
Regards,
Dimitar
Progress Telerik
Rank 1
Iron