This is a migrated thread and some comments may be shown as answers.

modal popup freezes parent window on close

2 Answers 1307 Views

Window

This is a migrated thread and some comments may be shown as answers.

Chris asked on 15 Dec 2017, 06:29 PM

the application I am developing has a detail popup which opens model

when it closes the parent window does not re-enable - the controls remain frozen

the parent page below

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/OneColumn.master" AutoEventWireup="true" CodeFile="RosterTelerik.aspx.cs" Inherits="iGM_RosterTelerik" %>

<%@ MasterType VirtualPath="~/MasterPages/TwoColumn.Master" %>

<%@ Register Src="~/Controls/UserBox.ascx" TagName="UserBox" TagPrefix="uc1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

<link href="../Styles/Oxygen/NewRoster.css" rel="stylesheet" type="text/css" />

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

<uc1:UserBox ID="UserBox1" runat="server"></uc1:UserBox>

<h1 style="float: left">Roster Page</h1>

<br />

<asp:Panel ScrollBars="Vertical" Width="100%" runat="server">

<telerik:RadScriptManager ID="rsManager" runat="server" />

<telerik:RadAjaxManager ID="raManager" runat="server" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rgRoster">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgRoster" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadCodeBlock ID="rcBlock" runat="server">

<script type="text/javascript">

function openRadWindow(playerID)

{

var radwindow = $find('<%=rwmPlayer.ClientID %>');

radwindow.setUrl('../Library/PlayerPopup.aspx?PlayerID=' + playerID);

radwindow.set_width(900);

radwindow.set_height(540);

radwindow.set_modal(true);

radwindow.show();

}

function RowDropped(sender, eventArgs)

{

var theItem = eventArgs.get_draggedItems()[0];

var theRole = theItem.findElement("rlbRole").innerText;

var theIndex = theItem.get_itemIndexHierarchical();

var stringofIDs = "";

var theMasterTable = $find("<%= rgRoster.ClientID %>").get_masterTableView();

var theItems = theMasterTable.get_dataItems();

for (var i = 0; i < theItems.length; i++)

{

var role = theItems[i].findElement("rlbRole").innerText

if (role == theRole)

{

stringofIDs = stringofIDs + role + '-' + theItems[i].get_itemIndexHierarchical() + '&';

}

var theHiddenField = document.getElementById("<%= hdnStringofIDs.ClientID %>");

theHiddenField.value = stringofIDs;

}

</script>

</telerik:RadCodeBlock>

<asp:HiddenField ID="hdnStringofIDs" runat="server" />

<telerik:RadGrid ID="rgRoster" AutoGenerateColumns="False" OnNeedDataSource="rgRoster_NeedDataSource"

OnItemCreated="rgRoster_ItemCreated" OnItemDataBound="rgRoster_ItemDataBound" OnEditCommand="rgRoster_EditCommand"

OnUpdateCommand="rgRoster_UpdateCommand" Width="100%" runat="server" OnRowDrop="rgRoster_RowDrop" OnColumnCreated="rgRoster_ColumnCreated" >

<GroupingSettings CollapseAllTooltip="Collapse all groups" />

<MasterTableView DataKeyNames="id" EditMode="InPlace" >

<EditFormSettings>

<EditColumn UniqueName="CareerStageImage" ButtonType="ImageButton" >

</EditColumn>

<PopUpSettings />

</EditFormSettings>

<GroupByExpressions>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldName="positionCategoryCode" />

<telerik:GridGroupByField FieldName="positionCategory" />

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="positionCategoryCode" SortOrder="Ascending" />

</GroupByFields>

</telerik:GridGroupByExpression>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldName="positionSubCategoryCode" />

<telerik:GridGroupByField FieldName="positionSubCategory" />

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="positionSubCategoryCode" />

</GroupByFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<RowIndicatorColumn Visible="False">

</RowIndicatorColumn>

<ExpandCollapseColumn Created="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn UniqueName="id" DataField="id" Visible="false" ReadOnly="true" />

<telerik:GridTemplateColumn UniqueName="hiddenCareerStage" Visible="false" ReadOnly="true" >

<ItemTemplate>

<asp:HiddenField ID="hdnCareerStage" Value='<%#DataBinder.Eval(Container.DataItem, "careerStage")%>' runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridNumericColumn UniqueName="Depth" DataField="positionDepth" DecimalDigits="0" HeaderStyle-Width="20px" HeaderText="DPTH" ReadOnly="true">

</telerik:GridNumericColumn>

<telerik:GridTemplateColumn UniqueName="role" HeaderText="ROLE" ReadOnly="true">

<HeaderStyle Width="42px" />

<ItemTemplate>

<telerik:RadLabel ID="rlbRole" Text='<%#DataBinder.Eval(Container.DataItem, "role")%>' runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="nfl" HeaderStyle-Width="36px" HeaderText="NFL" ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn>

<HeaderStyle Width="96px" />

<ItemTemplate>

<asp:HyperLink ID="hlName" Text='<%#DataBinder.Eval(Container.DataItem, "name")%>' runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

more columns here

<telerik:GridDropDownColumn UniqueName="CareerStage" DropDownControlType="RadComboBox" HeaderStyle-Width="72px" HeaderText="CAREER STAGE" ItemStyle-ForeColor="Black"

DataField="careerStage" DataSourceID="xdsCareerStage" ListTextField="Text" ListValueField="Value" AutoPostBackOnFilter="true" />

<telerik:GridEditCommandColumn UniqueName="CareerStageImage" ButtonType="ImageButton" EditImageUrl="../Images/CareerStage/Career_0None.png" UpdateImageUrl="../Images/CareerStage/ThumbsUp.png" HeaderText="Click to Update" HeaderStyle-Width="32px" />

<telerik:GridBoundColumn DataField="notes" HeaderStyle-Width="160px" HeaderText="NOTES" ReadOnly="true" >

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowRowsDragDrop="true">

<Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />

<ClientEvents OnRowDropped="RowDropped" />

</ClientSettings>

</telerik:RadGrid>

<telerik:RadWindowManager ID="rwmPlayer" DestroyOnClose="true" runat="server" >

<Windows>

<telerik:RadWindow ID="rwPlayer" NavigateUrl="../Library/PlayerPopup.aspx" CenterIfModal="false" runat="server" />

</Windows>

</telerik:RadWindowManager>

</asp:Panel>

<asp:XmlDataSource ID="xdsCareerStage" DataFile="~/App_Data/CareerStages.xml" runat="server" />

</asp:Content>

2 Answers, 1 is accepted

answered on 20 Dec 2017, 11:40 AM

rw-close-test.zip

Hello Chris,

I advise that you first examine the following article to see how to open RadWindow instances (mainly, that you need to either reference a concrete RadWindow, or use the RadWindowManager's open() method): https://docs.telerik.com/devtools/aspnet-ajax/controls/window/getting-started/opening-windows.

This article also explains how to deal with DestroyOnClose scenarios: https://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/common-issues#once-a-radwindow-is-closed-it-loses-all-its-settings-width-height-modality-etc. If you want to dispose the majority of the windows, but not a concrete one, just set its own DestrohOnClose prperty to false, it will override the value inherited from the RadWindowManager.

To get to the page being frozen after a RadWindow is closed - this is not expected, and the most likely reason is a JavaScript error somewhere. I am attaching here a sample I built on top of your snippets that works fine for me, so you can compare against your actual code to find the difference causing the problem.

Regards,

Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.