Issues when using DocumentViewer with Kendo UI Window

DocumentUltimate > Troubleshooting
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.
Article ID: 24, , Modified: 9/1/2024 at 5:18 AM

Was this article helpful?

Share this article