LoadingPanel refreshes the whole page in the first load

[Harol]

<div>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" >
        <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" AllowPaging="true"
            ShowStatusBar="true" PageSize="10" Width="100%" PagerStyle-AlwaysVisible="true"
            GridLines="None" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_Need"
            AllowFilteringByColumn="True" AllowSorting="True">
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
            <GroupingSettings CaseSensitive="false"></GroupingSettings>
            <AlternatingItemStyle CssClass="ItemsGrid" />
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn DataField="nomb" UniqueName="Contacto" HeaderText="Contacto"
                        runat="server" HeaderStyle-Width="130px" FilterControlWidth="200px" AutoPostBackOnFilter="true"
                        ShowFilterIcon="false" FilterControlAltText="Filter Contacto column">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ubic" HeaderText="Ubicación" runat="server" AllowFiltering="false"
                        HeaderStyle-Width="100px">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="telf" HeaderText="Telefono" runat="server" AllowFiltering="false"
                        HeaderStyle-Width="110px">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="rpm" HeaderText="RPM" runat="server" AllowFiltering="false"
                        HeaderStyle-Width="70px">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="telf2" HeaderText="Telefono Movil" runat="server"
                        AllowFiltering="false" HeaderStyle-Width="110px">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>
</div>

No achievement make updates on LoadingPanel in its first charge. Only cooling from the second refresh.

[Konstantin Dikov]

Hello Harol,

The setup of the RadAjaxPanel and the RadGrid is correct and the AJAX should be enabled for all inner controls of the RadAjaxPanel. However, the RadAjaxLoadingPanel will not be displayed in this scenario, because you are not setting the LoadingPanelID property of the RadAjaxPanel and there is no selected skin for the RadAjaxLoadingPanel. For displaying the RadAjaxLoadingPanel you need to use the following:

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">

As for the failed AJAX on the initial page load, please inspect your browser's console and see if there are any JavaScript errors present on the page. 


Regards,
Konstantin Dikov
Telerik

 

 

[Oscar]

Hello Konstantin,

We still have the problem, the first time it refreshes the whole page. Here is the FULL code:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DirectorioWebPartUserControl.ascx.cs"
    Inherits="WebPartDirectorio.Webparts.DirectorioWebPart.DirectorioWebPartUserControl" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2015.1.401.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<style type="text/css">
    /*estilos de mostrar paginado de telerik*/
    div.RadGrid .rgPager .rgAdvPart
    {
        display: none;
    }
</style>
<div>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" >
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" AllowPaging="true" ShowStatusBar="true" PageSize="10" Width="100%" PagerStyle-AlwaysVisible="true"
            GridLines="None" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_Need"
            AllowFilteringByColumn="True" AllowSorting="True" Culture="es-PE" GroupingEnabled="True">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <GroupingSettings CaseSensitive="false"></GroupingSettings>
            <AlternatingItemStyle CssClass="ItemsGrid" />
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn DataField="nomb" UniqueName="Contacto" HeaderText="Contacto"
                        runat="server" HeaderStyle-Width="130px" FilterControlWidth="200px" AutoPostBackOnFilter="true"
                        ShowFilterIcon="false" FilterControlAltText="Filter Contacto column">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ubic" HeaderText="Ubicación" runat="server" AllowFiltering="false"
                        HeaderStyle-Width="100px">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="telf" HeaderText="Telefono" runat="server" AllowFiltering="false"
                        HeaderStyle-Width="110px">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="rpm" HeaderText="RPM" runat="server" AllowFiltering="false"
                        HeaderStyle-Width="70px">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="telf2" HeaderText="Telefono Movil" runat="server"
                        AllowFiltering="false" HeaderStyle-Width="110px">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>



</div>

 

 Code Behind:

