Show main RadAjaxLoadingPanel when clicking on the ok button of a RadWindow

[Marco]

Hi to all i need some help:

I have a page with a RadAjaxLoadingPanel that is working propertly when i click on any element on the page that postbak the page, but when i click over a button in a RadWindow, the page makes a complete posback and is not using the RadAjaxLoadingPanel.

The goal is to use the RadWindow as a confirm window for deleting a element in a RadGrid and i whant that when you click "Ok" the RadWindow close and the  RadAjaxLoadingPanel appears over the RadGrid.

I have all my HTML Telerik controls warped in a RadAjaxPanel, but for a reasson is not showing the RadAjaxLoadingPanel and is making a complete postback.

Thanks in advance.

This is my HTML code:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" />
    <telerik:RadAjaxPanel ID="AjaxContent" runat="server">
        <%--Place holder for the reserved for the specific html of the page.--%>
        <div class="divTitle h3">
            <%--Page title.--%>
        Data Imports List
        </div>
        <div class="tabWarper">
            <telerik:RadGrid runat="server" ID="RadGridDataImportsList" AllowPaging="True" AllowSorting="true" DataSourceID="GridDataSource" Height="578" OnItemDataBound="RadGridDataImportsList_ItemDataBound">
                <MasterTableView DataKeyNames="Id, Type" DataSourceID="GridDataSource" AutoGenerateColumns="False" AllowPaging="true"
                    AllowAutomaticInserts="false" ClientDataKeyNames="Id, Type">
                    <Columns>
                        <telerik:GridBoundColumn DataField="Id" HeaderText="Id" SortExpression="Id" UniqueName="Id" Visible="false" MaxLength="100">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name" UniqueName="Name" Visible="true" MaxLength="100">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Description" HeaderText="Description" SortExpression="Description" UniqueName="Description" Visible="true" MaxLength="100">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Type" HeaderText="Type" SortExpression="Type" UniqueName="Type" Visible="true" MaxLength="100">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true">
                    <Selecting AllowRowSelect="True"></Selecting>
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                    <ClientEvents OnRowDblClick="OnRowDblClick" />
                </ClientSettings>
                <PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" Position="Bottom" PageSizeControlType="RadComboBox"></PagerStyle>
            </telerik:RadGrid>
            <ef:EntityDataSource ID="GridDataSource" runat="server" ContextTypeName="Common.EntityModels.PlatformDB" ConnectionString="name=PlatformDB"
                DefaultContainerName="PlatformDB" EnableUpdate="False" EnableDelete="False" EnableInsert="False" EntitySetName="DataSourceSystems" />
            <%--Delete confirmation window.--%>
            <telerik:RadWindowManager runat="server" ID="DeleteRadWindowManager" Skin="Metro">
                <Windows>
                    <telerik:RadWindow ID="DeleteRadWindow" Modal="true" Behaviors="Close, Move" VisibleStatusbar="false" Width="350px" Height="200px" runat="server">
                        <ContentTemplate>
                            <div class="rwDialogPopup">
                                <div class="rwDialogText">
                                    <asp:Literal ID="lConfirmDeleteMessage" Text="Are you sure you want to delete this item?" runat="server" />
                                </div>
                            </div>
                            <br />
                            <div class="clr fr">
                                <telerik:RadButton runat="server" ID="btnDeleteOK" Text="OK" OnClick="Delete_Click" Skin="Metro" CausesValidation="false" />
                                <telerik:RadButton runat="server" ID="btnDeleteCancel" Text="Cancel" OnClientClicked="closeDeleteConfirm" Skin="Metro" CausesValidation="false" AutoPostBack="false" />
                            </div>
                        </ContentTemplate>
                    </telerik:RadWindow>
                </Windows>
            </telerik:RadWindowManager>
            <div class="bottomButtons">
                <asp:Label ID="lblErrorMessage" runat="server" CssClass="text-danger text-message fl" />
                <asp:Label ID="lblInformationMessage" runat="server" CssClass="text-message fl" />
                <telerik:RadButton ID="btnDelete" runat="server" OnClientClicked="openDeleteConfirm" Text="Delete" SingleClick="false" Skin="Metro" CssClass="fr" AutoPostBack="false" />
                <telerik:RadButton ID="btnNew" runat="server" OnClick="New_Click" Text="New" SingleClickText="New" SingleClick="true" Skin="Metro" CssClass="fr" />
            </div>
        </div>
        <script type="text/javascript">
            function OnRowDblClick(sender, eventArgs) {
                ClikedDataKey = eventArgs._dataKeyValues.Id;
                window.location.href = 'DataImports.aspx?id=' + ClikedDataKey; // Redirect the page          
                return;
            }
        </script>
    </telerik:RadAjaxPanel>
