Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Timed updates of web user controls in docks

4 Answers 137 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 19 Jul 2012, 09:07 AM
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

4 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 23 Jul 2012, 11:36 AM
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.
0
Thomas
Top achievements
Rank 1
answered on 15 Aug 2012, 09:50 AM
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>
0
Thomas
Top achievements
Rank 1
answered on 15 Aug 2012, 12:13 PM
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
0
Thomas
Top achievements
Rank 1
answered on 16 Aug 2012, 01:08 PM

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();
        }
    }
}







Tags
Dock
Asked by
Thomas
Top achievements
Rank 1
Answers by
Slav
Telerik team
Thomas
Top achievements
Rank 1
Share this question
or