New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Determine the render mode of all Telerik controls and catch mixed render mode issues

Environment

Product UI for ASP.NET AJAX

Description

This is an updated version of the already existing version of the Determine the render mode of all Telerik controls and catch mixed render mode issues KB article.

On some pages the appearance is broken. There are a lot of reasons that can lead to broken appearance. One of them is the "mixed render mode" issue. That means that the page has controls of the same type that have different RenderModes. The controls that are child controls of other more complex controls also can cause this issue.

For example, if there is a Grid on the page, that means all other ComboBoxes, DatePickers and Menus on the same page have to be with the same render mode as the Grid.

This article will help you to inspect the page for "mixed render mode" issue. This would improve your debugging experience and let you easily identify the controls with the unexpected RenderMode:

Solution

Attached you can find a script that uses custom script to determine the render modes of all controls and the page and the Toastr.js library in order to visualize the data in a dismissable popup.

For a quick check, you can open the Browser's DevTools(F12) and in the Console tab to execute the following script

$telerik.$(document.body).append('<script src="https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/files/render-mode-script.js"></script>');

This will load the script and execute the function automatiocally.

In case you have nested iframes, then the Context of the DevTools is important and might need to be changed to work properly

Another approach is to load the scripts on the page where the issues appear and use a button click or the Console again to run the check.

To run it, you would need to load the Toastr.js library, then the attached script and run the ShowControlsRenderMode() function.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="render-mode-script.js"></script>
<asp:Button Text="Show All render modes on the page" OnClientClick="ShowControlsRenderMode(); return false;" runat="server" />

Here is also the content of the render-mode-script.js file:

(function () {
    window.$ = $ || window.$telerik.$;
    window.jQuery = window.jQuery || window.$;

    var isToastrConfigured = false;
    var timeoutRetry = 0;
    if (!window.toastr) {
        $telerik.$(document.head).append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>')
    }

    ShowControls();

    function ShowControls() {
        if (!window.toastr) {
            if (timeoutRetry < 10) {
                timeoutRetry++;
                setTimeout(ShowControls, 500);
            } else {
                alert("Please load the Toastr.js library before using the script");
            }

            return false;
        }

        if (!isToastrConfigured) {
            toastr.options.closeButton = true;
            toastr.options.timeOut = 0;
            toastr.options.extendedTimeOut = 0;
            toastr.options.tapToDismiss = false;
            isToastrConfigured = true;
        }

        var table = $telerik.$("<p>Controls and their RenderModes</p>" + getRenderModeControlsTableString());
        toastr.info(table).css("width", "auto").css("max-height", "800px").css("overflow", "auto");
    }

    window.ShowControlsRenderMode = ShowControls;

    function getRenderModeControlsTableString() {
        var lite = [];
        var classic = [];
        var mobile = [];
        var auto = [];

        $telerik.radControls.forEach(function (ctrl) {
            if (ctrl.get_renderMode() === Telerik.Web.UI.RenderMode.Lite) {
                lite.push(ctrl)
            } else if (ctrl.get_renderMode() === Telerik.Web.UI.RenderMode.Classic) {
                classic.push(ctrl)
            } else if (ctrl.get_renderMode() === Telerik.Web.UI.RenderMode.Mobile) {
                mobile.push(ctrl)
            } else if (ctrl.get_renderMode() === Telerik.Web.UI.RenderMode.Auto) {
                auto.push(ctrl)
            }
        });

        var openTable = '<table border="1" style="overflow: auto"><thead><tr><th>Id</th><th>RenderMode</th><th>Control type</th></tr></thead><tbody>'
        var closeTable = '</tbody></table>'

        function getRowStringFromControl(ctrl, renderMode) {
            var tr = '<tr>';
            var controltype = ctrl.get_element().className.split(" ")[0];

            tr = "<tr><td>" + ctrl.get_id()
                + "</td><td>" + renderMode + "</td><td>"
                + controltype + "</td></tr>";
            return tr;
        }

        for (var i = 0; i < classic.length; i++) {
            openTable = openTable + getRowStringFromControl(classic[i], "Classic");
        }

        for (var i = 0; i < lite.length; i++) {
            openTable = openTable + getRowStringFromControl(lite[i], "Lightweight");
        }

        for (var i = 0; i < mobile.length; i++) {
            openTable = openTable + getRowStringFromControl(mobile[i], "Mobile");
        }

        return openTable + closeTable;
    }
})(window);

See Also

In this article