</asp:Content>

This is the code behind:

    public partial class DataImportsList : DetailBasePage
    {
        // RadAjaxManager setup
        public override void SetAjaxManagerSettings()
        {
            base.AjaxManagerSettings.Add("AjaxContent", new string[] { "AjaxContent" });
        }
    }

This is the function of the override:

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            //If exists RadAjaxManager in the page, add the page AjaxManagerSettings
            if (this.Master.FindControl("MainContent") != null && this.Master.FindControl("MainContent").FindControl("RadAjaxManager") is RadAjaxManager)
            {
                var tRadAjaxManager = this.Master.FindControl("MainContent").FindControl("RadAjaxManager") as RadAjaxManager;

                foreach (var tAjaxManagerSetting in this.AjaxManagerSettings)
                {
                    // Check if exists the control
                    if (this.Master.FindControl("MainContent").FindControl(tAjaxManagerSetting.Key) != null)
                    {
                        var tAjaxSetting = new AjaxSetting { AjaxControlID = tAjaxManagerSetting.Key };

                        foreach (var tUpdatedControlId in tAjaxManagerSetting.Value)
                        {
                            // Check if exists the control
                            if (this.Master.FindControl("MainContent").FindControl(tUpdatedControlId) != null)
                                tAjaxSetting.UpdatedControls.Add(new AjaxUpdatedControl { ControlID = tUpdatedControlId, LoadingPanelID = tRadAjaxManager.DefaultLoadingPanelID });
                        }

                        if (tAjaxSetting.UpdatedControls.Count > 0)
                            tRadAjaxManager.AjaxSettings.Add(tAjaxSetting);
                    }
                }
            }
        }

[Marin Bratanov]

Hi Marco,

To use RadWindow's ContentTemplate with AJAX you need to provide explicit AJAX configuration inside it, as shown here: http://www.telerik.com/help/aspnet-ajax/window-ajaxifying.html.

Also note that it is best to move that RadWindow out of the RadWindowManager when its ContentTemplate is used (see the last point here: http://www.telerik.com/help/aspnet-ajax/window-controls-container.html). A RadWindow can work just fine without a RadWindowManager

Also, I advise that you make sure you do not nest AJAX settings and RadAjaxPanel, as explained here: http://www.telerik.com/help/aspnet-ajax/ajax-controls-in-ajaxpanel-and-ajaxsettings.html.

By far, the best advice I can offer is to use the built-in confirmation dialog for the RadGrid: http://www.telerik.com/help/aspnet-ajax/grid-adding-delete-prompt.html. Just add a RadWindowManager to the page, add a GridButtonColumn with CommandName=Delete and set its ConfirmDialogType property to RadWindow. In case you need a special look and feel for the confirm dialog, you can change its template: http://www.telerik.com/help/aspnet-ajax/window-dialogs-changing-dialog-templates.html.

If this is not an option, you will need an AJAX setting that includes the grid whose initiator is the OK button, so you will need to rewrite the entire AJAX logic (e.g., replace the RadAjaxPanel with ASP:Panel and use that as updated control).


Regards,

Marin Bratanov
Telerik

 

 

[Marco]

Thanks for your awnser