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

How to handle loading ajax panel when hit button in master page ?

8 Answers 293 Views

AjaxLoadingPanel

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

8 Answers, 1 is accepted

Accepted

answered on 12 Feb 2020, 04:54 PM

1452986.zip

Hi M Kumar,

Unfortunately, the described approach isn't the recommend way to handle Out-of-Panel Updates in the Master-Detail scenario. For this scenario, it is recommended to use an AjaxManager and an AjaxManagerProxy. This is because the AjaxManager is better suited to handle these complex scenarios. Let me review how this could work below.

1. Place the AjaxManager and Button on the Master Page

This requires self referencing the control in the AjaxManager on the Master Page. See the highlighted items in the below code snippet.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="TWA.MasterDetailAjaxPanel.Site" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadButton1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
        <div>
            <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" AutoPostBack="true"></telerik:RadButton>
            <asp:ContentPlaceHolder ID="content" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

2. Add the AjaxManagerProxy and an asp:Panel to the Content Page

When the button is clicked the AutoPostback is then propagated to the AjaxManagerProxy which also uses the same self-referencing method as the AjaxManager as well. Note the below highlighted items in the below code snippet.

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<asp:Content ID="DefaultHead" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="DefaultContent" ContentPlaceHolderID="content" runat="server">
    <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <asp:Panel ID="Panel1" runat="server">
            <%= DateTime.Now.ToString()  %>
    </asp:Panel>
</asp:Content>

For additional reference, I have attached a sample project that can be used to test. In order to run the project, ensure the Telerik NuGet Feed is configured in Visual Studio. This may also require changing the UI for ASP.NET AJAX version in the NuGet Package Manager as appropriate.

Please let me know if you need any additional information. Thank you for using the UI for ASP.NET AJAX Forums.

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.

answered on 13 Feb 2020, 06:47 AM

Hi ,
Thanks for reply, it will not post back the page as it is i want ,but in above sample update value in client slide , i have binding data in rad grid when click button and text box value in master page, in child page i use Dim SearchbarM As RadToolBar = CType(Page.Master.FindControl("Searchbar"), RadToolBar) to get value which key in master page and i call server side button click event in child page, so page is not postback, but data not binding in grid view.

Pls reply,

Thanks

answered on 13 Feb 2020, 04:26 PM

1452986.zip

Hi M Kumar,

Thank you for providing the additional information. Although, this does make the scenario more complex and will require more information to troubleshoot. More specifically, it is unclear how Grid is being data bound.

With that said, I recommend following the How-to: Ajaxify and Update Controls in Master and Content Page documentation to get started. It demonstrates how to initiate an Ajax Request from a Master Page to a Content Page and vice versa. Alternatively, it may be possible to Manually Add an Ajax Request as described in the documentation.

For additional reference, I have attached a working sample of the code provided in the Ajaxify documentation.

If you would like me to troubleshoot further I would need a working sample to review the issue(s).

I hope this helps. Please let me know if you have any additional questions. Thank you for being a valued UI for ASP.NET AJAX developer.

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.

answered on 23 Jul 2020, 11:28 AM

Hi,

Thanks for reply,
Here i attach sample application which text box and button click from master page , then in child page removing that Name from rad grid, but it will refresh whole page, instead of refresh rad grid only.

Before remove Name : https://prnt.sc/tn72ek

After Remove Name : https://prnt.sc/tn73lj

http://prntscr.com/tn74n7

same application in dropbox -- https://www.dropbox.com/s/5kz5ise49hzvg70/masterpagesample.rar?dl=0

Pls advice me , how to restrict page refersh
Note: I never put any loading panel in this sample application
Thanks

answered on 21 Aug 2020, 04:20 AM

Hi sir,

In master page I use RadToolBar

RadToolBarButton i use item template to display radtextbox we use the event onkeyup in that event i call child page radbutton the whole page cannot refresh only grid refresh
but i use another RadToolBarButton in that we use the event "OnClientButtonClicking" in that event i call child page radbutton the the whole page refresh
i use update control also. both radbutton in child page.

please reply ASPA