Timed updates of web user controls in docks

5 posts, 0 answers
  1. Thomas
    Thomas avatar
    14 posts
    Member since:
    Mar 2012

    Posted 19 Jul 2012 Link to this post

    What is the right way to implement timed updates of web user controls in dynamically created docks?
    Every web user control is loaded in it's own dock and the dock/user control should be updated with a specific interval.
    Every dock/user control should have various update intervals.

    Any ideas?

    Thanks.

    /Thomas
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 23 Jul 2012 Link to this post

    Hello Thomas,

    You can use the following approach:
    • Insert an UpdatePanel control in the content of every RadDock. The user control in every dock control will be placed inside the UpdatePanel.
    • Create a Timer control, which will trigger the AJAX request, for every RadDock and set it as an AsyncPostBackTrigger for the according UpdatePanel.
    • Configure the UpdatePanels with UpdateMode="Conditional" in order to ensure that every UpdatePanel will update only its content.

    Kind regards,
    Slav
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thomas
    Thomas avatar
    14 posts
    Member since:
    Mar 2012

    Posted 15 Aug 2012 Link to this post

    I can't put an UpdatePanel inside the dock as you describe. Do you have an example that shows how to achieve what I want?

    Parser Error Message: Type 'Telerik.Web.UI.RadDock' does not have a public property named 'UpdatePanel'.

    Source Error:

    Line 17: <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px"> 
    Line 18: <telerik:RadDock ID="RadDock1" runat="server" Width="300px" UniqueName="RadDock1" Tag="TimedWidget1.ascx">
    Line 19: <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    Line 20: </asp:UpdatePanel>
    Line 21: </telerik:RadDock>
  5. Thomas
    Thomas avatar
    14 posts
    Member since:
    Mar 2012

    Posted 15 Aug 2012 Link to this post

    I can see there is a content template. I'll have a look at that. Still, I would like if you could provide me with an example showing the use of timed updated panels inside docks!?

    Thanks.

    /Thomas
  6. Thomas
    Thomas avatar
    14 posts
    Member since:
    Mar 2012

    Posted 16 Aug 2012 Link to this post

    For anyone who might be struggeling with the same issue, I've posted a full working example with 2 timers that asynchronously updates 2 web user controls in their own docks.

    /Thomas

    Default.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WidgetTimedUpdates._Default" %>
     
    <%@ Register Assembly="DevExpress.Web.v10.2, Version=10.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxTimer" TagPrefix="dx" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
     
             <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
             <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
             </asp:Timer>
             <asp:Timer ID="Timer2" runat="server" Interval="5000" ontick="Timer2_Tick">
             </asp:Timer>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" UniqueName="RadDock1" Tag="TimedWidget1.ascx" Title="Reloads every sec">
                        <ContentTemplate>
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                                </Triggers>
                                <ContentTemplate>
     
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" UniqueName="RadDock2" Tag="TimedWidget2.ascx" Title="Reloads every 5 sec">
                        <ContentTemplate>
                            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick" />
                                </Triggers>
                                <ContentTemplate>
     
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="RadDockZone2" runat="server" Height="300px" Width="300px">
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    Default.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    namespace WidgetTimedUpdates
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    LoadWidget(RadDock1, UpdatePanel1);
                    LoadWidget(RadDock2, UpdatePanel2);
                }
            }
          
     
            public void LoadWidget(RadDock dock, UpdatePanel panel)
            {
                if (string.IsNullOrEmpty(dock.Tag))
                {
                    return;
                }
                Control widget = LoadControl(dock.Tag);
     
                panel.ContentTemplateContainer.Controls.Add(widget);
            }
     
            protected void Timer1_Tick(object sender, EventArgs e)
            {
                LoadWidget(RadDock1, UpdatePanel1);
            }
     
            protected void Timer2_Tick(object sender, EventArgs e)
            {
                LoadWidget(RadDock2, UpdatePanel2);
            }
        }
     
     
    }

    TimedWidget1.ascx (Web User Control)
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TimedWidget1.ascx.cs" Inherits="WidgetTimedUpdates.TimedWidget1" %>
    <asp:Label ID="Label1" runat="server" Text="Hello widget world 1"></asp:Label>

    TimedWidget1.ascx.cs (Web User Control)
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace WidgetTimedUpdates
    {
        public partial class TimedWidget1 : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                DateTime now = new DateTime();
                now = DateTime.Now;
                Label1.Text = now.Millisecond.ToString();
            }
        }
    }

    TimedWidget2.ascx (Web User Control)

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TimedWidget2.ascx.cs" Inherits="WidgetTimedUpdates.TimedWidget2" %>
    <asp:Label ID="Label1" runat="server" Text="Hello widget world 2"></asp:Label>

    TimedWidget2.ascx.cs (Web User Control)
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace WidgetTimedUpdates
    {
        public partial class TimedWidget2 : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                DateTime now = new DateTime();
                now = DateTime.Now;
                Label1.Text = now.Millisecond.ToString();
            }
        }
    }







Back to Top
UI for ASP.NET Ajax is Ready for VS 2017