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

RadAjaxLoadingPanel not showing

19 Answers 656 Views

Ajax

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

Jean-Marc asked on 07 Sep 2012, 03:02 PM

Hello,
I have a problem with RadAjaxLoadingPanel:
my web application has a RadGrid control and a RadTreeView.
When I click on a node of the radtreeview the radgrid performs a rebind action and loads data associated with the node values.

I use a RadAjaxManager to perform the update/rebind action of the radgrid and i use a RadAjaxLoadingPanel to hide the radgrid while loading data.
The update process is correctly performed but the RadAjaxLoadingPanel is not displayed.

In my application there are other controls that trigger the update action of ther radgrid and the update is correctly performed and also the RadAjaxLoadingPanel is correctly displayed.

How can I fix my problem and make the RadAjaxLoadingPanel visible during the update of the radgrid when clicking on a Radtreeview node, like with the other controls?

A short part of the code is following:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Block" EnableHistory="False">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="CheckBoxMerge">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridAccounts" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Block" />
                    <telerik:AjaxUpdatedControl ControlID="TextElementi" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridAccounts" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Block" />
                    <telerik:AjaxUpdatedControl ControlID="TextElementi" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGridAccounts">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridAccounts" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Block" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ButtonEseguiFiltro">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridAccounts" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Block" />
                    <telerik:AjaxUpdatedControl ControlID="TextElementi" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CatTree1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridAccounts" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Block" />
                    <telerik:AjaxUpdatedControl ControlID="TextElementi" />
                </UpdatedControls>
            </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

CheckBoxMerge, CheckBox1, RadGridAccounts, ButtonEseguiFiltro perform correctly the update and also the RadAjaxLoadingPanel1 is displayed, while CatTree1(the radtreeview) performs the update but the RadAjaxLoadingPanel1 is ot displayed

19 Answers, 1 is accepted

answered on 12 Sep 2012, 09:19 AM

Hi Jean-Marc,

Could you please try to set UpdatePanelHeight to "100%" in the problematic setting and verify if this helps.
Another approach could be to wrap the RadGrid control into regular asp Panel and add this Panel to be updated by the TreeView control in the AjaxManager setting.

Give this suggestions a try and let me know if they help.

Kind regards,
Maria Ilieva
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 13 Sep 2012, 10:34 AM

If I insert the radgridview in an asp panel and then I use the radajaxmanager to update the panel and the other controls there are two situation:
If I update the panel instead of the radgrid (<telerik:AjaxUpdatedControl ControlID="panel1") nothing changes: the radgrid and the other controls are updated but the RadAjaxLoadingPanel is not displayed while loading.
If I add the asp panel to the UpdatedControls:
<telerik:AjaxSetting AjaxControlID="CatTree1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridAccounts" />
                    <telerik:AjaxUpdatedControl ControlID="TextElementi" />
<telerik:AjaxUpdatedControl ControlID="panel1" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Block" />
                </UpdatedControls>
            </telerik:AjaxSetting>

the radgrid in no more visible after the first update and the following updates are no more performed and the controls ("TextElementi") are no more updated.

answered on 17 Sep 2012, 09:34 AM

this is the asp code

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="CreateAccount.ascx.vb" Inherits="Admin_AccountingManagement_CreateAccount" %>

<%@ Register TagPrefix="qsf" TagName="CommandBar" Src="~/Admin/CommonASCX/CommandBar.ascx" %>

<%@ Register TagPrefix="qsf" TagName="RTV" Src="~/Admin/CategoriesManagement/TreeCategories.ascx" %>

<link href="/GlobalManagement_Preferences/NewsManagement/Style/NM_Admin/NM_Admin.css" rel="stylesheet" type="text/css" />

<table cellpadding="0" cellspacing="0" style=" width:100%; " id="headerText" runat="server">

<tr>

<td>

<table style="width: 100%; padding: 0px 18px 0px 18px " class="Mappa_fondo" cellspacing="0" cellpadding="0">

<tr>

<td class="Mappa_testo" style="text-align: left; height: 34px;">

I-Connect Manager / Utenti / <span class="Mappa_testo_selez" id="use"></span></td>

