More in this section
Blogs RSS feed

Using Update panel in Sitefinity - Part 2

by User Not Found

Let's start with a little introduction on what the UpdatePanel is and how it can help you achieve a wide range of scenarios.

The UpdatePanel is a server control, which allows you to refresh selected parts of the page instead of refreshing the whole page with a postback. It enables a web page to participate in partial-page updates without writing any client script. Moreover, when you use an UpdatePanel control, the page behavior is browser independent and can potentially reduce the amount of data that is transferred between client and server. When partial-page updates are enabled, controls can asynchronously post to the server. An asynchronous postback behaves like a regular postback in that the resulting server page executes the complete page and control life cycle. However, with an asynchronous postback, page updates are limited to regions of the page that are enclosed in UpdatePanel controls and that are marked to be updated. This behavior makes a Web page appear more interactive to the end user. For more information you can visit the MSDN UpdatePanel Overview page.

Now let's get back to UpdatePanel and its use in Sitefinity. A few months ago Teodor Georgiev made a blog post on how to use Update panel in Sitefinity. In it he modifies the update panel so that it works correctly on Sitefinity pages, by moving the logic of the OnInit event to the InitComplete event. This is done to make sure that a Script manager is available on the page when methods, which require it, are executed. The good news is that you don't need to do that anymore. In order to meet our clients' expectations we've included SitefinityUpdatePanel in the source of our system and now you are able to use it directly in your controls. The purpose of this blog post is to show you how this is done. You will find attached a very simple user control with update panel under my post. It consists of a SitefinityUpdatePanel and a label and button controls between the opening and closing tags of the panel. Note that in order to use the SitefinityUpdatePanel directly on the .ascx control, you should include the following tagprefix:

<%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>


This way your application will look for the control in the Telerik.Sitefinity assembly. 


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AjaxTest.ascx.cs" Inherits="SitefinityWebApp.AjaxTest" %>
<%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>
<sf:SitefinityUpdatePanel Id="SUP" runat="server"><ContentTemplate>
    <asp:Button Text="ClickME!" Id="Button1" runat="server" />
    <asp:Label Id="TestLabel" runat="server" />

Now if you look at the code-behind of the sample control, you will notice this attribute- [RequireScriptManager], which explicitly indicates that a ScriptManager should be included on the page, so that the control would work properly:


namespace SitefinityWebApp
    public partial class AjaxTest : System.Web.UI.UserControl
        protected void Page_Load(object sender, EventArgs e)
            Button1.Click += new EventHandler(Button1_Click);
        void Button1_Click(object sender, EventArgs e)
            Button1.Text = "I've been clicked!";
            TestLabel.Text = "Page was not refreshed!";

 The rest is nothing that would surprise you. On the Click event of our button, we change the text of the label and the button. Usually, this would cause a postback to the server and the whole page would get refreshed, but since we're using a SitefinityUpdatePanel, when the button is clicked, page updates will be limited to the regions of the page, enclosed by the update panel.

This is all you need to do to use the UpdatePanel. I truly hope that this improvement will help you get the best of developing with Sitefinity!

Download the sample from here.


Leave a comment
  1. Steve May 22, 2012
    I'm not a big fan of MSAjax, but stuff like this is very awesome to have IN the CMS :)

    Thanks Guys!
  2. Pete Jun 20, 2012
    What SF version is this included in?
    I am most interested in 4.4.

    Thank you.
  3. Pete Jun 20, 2012
    What SF version is this included in?
    I am most interested in 4.4.

    Thank you.
  4. Alex Jul 02, 2012
    Doesn't work with LinkButton or RadioButtonList AutoPostbak.
  5. Nidhi Nov 20, 2012
    This doesn't work if I add my .ascx control to a master page.
  6. edward Oct 23, 2013
    Can someone one help me figure out how to update a telerik rad rotator in sitifinity. Basically what I need is to get new data everytime the ticker is up. I'm able to refresh my data everytime I refresh the whole page but I just want to refresh the RadRotator every 5 seconds. Again, all I need is help on how to use an update panel in sitefinity, please provide an example if possible

    here is my code:

    <asp:UpdatePanel ID="up" runat="server">
    <asp:Timer ID="Timer2" runat="server" Interval="1500" OnTick="Timer1_Tick" />
    <div class="rotatorBackground">
    <telerik:RadRotator ID="RadRotator1" runat="server" Width="100%" Height="56px" CssClass="horizontalRotator" ScrollDuration="1500" BackColor="#D8D8D8"
    FrameDuration="1500" ItemHeight="65" ItemWidth="212" EnableRandomOrder="true" PauseOnMouseOver="false" OnItemDataBound="RadRotator1_ItemDataBound" >
    <div class="itemTemplate">
    <a target="_blank" onclick="goConfirm('This link is to an external site. You are now leaving the FirstBank Southwest website.','<%# Eval("StockTicker") %>');"
    class="feedTitle" > <%# Eval("CompanyName") %>
    <asp:Label ID="StockLastTrade" runat="server" Style="font-weight: bold; margin-left:20px; color:black; font-size: 12px" Text='<%# Bind("StockQuote") %>' />
    <br />
    <asp:Image ID="DirectionImage" runat="server" AlternateText="up" Visible="false" />&nbsp;
    <asp:Label ID="Change" runat="server" Style="font-weight: bold; font-size: 12px;" Text='<%# Bind("Change") %>' />
    <asp:Label ID="ChangePercentage" runat="server" Style="font-weight: bold; margin-left:25px; font-size: 12px;" Text='0.0%' />

    cs code
    using Telerik.Web.UI;
    using System.Collections;
    using System.ComponentModel;
    using System.Drawing;
    using System.Web.SessionState;
    using System.Web.UI.WebControls;

    public partial class SideStockTicker : System.Web.UI.UserControl {
    private Random random;
    private string yahooFeedTemplate = "{0}&f=sl1d1t1c1ohgv&e=.csv";

    protected void Page_Load(object sender, EventArgs e) {

    RadRotator1.DataSource = GetListOfStockQuotes();

     public void Timer1_Tick(object sender, EventArgs e) {

    RadRotator1.DataSource = GetListOfStockQuotes();


    public void RadRotator1_ItemDataBound(object sender, Telerik.Web.UI.RadRotatorEventArgs e) {
    do my stuff here///


    Leave a comment