Rank 1
I am a software engineer supporting a legacy product which uses Telerik 2018.2.516.45 . We are using Telerik for ASP.NET Core .
We have a Telerik Radwindow embedded into an .aspx page which we intend to use as a modal dialog box thus:
< telerik : RadWindow runat="server" ID="rwE1Products" DockMode="false" VisibleOnPageLoad="false" AutoSize="true" OnClientBeforeShow="onPopupShow" OnClientClose="onPopupHide" ClientIDMode="Static">
<ContentTemplate>
<div class="info_popup">
<Repeater runat="server" ItemType="System.Tuple`2[System.String,System.String]" ID="rptData">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<!-- some content -->
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<EmptyTemplate>
</EmptyTemplate>
</Repeater>
</div>
</ContentTemplate>
</telerik:RadWindow>
And on this page, we call it thus:
function showE1Product() {
var oWnd = $find('rwE1Products');
oWnd.show();
$('#RadWindowWrapper_rwE1Products').css({ 'z-index': '10007' });
$('#rwE1Products_C').css({ 'overflow': 'hidden' });
}
Which is called with a button click.
When we click the button, the modal appears blank and the screen is moreover locked. Looking in our chrome developer tools, we see the error:
Uncaught TypeError: Cannot read property 'style' of undefined
at c.RadWindow.setOverflowVisible (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q5gVEhb1VTyApq4eHCb1LIATB-dfkUbfjZqwHAMAcwKstvsADD5CfrfCrz5tBRnf1RC2Ji982n8TmXGh3FF4LqbYvZEtKgOV2F48baIXy3BkdwUasQ2&t=2afde251:851)
at c.RadWindow.autoSize (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q5gVEhb1VTyApq4eHCb1LIATB-dfkUbfjZqwHAMAcwKstvsADD5CfrfCrz5tBRnf1RC2Ji982n8TmXGh3FF4LqbYvZEtKgOV2F48baIXy3BkdwUasQ2&t=2afde251:641)
at c.RadWindow._afterShow (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q5gVEhb1VTyApq4eHCb1LIATB-dfkUbfjZqwHAMAcwKstvsADD5CfrfCrz5tBRnf1RC2Ji982n8TmXGh3FF4LqbYvZEtKgOV2F48baIXy3BkdwUasQ2&t=2afde251:488)
at c.RadWindow.show (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q5gVEhb1VTyApq4eHCb1LIATB-dfkUbfjZqwHAMAcwKstvsADD5CfrfCrz5tBRnf1RC2Ji982n8TmXGh3FF4LqbYvZEtKgOV2F48baIXy3BkdwUasQ2&t=2afde251:439)
at showE1Product ()
at HTMLAnchorElement.onclick ()
Drilling down into the radwindow card, within the radwindow javascript, i see the problem here:
if(this._dockMode){this.get_contentElement().style
get_contentElement() is returning null. And the reason it is returning null is because this.pending_ui is also null.
I have been googling, asking colleagues, and scanning these forums without finding any idea as to how to solve the issue. I removed the "ClientIDMode=Static" field without result.
I see that this call is set only when dockmode is nonzero. Is there a way to null that out and bypass the issue? If not, why would pending_ui be null?
This is well down into the guts of the radwindow implementation at this point, so I thought it worthwhile to ask for advice at this juncture.
One final clue is that this was apparently working up until about April of this year, but we're seeing the same problem on IE 11 , which hasn't been updated in forever, so I don't think the issue is due to a browser change.
UPDATE:
The javascript methods on the clientshow and clienthide hooks are
function onPopupShow(sender, args) {
$('#updateProgressDiv').show();
}
function onPopupHide(sender, args) {
$('#updateProgressDiv').hide();
}
which is apparently another div on the page.
Removing these hooks allows the dialog to display without locking the screen. However, we still do not see the content.
UPDATE 2: Modifying the "open window" javascript to use a manager thus:
function showE1Product() {
var manager = GetRadWindowManager();
manager.open(null, 'rwE1Products');
/* var oWnd = $find('rwE1Products');
oWnd.show(); */
$('#RadWindowWrapper_rwE1Products').css({ 'z-index': '10007' });
$('#rwE1Products_C').css({ 'overflow': 'hidden' });
}
Gets rid of the console errors, but the content is still not populated.
Still, we seem to have answered at least one of the problems: We were getting the errors because we weren't using a radwindowmanager when one was available.
UPDATE #3 :
Solved the problem. Removed the clientidmode=static and changed the open method to
function showE1Product() {
var oWnd = $find('<%= rwE1Products.ClientID %>');
oWnd.show();
$('#RadWindowWrapper_<%= rwE1Products.ClientID%>').css({ 'z-index': '10007' });
$('#<%= rwE1Products.ClientID%>_C').css({ 'overflow': 'hidden' });
}
Apparently radwindow doesn't like static ids. If anyone would like to shed some light on why this would be and how we can use them PROPERLY, I'd love to read it. But the issue itself is solved.
UPDATE #4: Now that I know what to look for, I find out that you just can't use static ids with a telerik control.
https://www.telerik.com/forums/changing-window-clientidmode-to-static-causes-javascript-error
So the problem was the static id, and there is no way to use one; we must use default client id mode. This question is answered.
Respectfully,
Brian P.
Rank 1