001.using System;
002.using System.Web.UI;
003.using System.Web.UI.WebControls;
004.using System.Web.UI.WebControls.WebParts;
005.using Microsoft.SharePoint;
006.using System.Data;
007.using Telerik.Web.UI;
008.using Telerik.Web.Design;
009.using WebPartDirectorio;
010.
011.namespace WebPartDirectorio.Webparts.DirectorioWebPart
012.{
013.    public partial class DirectorioWebPartUserControl : UserControl
014.    {
015.        SPWeb oWebsite = null;
016.        string strUrl = "https://portaladp2/";
017.        string urlPortal = "https://portaladp2/";
018.        DataTable table = new DataTable();
019.        DateTime Hoy = DateTime.Now.Date;
020.        //RadGrid RadGrid1 = new RadGrid();
021.
022.        protected void Page_Load(object sender, EventArgs e)
023.        {
024.            CargarDatos();//Carga pagina
025.        }
026.
027.        private void CargarDatos()
028.        {
029.            //Agrega las columnas de la lista Directorio Telefonico ADP
030.            table.Columns.Add("nomb", typeof(String));
031.            table.Columns.Add("ubic", typeof(String));
032.            table.Columns.Add("telf", typeof(String));
033.            table.Columns.Add("rpm", typeof(String));
034.            table.Columns.Add("telf2", typeof(String));
035.            table.Columns.Add("ultModif", typeof(DateTime));
036.
037.            SPSite oSiteCollection = new SPSite(strUrl);
038.            oWebsite = oSiteCollection.OpenWeb();
039.            SPList oList = oWebsite.Lists["Directorio Telefónico AdP"];
040.            SPListItemCollection collListItems = oList.Items;
041.
042.
043.            foreach (SPListItem srDoc in collListItems)
044.            {
045.                var contacto = srDoc.Title;
046.                var ultModif = Convert.ToDateTime(srDoc["Modified"].ToString());
047.                var ubicacion = (srDoc["Ubicación"] != null) ? srDoc["Ubicación"].ToString() : String.Empty;
048.                ubicacion = CleanInput(ubicacion);
049.                var telefono = (srDoc["Telf. Fijo"] != null) ? srDoc["Telf. Fijo"].ToString() : String.Empty;
050.                telefono = CleanInput(telefono);
051.                var rpm = (srDoc["RPM"] != null) ? srDoc["RPM"].ToString() : String.Empty;
052.                //rpm = CleanInput(rpm);
053.                var telefono2 = (srDoc["Telf. Movil"] != null) ? srDoc["Telf. Movil"].ToString() : String.Empty;
054.                //telefono2 = CleanInput(telefono2);
055.
056.                nuevaFila(ref table, contacto, ubicacion, telefono, rpm, telefono2, ultModif);
057.
058.
059.            }
060.        }
061.
062.        public void nuevaFila(ref DataTable dtFila, string nomb, string ubic, string telf, string rpm, string telf2, DateTime ultModif)
063.        {
064.            //Crea la fila para la grilla
065.            var newRow = dtFila.NewRow();
066.
067.            newRow["nomb"] = nomb;
068.            newRow["ubic"] = ubic;
069.            newRow["telf"] = telf;
070.            newRow["rpm"] = rpm;
071.            newRow["telf2"] = telf2;
072.            newRow["ultModif"] = ultModif;
073.
074.
075.            dtFila.Rows.Add(newRow);
076.
077.        }
078.        public String CleanInput(string MyString)
079.        {
080.            char[] MyChar = { '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', ';', '#' };
081.
082.            string NewString = MyString.TrimStart(MyChar);
083.
084.            return NewString;
085.        }
086.        protected void RadGrid1_Need(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
087.        {
088.
089.            //Ordenar la tabla
090.
091.            var order = from wi in table.AsEnumerable()
092.                        orderby wi.Field<DateTime>("ultModif") descending
093.                        select wi;
094.
095.            //Carga los datos al RadGrid desde el DataSource
096.            RadGrid1.DataSource = order;//table;
097.        }
098.        //protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
099.        //{
100.        //}
101.        protected void RadComboBox1_DataBound(object sender, EventArgs e)
102.        {
103.            RadComboBox combo = sender as RadComboBox;
104.            foreach (RadComboBoxItem item in combo.Items)
105.            {
106.                //item.Text
107.                foreach (string nom in table.Rows)
108.                {
109.                    item.Text = nom[1].ToString();
110.                }
111.            }
112.        }
113.    }
114.}

 

Any suggestion?

Thanks in advance.

 

[Konstantin Dikov]

Hi Oscar,

I am posting the response from the support ticket that you have opened for the same issue:

"Note that Ajaxifying the Telerik controls that are positioned within a user controls in SP environment works somewhat differently from the scenario when they are loaded directly on a web form. In you case, you need to use RadAjaxManager instead of the RadAjaxPanel. Move the RadAjaxManager control to the web part class, create it there and add it to the Controls collection of the web part as follows:

private RadAjaxManager _ajaxManager;

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

    SetUpAjaxManagerOnPage();

    EnsureChildControls();
}


protected void SetUpAjaxManagerOnPage()
{
    RadAjaxManager currentAjaxManager = RadAjaxManager.GetCurrent(Page);

    if (currentAjaxManager == null)
    {
        Page.Form.Controls.AddAt(0, AjaxManager);
        Page.Items.Add(typeof(RadAjaxManager), AjaxManager);
    }
}

protected virtual RadAjaxManager AjaxManager
{
    get
    {
        if (_ajaxManager == null)
        {
            _ajaxManager = RadAjaxManager.GetCurrent(Page);

            if (_ajaxManager == null)
            {
                _ajaxManager = new RadAjaxManager() { ID = "RadAjaxManager1" };
            }
        }

        return _ajaxManager;
    }
}

Then in the OnLoad event of the web part, get the RadAjaxManager as follows:

RadAjaxManager _manager = RadAjaxManager.GetCurrent(Page);

and add your ajax settings programmatically. Beforehand, you should have the user control in the CreateChildControls method of the web part and there through FindControl you should retrieve the controls to ajaxify. Keep them in a private variable local to the web part class and use that in the OnLoad event to dynamically add the ajax settings."


Regards,
Konstantin Dikov
Telerik