</tr>

</table>

</td>

</tr>

<tr>

<td style="height: 8px">

</td>

</tr>

</table>

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

<script language="javascript" type="text/javascript">

window.onload = function () {

scripts();

var importa = document.getElementById("ButtonImporta");

var esporta = document.getElementById("ButtonEsporta");

var textElementi = document.getElementById("TextElementi");

var hidden = document.getElementById('<%= Hidden1.ClientID %>');

importa.style.display = hidden.value;

esporta.style.display = hidden.value;

textElementi.style.display = hidden.value;

var filtri = document.getElementById("filtri");

var first = document.getElementById("first");

var second = document.getElementById("second");

var third = document.getElementById("third");

var fourth = document.getElementById("fourth");

if (GetCookie("filtri") != "") {

filtri.style.display = GetCookie("filtri");

}

if (GetCookie("first") != "") {

first.style.display = GetCookie("first");

}

if (GetCookie("second") != "") {

//alert(hidden2.value);

second.style.display = GetCookie("second");

}

if (GetCookie("third") != "") {

//alert(hidden3.value);

third.style.display = GetCookie("third");

}

if (GetCookie("fourth") != "") {

//alert(hidden4.value);

fourth.style.display = GetCookie("fourth");

}

// function onTreeViewNodeClicked(sender, eventArgs) {

// var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

// if (ajaxManager != null) {

// var settings = ajaxManager.get_ajaxSettings();

// for (setting in settings) {

// var initiatingControl = settings[setting].InitControlID;

// var controls = settings[setting].UpdatedControls;

// if (initiatingControl == '<%= CatTree1.ClientID %>') {

// for (control in controls) {

// if (controls[control].ControlID == 'RadGridAccounts') {

//                            controls[control].ControlID = '<%= RadAjaxLoadingPanel1.ClientID %>';

// }

// ajaxManager.set_ajaxSettings(settings);

// }

function scripts() {

var hidden = document.getElementById('<%= Hidden2.ClientID %>');

var span = document.getElementById('use');

span.textContent = hidden.value;

}

function Close() {

window.close();

}

function VisualizzaFiltri() {

var filtri = document.getElementById("filtri");

filtri.style.display = "block";

SetCooKie("filtri", filtri.style.display);

}

function Popup(apri, visualizzaGrid) {

// var stile;

//        stile = "top=10, left=10, width=977, height=430, status=no, menubar=no, toolbar=no scrollbars=yes, resizable=no";

// window.open(apri, "", stile, false);

var wnd = $find("<%=AddWindow.ClientID%>");

wnd.show();

wnd.setUrl("/Admin/AccountingManagement/" + apri);

};

function SetCooKie(name, value) {

var path = "/"; // il cookie ha validit? in tutto il sito

var today = new Date(); // data/orario di oggi

var expires = new Date(); // variabile necessaria a calcolare la scadenza

expires.setTime(today.getTime() + (1000 * 60 * 60)); // fra un ora in millisecondi

avviso = name + "=" + value + "; expires=" + expires.toGMTString() + "; path=" + "/";

document.cookie = avviso; // attivo il cookie

//alert(avviso); //alert di controllo dei contenuti

}

function GetCookie(name) {

var biscotti = document.cookie.split("; "); // separo i blocchi di informazioni con il punto e virgola

for (i = 0; i < biscotti.length; i++) {

briciola = biscotti[i].split("="); // divido l'informazione name dal suo valore

if (briciola[0] == name) { // cerca il cookie con il nome appena definito

valore = briciola[1]; // memorizza il codice in una variabile

//alert(valore); // stampa il valore di controllo

return valore; // restituisco il valore in uscita

}

function nascondiVisualizzaFiltri() {

var filtri = document.getElementById("filtri");

var first = document.getElementById("first");

var second = document.getElementById("second");

var third = document.getElementById("third");

var fourth = document.getElementById("fourth");

if (filtri.style.display == "block") {

filtri.style.display = "none";

second.style.display = "none";

third.style.display = "none";

fourth.style.display = "none";

}

else {

filtri.style.display = "block";

first.style.display = filtri.style.display;

}

SetCooKie("filtri", filtri.style.display);

SetCooKie("first", filtri.style.display);

};

function AggiungiFiltro(id) {

var filtri = document.getElementsByTagName("div");

var count = filtri.length;

for (var i = 0; i < count; i++) {

if ((filtri.item(i)).style.display == "none" && ((filtri.item(i)).id == 'first' || (filtri.item(i)).id == 'second' || (filtri.item(i)).id == 'third' || (filtri.item(i)).id == 'fourth')) {

(filtri.item(i)).style.display = "block";

break;

}

// RebindFiltro();

SalvaFiltri();

};

function RemoveFiltro(id) {

var filtro = document.getElementById(id);

if (id != "first")

filtro.style.display = "none";

else {

if (document.getElementById("second").style.display == "none" && document.getElementById("third").style.display == "none" && document.getElementById("fourth").style.display == "none") {

//alert("qui");

filtro.style.display = "none";

var filtri = document.getElementById("filtri");

filtri.style.display = "none";

}

else {

var filtri = document.getElementsByTagName("div");

var count = filtri.length;

for (var i = 0; i < count; i++) {

if ((filtri.item(i)).style.display == "block" && ((filtri.item(i)).id == 'second' || (filtri.item(i)).id == 'third' || (filtri.item(i)).id == 'fourth')) {

(filtri.item(i)).style.display = "none";

break;

}

SalvaFiltri();

//RebindFiltro();

};

function SalvaFiltri() {

var filtri = document.getElementsByTagName("div");

var count = filtri.length;

for (var i = 0; i < count; i++) {

if ((filtri.item(i)).id == 'first') {

// var hidden = document.getElementById("HiddenFieldFiltro1");

// hidden.value = filtri.item(i).style.display;

SetCooKie("first", filtri.item(i).style.display);

SetCooKie("filtri", filtri.item(i).style.display);

}

if ((filtri.item(i)).id == 'second') {

// var hidden = document.getElementById("HiddenFieldFiltro2");

// hidden.value = filtri.item(i).style.display;

SetCooKie("second", filtri.item(i).style.display);

}

if ((filtri.item(i)).id == 'third') {

// var hidden = document.getElementById("HiddenFieldFiltro3");

// hidden.value = filtri.item(i).style.display;

SetCooKie("third", filtri.item(i).style.display);

}

if ((filtri.item(i)).id == 'fourth') {

// var hidden = document.getElementById("HiddenFieldFiltro4");

// hidden.value = filtri.item(i).style.display;

SetCooKie("fourth", filtri.item(i).style.display);

}

};

function RebindFiltro() {

var campi = document.getElementsByTagName("select");

var count = campi.length;

//alert(count);

//var e = document.getElementById("dropdown1");

//var strUser = e.options[e.selectedIndex].value;

var strUser = "";

for (var i = 0; i < count; i++) {

//var strUser = "";

if ((((campi.item(i)).id.toString()).indexOf("SelectCampi1") != -1 || ((campi.item(i)).id.toString()).indexOf('SelectCampi2') != -1 || ((campi.item(i)).id.toString()).indexOf('SelectCampi3') != -1 || ((campi.item(i)).id.toString()).indexOf('SelectCampi4') != -1)) {

//alert(strUser);

if (i - 1 > 0) {

strUser = strUser + campi.item(i - 1).options[campi.item(i - 1).selectedIndex].value;

if ((((campi.item(i)).id.toString()).indexOf('SelectCampi1') == -1)) {

if (strUser.indexOf("Tutto") == -1) {

var opt = document.createElement("option");

// Add an Option object to Drop Down/List Box

document.getElementById((campi.item(i)).id).options.add(opt);

// Assign text and value to Option object

opt.text = "Tutto";

opt.value = "Tutto";

}

if (strUser.indexOf("Cognome") == -1) {

var opt = document.createElement("option");

// Add an Option object to Drop Down/List Box

document.getElementById((campi.item(i)).id).options.add(opt);

// Assign text and value to Option object

opt.text = "Cognome";

opt.value = "Cognome";

}

if (strUser.indexOf("Nome") == -1) {

var opt = document.createElement("option");

// Add an Option object to Drop Down/List Box

document.getElementById((campi.item(i)).id).options.add(opt);

// Assign text and value to Option object

opt.text = "Nome";

opt.value = "Nome";

}

if (strUser.indexOf("Email") == -1) {

var opt = document.createElement("option");

// Add an Option object to Drop Down/List Box

document.getElementById((campi.item(i)).id).options.add(opt);

// Assign text and value to Option object

opt.text = "Email";

opt.value = "Email";

}

else

strUser = strUser + campi.item(i).options[campi.item(i).selectedIndex].value;

}

};

function CloseAndRedirect(sender, args) {

GetRadWindow().close(); //closes the window

}

function GetRadWindow() //Get reference to window

{

var oWindow = null;

if (window.radWindow)

oWindow = window.radWindow;

else if (window.frameElement.radWindow)

oWindow = window.frameElement.radWindow;

return oWindow;

}

function closeRadWindow(oWnd, args) {

//alert('closeRadWindow');

var arg = args.get_argument();

//alert('close');

//gestione da code-behind

var ajaxManager = $find("<%=RadAjaxManager1.ClientID%>");

//alert(arg)

ajaxManager.ajaxRequest('closeRadWindow' + arg);

}

function ClosePop() {

//alert('qui');

var wnd = $find("<%=PopWindow.ClientID%>");

wnd.close();

return false;

}

function CSTOpen() {

var wnd = $find("<%=RadWindowCST.ClientID%>");

wnd.show();

wnd.setUrl("/Admin/AccountingManagement/Anagrafica.aspx?Insert=True");

}

function Pop() {

var wnd = $find("<%=PopWindow.ClientID%>");

wnd.show();

//wnd.setUrl("/Admin/Mailing/OpenRooms.aspx?IDMailing=" + IDMailing + "&SupplierID=" + IDSupplier);

wnd.setUrl("/Admin/AccountingManagement/Popup.aspx");

return false;

}

function RequestStart(sender, args) {

var currentLoadingPanel;

var currentUpdatedControl;

currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");

currentUpdatedControl = "<%= RadGridAccounts.ClientID %>";

//show the loading panel over the updated control

currentLoadingPanel.show(currentUpdatedControl);

}

function ResponseEnd() {

var currentLoadingPanel;

var currentUpdatedControl;

currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");

currentUpdatedControl = "<%= RadGridAccounts.ClientID %>";

if (currentLoadingPanel != null)

currentLoadingPanel.hide(currentUpdatedControl);

currentUpdatedControl = null;

currentLoadingPanel = null;

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Block" EnableHistory="False">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="CheckBoxMerge">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGridAccounts" />

<telerik:AjaxUpdatedControl ControlID="TextElementi" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="CheckBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGridAccounts" />

<telerik:AjaxUpdatedControl ControlID="TextElementi" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGridAccounts">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGridAccounts" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="ButtonEseguiFiltro">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGridAccounts" />

<telerik:AjaxUpdatedControl ControlID="TextElementi" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="CatTree1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGridAccounts" />

<telerik:AjaxUpdatedControl ControlID="TextElementi" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

<ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" EnableSkinTransparency="True" RegisterWithScriptManager="True" BackgroundPosition="Center" EnableAjaxSkinRendering="True" HorizontalAlign="Center" MinDisplayTime="0" BorderStyle="NotSet" Skin='Transparent' EnableViewState="True" EnableEmbeddedBaseStylesheet="True" EnableEmbeddedSkins="True" EnableEmbeddedScripts="True" IsSticky="False" >

</telerik:RadAjaxLoadingPanel>

<input id="Hidden1" type="hidden" runat="server" />

<input id="Hidden2" type="hidden" runat="server" />

<table style="width: 100%" cellspacing="0" cellpadding="0">

<tr>

<td class="Categorie_fondo" style="text-align: left" valign="top">

<qsf:RTV runat="server" ID="CatTree1" />

</td>

<td style="width: 9px"></td>

<td class="Editor_fondo" style="text-align: left" valign="top">

<table cellpadding="6" cellspacing="0" style=" width:100%; " >

<tr>

<td valign="top" style=" padding-top:10px">

<qsf:CommandBar runat="server" ID="CommandBar1" />

</td>

</tr>

<tr>

<td>

<asp:Button ID="ButtonCST" runat="server" Text="Aggiungi" OnClientClick="CSTOpen();return false;"/>

</td>

</tr>

<tr>

<td>

<asp:CheckBox ID="CheckBox1" runat="server" Text="Cerca anche figli" AutoPostBack="True" />

<asp:CheckBox ID="CheckBoxMerge" runat="server" Text="Merge" AutoPostBack="True" />

</td>

</tr>

<tr>

<td>

<table>

<tr>

<td>

<input id="ButtonFiltro" type="button" value="Filtri" onclick = "nascondiVisualizzaFiltri();"/>

</td>

<td>

<input id="ButtonImporta" type="button" value="Importa" onclick = "Popup('PopupImporta.aspx',false);"/>

</td>

<td>

<input id="ButtonEsporta" type="button" value="Esporta" onclick = "Popup('PopupEsporta.aspx',true);"/>

</td>

<td>

<table>

<tr>

<td>

<asp:DropDownList ID="SelectCampi1" runat="server">

<asp:ListItem Text="Tutto" Value="Tutto"></asp:ListItem>

<asp:ListItem Text="Cognome" Value="Cognome"></asp:ListItem>

<asp:ListItem Text="Nome" Value="Nome"></asp:ListItem>

<asp:ListItem Text="Email" Value="Email"></asp:ListItem>

<asp:ListItem Text="Username" Value="Username"></asp:ListItem>

<asp:ListItem Text="Indirizzo" Value="Indirizzo"></asp:ListItem>

<asp:ListItem Text="Città" Value="Città"></asp:ListItem>

<asp:ListItem Text="Provincia" Value="Provincia"></asp:ListItem>

<asp:ListItem Text="CAP" Value="CAP"></asp:ListItem>

<asp:ListItem Text="Paese" Value="Paese"></asp:ListItem>

<asp:ListItem Text="Cittadinanza" Value="Cittadinanza"></asp:ListItem>

<asp:ListItem Text="Telefono" Value="Telefono"></asp:ListItem>

<asp:ListItem Text="Cellulare" Value="Cellulare"></asp:ListItem>

<asp:ListItem Text="Fax" Value="Fax"></asp:ListItem>

<asp:ListItem Text="Lingua" Value="Lingua"></asp:ListItem>

<asp:ListItem Text="Sesso" Value="Sesso"></asp:ListItem>

<asp:ListItem Text="Codice Fiscale" Value="Codice Fiscale"></asp:ListItem>

<asp:ListItem Text="Data nascita" Value="Data nascita"></asp:ListItem>

<asp:ListItem Text="Città natale" Value="Città natale"></asp:ListItem>

<asp:ListItem Text="Azienda" Value="Azienda"></asp:ListItem>

<asp:ListItem Text="Part. IVA" Value="Part. IVA"></asp:ListItem>

</asp:DropDownList>

</td>

<td>

<asp:DropDownList ID="SelectOpzioni1" runat="server">

<asp:ListItem Text="Contiene" Value="Contiene"></asp:ListItem>

<asp:ListItem Text="Uguale" Value="Uguale"></asp:ListItem>

</asp:DropDownList>

</td>

<td>

<asp:TextBox ID="TextFiltro1" runat="server"></asp:TextBox>

</td>

</tr>

</table>

</td>

<td valign="top">

<asp:Button ID="ButtonEseguiFiltro" runat="server" Text="Esegui" OnClick = 'EseguiFiltro_Click'/>

</td>

<td>

</td>

<td>

<asp:Label ID="LabelElementi" runat="server" Text="Numero elementi: "></asp:Label>

</td>

<td>

<asp:TextBox ID="TextElementi" runat="server" ReadOnly="True" Width="50px"></asp:TextBox>

</td>

<td>

</td>

<td>

<asp:Button ID="ButtonInsert" runat="server" Text="Inserisci" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<div id="filtri" style="display: none">

<table>

<tr>

<td>

<div id="first" style="display: block">

<table>

<tr>

<td>

<asp:DropDownList ID="SelectCampi" runat="server">