Info: Issues when using DocumentViewer with Kendo UI Window

There were some issues when rendering DocumentViewer v7.x as content inside Kendo UI Window. These are fixed now.

Version 7.0.10 - August 6, 2024

Fixed: DocumentViewer will render a placeholder tag along with the script tag.
We need a tag other than script tag for the component even if we render DOM on the client side.
For example, Kendo UI Window, removes/moves script tags from content html so component is rendered to wrong place
and not inside the window.
Kendo UI Window has this code which caused the issue:
// remove script blocks to prevent double-execution
element.find("script").filter(executableScript).remove();

Sample code (for Javascript Kendo UI):

@using GleamTech.AspNet.Core
@using GleamTech.AspNet.UI
@using GleamTech.DocumentUltimate.AspNet.UI

<!DOCTYPE html>

@{
    Layout = null;

    var documentViewer = new DocumentViewer
    {
        Width = CssLength.Percentage(100),
        Height = CssLength.Percentage(100),
    };
}
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.2.514/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.0.1/default/default-ocean-blue.css">
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
	@this.RenderHead(documentViewer)
</head>
<body>

<div id="dialog">
	@this.RenderBody(documentViewer)
</div>

<script>

    $("#dialog").kendoWindow({
        width: "800px",
        height: "600px",
        title: "Document",
        modal: true,
        actions: [
            "Pin",
            "Minimize",
            "Maximize",
            "Close"
        ]
        }
    );

    
</script>

</body>
</html>

Version 7.0.9 - August 2, 2024

Fixed: Error "TypeError: Failed to construct 'URL': Invalid URL" was thrown when DocumentViewer was rendered as content
inside Kendo UI Window. The reason is that when added as content in Kendo Window, weird stuff happens,
document.currentScript refers to inline script tag which has jquery code and document.currentScript.src comes as empty string
thus the URL constructor error. Avoided using document.currentScript.src when it's empty in cases like this one,
as the issue may also appear in other UI frameworks.
Improved: Added EscapeClosingScriptTags method to RazorPageExtensions, WebViewPageExtensions and WebPageExtensions
which escapes closing script tags </script>, i.e. replaces with <\/script>.
When you render a component inside a tag, for example when you set a javascript variable to
the result of inline @RenderHead or @RenderBody calls, the result may contain closing tags
and browser treats these tags as an immediate stop even if they are enclosed in a javascript string literal:
XML
```
<script>
   //this will fail in browser because there are closing `</script>` tags in the rendered result.
   var html = `@this.RenderBody(component)`;
</script>
```
So to prevent the issue, escape closing script tags when you are inside tag, with this method:
XML
```
<script>
   var html = `@this.RenderBody(component).EscapeClosingScriptTags()`;
</script>
```
Details: The browser finds the piece in the string and thinks that it is the closing tag
of the first script element. It treats the rest of the script and the real closing tag as regular text
and displays it in the page (except for the tag).

Sample code (for Javascript Kendo UI):

@using GleamTech.AspNet.Core
@using GleamTech.AspNet.UI
@using GleamTech.DocumentUltimate.AspNet.UI

<!DOCTYPE html>

@{
    Layout = null;

    var documentViewer = new DocumentViewer
    {
        Width = CssLength.Percentage(100),
        Height = CssLength.Percentage(100),
    };
}
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>;
    <script src="https://kendo.cdn.telerik.com/2024.2.514/js/kendo.all.min.js"></script>;
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.0.1/default/default-ocean-blue.css">;
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>;
</head>
<body>
  
<div id="dialog"></div>
<script>

    $("#dialog").kendoWindow({
        width: "800px",
        height: "600px",
        title: "Document",
        modal: true,
        actions: [
            "Pin",
            "Minimize",
            "Maximize",
            "Close"
        ]
        }
    );
    var dialog = $("#dialog").data("kendoWindow");


    var html = `
	    @this.RenderHead(documentViewer).EscapeClosingScriptTags()
	    @this.RenderBody(documentViewer).EscapeClosingScriptTags()
    `;

    dialog.content(html);
    
</script>
</body>
</html>

For ASP.NET Kendo UI, you would not need to use EscapeClosingScriptTags.

Version 7.0.10 - August 6, 2024

Version 7.0.9 - August 2, 2024

Reply to Thread

Related Knowledge Base Articles