Telerik AJAX Response Sets Body Opacity to 0

[scott]

I am migrating a SharePoint 2013 system to SharePoint 2019 that uses Telerik AJAX heavily.  I have updated the Telerik dlls to the latest version (2020.1.219).  The issue I am encountering is whenever a telerik ajax request is made, the AjaxLoadingPanel appears, and then once the response comes back the opacity is set to 0 on the body element, which hides everything on the page.

This is the response I am retrieved from Chrome developer tools:

 

|1261|scriptStartupBlock|ScriptContentNoTags|Sys.Application.add_init(function() {<br>    $create(Telerik.Web.UI.RadAjaxManager, {"_updatePanels":"","ajaxSettings":[{InitControlID : "ctl00_PlaceHolderMain_HomeRightBox1_ctl00_RadBtnOk",UpdatedControls : [{ControlID:"ctl00_PlaceHolderMain_HomeRightBox1_ctl00_pnlRightBox",PanelID:"ctl00_RadAjaxLoadingPanel1"}]},{InitControlID : "ctl00_PlaceHolderMain_HomeRightBox1_ctl00_RadWindowWarning_C_lnkClose",UpdatedControls : [{ControlID:"ctl00_PlaceHolderMain_HomeRightBox1_ctl00_pnlRightBox",PanelID:"ctl00_RadAjaxLoadingPanel1"}]},{InitControlID : "ctl00_PlaceHolderMain_HomeRightBox1_ctl00_RadWindowWarning_C_cmdAgree",UpdatedControls : [{ControlID:"ctl00_PlaceHolderMain_HomeRightBox1_ctl00_pnlRightBox",PanelID:"ctl00_RadAjaxLoadingPanel1"}]}],"clientEvents":{OnRequestStart:"",OnResponseEnd:""},"defaultLoadingPanelID":"ctl00_RadAjaxLoadingPanel1","enableAJAX":true,"enableHistory":false,"links":["/_layouts/15/1033/styles/Themable/corev15.css?rev=4fiYiJfZqSkE1X%2BbH5YbUw%3D%3DTAG0","/_layouts/15/1033/styles/XYZ/main.css?rev=5Sa4i2FVc1HsIuLe3sZYGA%3D%3DTAG0","/_layouts/15/images/favicon.ico?rev=23"],"styles":["body {opacity:0 !important}"],"uniqueID":"ctl00$RadAjaxManager1","updatePanelsRenderMode":0}, null, null, $get("ctl00_RadAjaxManager1"));<br>});

The culprit is the "styles":["body {opacity:0 !important}"] portion.  Does anyone know why this would be happening?

[Attila Antal]

Hi Scott,

I've noticed this forum post is a duplicate of the ticket you submitted. I will share my answer here as well to make it available for the community.

---------

We are aware of this issue. It is happening specifically on SharePoint 2019, see RadAjaxManager or RadAjaxPanel causes a Blank page on partial PostBack SharePoint 2019. 

Please have in mind that the Telerik components were not tested against this version of SharePoint, only on versions 2010 and 2013 and that is what we officially support, see System Requirements.

Nevertheless, I have conducted a few tests and I found that changing the EnablePageHeadUpdate might be a viable workaround.

Video demonstrating that the page goes blank when the EnablePageHeadUpdate is set to false: ajaxRequest - Update Head SharePoint 2019.

You may try disabling the EnablePageHeadUpdate property and check whether this would help. By not updating the Page Heade some information may not be persisted such as the control's state between before and after the request but may work in many scenarios, we are unsure as we have not conducted tests.

This testing shows that the ajaxRequest() would work on SharePoint 2019 if EnablePageHeadeUpdate is set to false: ajaxRequest - SharePoint 2019

In the meantime, we found the UpdatePanel would work fine, therefore, my second suggestion would be to use the generic ASP UpdatePanel for making AJAX requests instead of RadAjaxManager.

I hope this information will be helpful.

Kind regards,
Attila Antal
Progress Telerik