How to stop filckering problem in an RadAjaxManager control used?

[Lakshmi]

Hello All,

I'm new to ASP.NET coding. I'm facing flickering problem on a page - actually, RadAjaxManager, is placed on the default page. Some more controls are added to the manager control dynamically based on the configuration of the application. (Actually, the control's ASP.NET tags are added using LiteralControl class). But, still the page flickers.

PLS find my code below:

public static void UpdatePageControl(string pageName, Panel body, Page page, bool isPostBack, Control placeholder, RadAjaxManager manager)
        {
            string connectionString = GetConnectionString(page);

            SecurityToken token = new SessionData(page.Session).SecurityToken;

            EventServiceClient proxy = new EventServiceClient();
            using (proxy)
            {
                PageConfig pageConfig = proxy.GetPageConfiguration(token, pageName);
                if (pageConfig == null)
                {
                    log.DebugFormatCulture("Failed to load the page configuration for page '{0}'", pageName);
                    return;
                }

                // set title of page to first panels title if available
                string pageTitle = pageConfig.Name;
                if (pageConfig.Panels.Count > 0)
                {
                    if (!string.IsNullOrEmpty(pageConfig.Panels[0].Title.Text))
                    {
                        pageTitle = pageConfig.Panels[0].Title.Text;
                    }
                }

                body.Page.Title = "{0} : {1}".FormatCulture(token.SessionInfo.Station, pageTitle);

                foreach (PanelConfig panelConfig in pageConfig.Panels)
                {
                    Panel gridPanel = new Panel { CssClass = "mainPanelWrapperStyle" };

                    if (panelConfig.Title != null)
                    {
                        if (!string.IsNullOrEmpty(panelConfig.Title.Text))
                        {
                            LabelControl title = new LabelControl(panelConfig);
                            title.AddControl(gridPanel);
                        }
                    }

                    placeholder.Controls.Add(gridPanel);

                    GridConfig gridConfig = panelConfig.Grid;

                    string gridClientId = string.Empty;
                    string gridId = string.Empty;
                    if (gridConfig != null)
                    {
                        Grid newGrid = new Grid(panelConfig);
                        RadGrid radGrid = newGrid.AddControl(body, connectionString, isPostBack, placeholder) as RadGrid;

                        if (radGrid != null)
                        {
                            gridClientId = radGrid.ClientID;
                            gridId = radGrid.ID;
                        }

                        manager.AjaxSettings.AddAjaxSetting(radGrid, radGrid);
                    }

                    if (panelConfig.Detail != null)
                    {
                        // Add details
                        Panel detailPanel = new Panel();
                        body.Controls.Add(detailPanel);
                        detailPanel.CssClass = "mainPanelWrapperStyle";
                        Detail detail = new Detail(panelConfig);
                        detail.AddControl(token, detailPanel, connectionString, page);
                    }

                    if (panelConfig.Buttons.Count() != 0)
                    {
                        LoadButtons(pageConfig, body, panelConfig, gridClientId, gridId);
                    }

                    if (panelConfig.PlugIns.Count() != 0)
                    {
                        LoadPluginPanels(token, proxy, body, panelConfig);
                    }
                }

                // add as last not to disturb page build up
                AddWaitingControl(body);
            }
        }

The LoadPluginPanels method is as below:

private static void LoadPluginPanels(SecurityToken token, EventServiceClient proxy, Panel body, PanelConfig panelConfig)
        {
            foreach (var pluginConfig in panelConfig.PlugIns)
            {
                body.Controls.Add(new LiteralControl("<br />"));

                Panel pluginPanel = new Panel { CssClass = "mainPanelWrapperStyle" };

                RadAjaxPanel pluginUpdatePanel = new RadAjaxPanel
                {
                    ID = "pluginUpdatePanel_" + pluginConfig.Name
                };

                pluginUpdatePanel.Controls.Add(new Timer { Interval = 5000 });

                string controlString = proxy.LoadWebControl(token, pluginConfig.Name, pluginConfig.Configuration);
                if (controlString == null)
                {
                    continue;
                }

                pluginUpdatePanel.Controls.Add(new LiteralControl(controlString));

                pluginPanel.Controls.Add(pluginUpdatePanel);
                body.Controls.Add(pluginPanel);
            }
        }

The LoadWebControl method returns the string i.e. ASP.NET tags for the controls to be added to the panel as below: For example, one such tag returned is as below:

"<div style="height:600px;width:400px;overflow:auto;">
 <img src="./temp/cachePreviewArray1bd5e9ee-1afd-4f17-8e42-e1a2b26884f7.jpg" width="270" height="480" />
</div>"

The UpdatePageControl method is called from Page_Load method of Default page class as below:

protected void Page_Load(object sender, EventArgs e)
        {
            if (!LogOnHelper.Attach(this))
            {
                log.WarnFormatCulture("Attaching web page failed.");
                return;
            }

            SecurityToken token = new SessionData(Session).SecurityToken;
            EventServiceClient proxy = new EventServiceClient();
            using (proxy)
            {
                foreach (string pageName in proxy.GetMenuPageNames(token))
                {
                    RadButton menuButton = new RadButton
                                               {
                                                   ID = pageName,
                                                   Text = pageName,
                                                   Width = Unit.Pixel(94),
                                                   Height = Unit.Pixel(50),
                                                   Skin = "Office2007",
                                                   EnableBrowserButtonStyle = true
                                               };

                    menuButton.Click += this.MenuButtonClick;
                    this.menuColumn.Controls.Add(menuButton);
                }
            }

            string pageConfig = new UrlData(Page.Request).PageConfig;
            if (string.IsNullOrEmpty(pageConfig))
            {
                log.WarnFormatCulture("Page config parameter not found. Using Home in stead.");
                this.Title = "{0} : Home".FormatCulture(token.SessionInfo.Station);
                return;
            }

            PageController.UpdatePageControl(pageConfig, this.MainPanel, this, IsPostBack, this.GridPlaceholder, this.RadAjaxManager1);
        }

PLS help me in solving this problem.

Thanks in Advance...

Lakshmi

[Iana Tsolova]

Hello Lakshmi,

Can you try adding the same controls declaratively and see if the same ajax work as expected? Also, please make sure the page is performing ajax requests but regular postbacks.

Kind regards,
Iana
the Telerik team

[Lakshmi]

Hi,

I will try to check out this - you mean to say, I need to place the controls during design time right?

Now, the Page_Load is called after every 5 seconds because of the Timer placed on the page, "pluginUpdatePanel.Controls.Add(new Timer { Interval = 5000 });".

What else should I check - will you please elaborate?

Thanks,
Lakshmi

[Iana Tsolova]

Hello Lakshmi,

I am not sure what you are trying to achieve with code. I can see it is adding a Timer control to the page controls collection. But this Timer has no ID and this is a possible reason for the control not to perform ajax properly.

Kind regards,
Iana
the Telerik team

[Lakshmi]

Hi,

Let me tell you how the application works where the above specified code is used for refreshing the page.

1) The application is used in Production lines - where each customer will be having his own production line formed and will be communicating with the industrial printers using a which small messages containging MRP, Date of manufacturing, Date of expiry, Batch number will be printed.
2) So, the application before setting up in the customer place will be configured based on his requirement and production line by a person called, "Implementer", a middle layer in between a developer and a requirement gatherer. An implementer will configure the set of assemblies provided by the developer by using an application "Toolkit" and generate a set of configuration files and deploys these in customer place.

I think with this introduction, you will be able to visualize the scenario.

3) So, from the ToolKit application, I have configured page setup.
4) The pages formed are attached as a doc. PLS check the file for the pages being displayed. The last page shown is refreshed every 5 secs which is causing flickering problem.
5) For each product, the information printed will be unique and hence want to refresh the preview which is causing Page flicker problem.

PLS help to solve this problem.

Thanks,
Lakshmi

[Iana Tsolova]

Hello Lakshmi,

How are you refreshing the page? You can try using ASP:Timer with RadAjax as in this demo for instance.

Greetings,
Iana
the Telerik team