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.
- Render Modes documentation article;
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:
- Incorrect or Distorted appearance documentation article;
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
(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);
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" />
See Also
- Render modes article
- Skins Troubleshooting article
- Improve Your Debugging Skills with Chrome DevTools blog post