RadDock, UserControls and RadAjax

[Allan]

HI,

I have a web page that dynamically loads RadTabs. The page has a master page. Each RadTab dynamically loads RadDock controls.  Each RadDock control dynamically loads a User Control.  I am attempting to both manually refresh each usercontrol and automatically refresh each usercontrol via a tImer.  After looking at the demos, I have a RadAjaxManager and an UpdatePanel on the web page.

In the first AjaxSetting section, the user control has a RadAjaxManagerProxy with a link button as the AjaxControlID.  The link button is supposed to refresh the user control.  All asp controls in the user control are supposed to be updated through AJAX.

The second section has an asp timer control as the AjaxControlId.  The timer has a timer event that is supposed to refresh the user control.  The radgrid in the user control is supposed to be refreshed in the timer event.

When either manually or automatically refreshing, the page gets a postback which displays all RadDocks.  The intent is solely to refresh the user control without refreshing the entire page.

Thanks,

Al

Web Page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default"
    MasterPageFile="~/loggedIn.master" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/UserControls/Gadget.ascx" TagName="Gadgets" TagPrefix="uc" %>
<asp:Content ID="ContentArea" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"/>
        <asp:UpdatePanel runat="server" ID="UpdatePanel1">
        <ContentTemplate>
            <div align="right"><asp:LinkButton ID="lbRefresh" Text="Refresh" runat="server"/></div>
            <telerik:RadTabStrip ID="rtsDockTabs" runat="server" MultiPageID="rmpDockTab"/>
            <telerik:RadMultiPage ID="rmpDockTab" runat="server" SelectedIndex="0"/>
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
    <asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" />
</asp:Content>

Web Page Code Behind

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using System.Collections.Generic;

public partial class Default : System.Web.UI.Page
{
    private const string _createPage = "CreateGadget.aspx?Id=";

    private List<DockState> CurrentDockStates
    {
        get
        {
            //Store the info about the added docks in the session. For real life
            // applications we recommend using database or other storage medium
            // for persisting this information.
            //get data
            DataLayer.toReadGadgetsDataTable gadgets = DataAccess.GetGadgets(Users.UserInfo.UserId);

            List<DockState> currentDockStates = new List<DockState>();

            foreach (DataRow dr in gadgets.Rows)
            {
                DataLayer.toReadGadgetsRow row = dr as DataLayer.toReadGadgetsRow;

                currentDockStates.Add(CreateDockState(row));
            }

            return currentDockStates;
        }
        set
        {
            List<DockState> currentDockStates = value;

            foreach (DockState dockState in currentDockStates)
            {
                DockStateTag tag = new DockStateTag(dockState.Tag);
                //update gadget in db
                DataAccess.UpdateGadget(
                    int.Parse(dockState.UniqueName),
                    tag.SearchCriteria,
                    dockState.Title,
                    dockState.Index,
                    tag.DisplayRows
                    );
            }
        }
    }

    private void CreateSaveStateTrigger(RadDock dock)
    {
        //Ensure that the RadDock control will initiate postback
        // when its position changes on the client or any of the commands is clicked.
        //Using the trigger we will "ajaxify" that postback.
        dock.AutoPostBack = true;
        dock.CommandsAutoPostBack = true;

        AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();
        saveStateTrigger.ControlID = dock.ID;
        saveStateTrigger.EventName = "DockPositionChanged";
        UpdatePanel1.Triggers.Add(saveStateTrigger);

        saveStateTrigger = new AsyncPostBackTrigger();
        saveStateTrigger.ControlID = dock.ID;
        saveStateTrigger.EventName = "Command";
        UpdatePanel1.Triggers.Add(saveStateTrigger);
    }

    private RadDock CreateRadDockFromState(DockState state)
    {
        RadDock dock = new RadDock();
        dock.DockMode = DockMode.Docked;
        dock.ID = state.UniqueName;
        dock.ApplyState(state);
        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());

        DockCommand dc1 = new DockCommand();
        dc1.AutoPostBack = true;
        dc1.Name = "Edit";
        dc1.Text = "Edit";
        dock.Commands.Add(dc1);

        dock.Command += new DockCommandEventHandler(dock_Command);
        return dock;
    }

    private DockState CreateDockState(DataLayer.toReadGadgetsRow row)
    {
        DockState dockState = new DockState();
        dockState.UniqueName = row.GadgetId.ToString();
        dockState.Title = row.Title;
        dockState.Width = Unit.Pixel(300);
        DockStateTag tag = new DockStateTag(row.SearchCriteria, row.DisplayRows, row.TabId, row.TabName);
        dockState.Tag = tag.Tag;
        dockState.Index = row.Rank;
        return dockState;
    }

    private void Initialize()
    {
        //add all tabs
        DataLayer.toReadTabsDataTable readTabsDataTable = DataAccess.GetTabs(Users.UserInfo.UserId);
        foreach (DataRow dr in readTabsDataTable.Rows)
        {
            DataLayer.toReadTabsRow row = (DataLayer.toReadTabsRow)dr;
            AddTab(row.Name, row.TabId);
            AddPageView(row.Name);
            CreateLayout(rmpDockTab.FindPageViewByID(row.Name));
        }
    }

    private void CreateLayout(RadPageView pageView)
    {
        //add raddocklayout
        RadDockLayout dockLayout = new RadDockLayout();
        dockLayout.ID = "rdlGadgets_" + pageView.ID;
        dockLayout.LoadDockLayout += new DockLayoutEventHandler(rdlGadgets_SaveDockLayout);
        dockLayout.SaveDockLayout += new DockLayoutEventHandler(rdlGadgets_SaveDockLayout);

        //add dock zone
        RadDockZone dockZone = new RadDockZone();
        dockZone.ID = "rdzGadgets_" + pageView.ID;
        dockZone.Orientation = Orientation.Horizontal;
        dockZone.Width = new Unit(100.0, UnitType.Percentage);
        dockZone.MinHeight =  new Unit(200);

        dockZone.Style["float"] = "left";
        dockZone.Style["margin-right"] = "20px";

        List<DockState> dockStates = CurrentDockStates;
        int count = dockStates.Count;
        for (int i = 0; i < count; i++)
        {
            RadDock dock = CreateRadDockFromState(dockStates[i]);

            DockStateTag tag = new DockStateTag(dock.Tag);

            //check which controls belong to this tab
            if (tag.TabName == pageView.ID)
            {
                //We will just add the RadDock control to the RadDockLayout.
                // You could use any other control for that purpose, just ensure
                // that it is inside the RadDockLayout control.
                // The RadDockLayout control will automatically move the RadDock
                // controls to their corresponding zone in the LoadDockLayout
                // event (see below).

                //load gadget control into dock
                UserControls_Gadget c = (UserControls_Gadget)LoadControl("~/UserControls/Gadget.ascx");
                c.ID = tag.TabName + "_Gadget" + i.ToString();
                c.DisplayRows = tag.DisplayRows;
                c.SearchCriteria = tag.SearchCriteria;

                dock.ContentContainer.Controls.Add(c);

                //add to doc zone
                dockZone.Controls.Add(dock);

                //We want to save the dock state every time a dock is moved.
                CreateSaveStateTrigger(dock);
            }
        }

        //add to layout
        dockLayout.Controls.Add(dockZone);

        //add to pageview
        pageView.Controls.Add(dockLayout);
    }

    private void AddTab(string tabName, int tabValue)
    {
        RadTab tab = new RadTab();
        tab.Text = tabName;
        tab.PageViewID = tabName;
        //tab.ID = "Tab_" + tabName;
        tab.Value = tabValue.ToString();
        rtsDockTabs.Tabs.Add(tab);
    }

    private void AddPageView(string id)
    {
        RadPageView pageView = new RadPageView();
        pageView.ID = id;
        rmpDockTab.PageViews.Add(pageView);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        //on init, load all docks in this event so display will occur in sequence
        if (!IsPostBack)
        {
            //Initialize();
        }
    }

    protected void Page_Init(object sender, EventArgs e)
    {
        //on postback, initialize dock controls so they will display
        //if (IsPostBack)
        {
            Initialize();
        }
    }

    void dock_Command(object sender, DockCommandEventArgs e)
    {
        if (sender is RadDock)
        {
            RadDock radDock = sender as RadDock;
            switch (e.Command.Name)
            {
                case "Edit":
                    Response.Redirect(_createPage + radDock.UniqueName);
                    break;
                case "Close":
                    DataAccess.DeleteGadget(int.Parse(radDock.UniqueName));
                    break;
            }
        }
    }

    protected void rdlGadgets_LoadDockLayout(object sender, DockLayoutEventArgs e)
    {
        //Populate the event args with the state information. The RadDockLayout control
        // will automatically move the docks according that information.
        foreach (DockState state in CurrentDockStates)
        {
            e.Positions[state.UniqueName] = state.DockZoneID;
            e.Indices[state.UniqueName] = state.Index;
        }
    }

    protected void rdlGadgets_SaveDockLayout(object sender, DockLayoutEventArgs e)
    {
        //Save the dock state. This will enable us
        // to recreate the dock in the next Page_Init.
        CurrentDockStates = ((RadDockLayout)sender).GetRegisteredDocksState();
    }

    protected void btnAdd_Click(object sender, EventArgs e)
    {
        Response.Redirect(_createPage + "0");
    }
}

User Control

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Gadget.ascx.cs" Inherits="UserControls_Gadget" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnRefresh">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="rgGadget" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="pnlNavigation" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="btnFirst" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="btnPrevious" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="btnNext" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="btnLast" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="tmrRefresh">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="rgGadget" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<telerik:RadGrid ID="rgGadget" runat="server" Skin="Telerik" ShowHeader="true" ShowStatusBar="false"
    ShowFooter="False" AllowMultiRowSelection="False" GridLines="none" AutoGenerateColumns="false"
    OnItemDataBound="rgGadget_ItemDataBound">
    <MasterTableView NoMasterRecordsText="No Records Found.">
    </MasterTableView>
    <HeaderStyle Width="250px" />
    <ItemStyle Wrap="true" Width="100px" />
    <AlternatingItemStyle BackColor="#F0F4F7" />
    <ItemStyle BackColor="white" />
</telerik:RadGrid>
<asp:Panel ID="pnlNavigation" runat="server">
    <table width="100%">
        <tr>
            <td>
                <asp:LinkButton ID="btnFirst" runat="server" Text="<<" OnClick="btnFirst_Click" /></td>
            <td>
                <asp:LinkButton ID="btnPrevious" runat="server" Text="<" OnClick="btnPrevious_Click" /></td>
            <td>
                <asp:LinkButton ID="btnNext" runat="server" Text=">" OnClick="btnNext_Click" /></td>
            <td>
                <asp:LinkButton ID="btnLast" runat="server" Text=">>" OnClick="btnLast_Click" /></td>
            <td align="right">
                <asp:LinkButton ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_Click" /></td>
        </tr>
    </table>
</asp:Panel>
<asp:Panel ID="pnlTimer" runat="server">
    <asp:Timer ID="tmrRefresh" runat="server" Interval="30000" OnTick="tmrRefresh_Tick" />
</asp:Panel>

User Control Code Behind

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class UserControls_Gadget : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    public int DisplayRows
    {
        get { return (int)ViewState["DisplayRows"]; }
        set { ViewState["DisplayRows"] = value; }
    }

    public string SearchCriteria
    {
        set
        {
            ViewState["SearchCriteria"] = value;
            ViewState["PageNumber"] = 0;
            Bind();
        }
    }

    public void Bind()
    {
        int numFound;
        DataTable searchEngine = SearchEngineFactory.GetSearchEngineData(
            ViewState["SearchCriteria"].ToString(),
            int.Parse(ViewState["PageNumber"].ToString()),
            int.Parse(ViewState["DisplayRows"].ToString()),
            out numFound);

        //add columns to grid
        rgGadget.Columns.Clear();
        for (int i = 2; i < searchEngine.Columns.Count; i++)
        {
            GridHyperLinkColumn  boundColumn = new GridHyperLinkColumn();
            this.rgGadget.MasterTableView.Columns.Add(boundColumn);
            boundColumn.HeaderText = searchEngine.Columns[i].ColumnName;
            boundColumn.DataTextField = boundColumn.HeaderText;
            boundColumn.UniqueName = boundColumn.HeaderText;
            boundColumn.DataNavigateUrlFields = new string[] { "URL" };
        }

        rgGadget.DataSource = searchEngine;
        rgGadget.DataBind();

        if (numFound > 0)
        {
            ViewState["NumFound"] = numFound;
            if ((int)ViewState["NumFound"] <= (int)ViewState["DisplayRows"])  //no paging necessary
            {
                pnlNavigation.Enabled = false;
            }
            else if ((int)ViewState["PageNumber"] == 0) //on first page
            {
                this.btnFirst.Enabled = false;
                this.btnPrevious.Enabled = false;
                this.btnNext.Enabled = true;
                this.btnLast.Enabled = true;
            }
            else if (((int)ViewState["PageNumber"] + 1) * (int)ViewState["DisplayRows"] >= (int)ViewState["NumFound"]) //last page
            {
                this.btnFirst.Enabled = true;
                this.btnPrevious.Enabled = true;
                this.btnNext.Enabled = false;
                this.btnLast.Enabled = false;
            }
            else
            {
                //in middle
                this.btnFirst.Enabled = true;
                this.btnPrevious.Enabled = true;
                this.btnNext.Enabled = true;
                this.btnLast.Enabled = true;
            }
        }
        else
        {
            pnlNavigation.Enabled = false;
        }
    }
    protected void btnFirst_Click(object sender, EventArgs e)
    {
        ViewState["PageNumber"] = 0;
        Bind();
    }
    protected void btnPrevious_Click(object sender, EventArgs e)
    {
        ViewState["PageNumber"] = (int)ViewState["PageNumber"] - 1;
        Bind();
    }
    protected void btnNext_Click(object sender, EventArgs e)
    {
        ViewState["PageNumber"] = (int)ViewState["PageNumber"] + 1;
        Bind();
    }
    protected void btnLast_Click(object sender, EventArgs e)
    {
        if ((int)ViewState["DisplayRows"] > 0)
        {
            int lastPageNumber = (int)ViewState["NumFound"] / (int)ViewState["DisplayRows"];
            int pageNumberRemainder = (int)ViewState["NumFound"] % (int)ViewState["DisplayRows"];
            if (pageNumberRemainder > 0)
                lastPageNumber++;
            ViewState["PageNumber"] = lastPageNumber - 1;
            Bind();
        }
    }

    protected void btnRefresh_Click(object sender, EventArgs e)
    {
        Bind();
    }
    public void tmrRefresh_Tick(object sender, EventArgs e)
    {
        Bind();
    }
    protected void rgGadget_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            //get tooltip value
            DataTable dt = (DataTable)((RadGrid)sender).DataSource;
            int index = ((GridDataItem)e.Item).ItemIndex;

            string toolTip = dt.Rows[index]["ToolTip"].ToString();
            if (toolTip != String.Empty)
            {
                foreach (TableCell cell in e.Item.Cells)
                {
                    cell.ToolTip = toolTip;
                }
            }
        }
    }
}

[Maria Ilieva]

Hello Allan

Could you please verify if you have RadScriptManager control on the very top of the main page of your project? It should be placed before all controls on the page in order to have Ajax working properly. Also note that mixing RadAjaxManager and asp UpdatePanel controls into one application is currently not supported scenario. Note that in your case all the ajax settings could be handled just with RadAjaxManager on the main page.


Regards,
Maria Ilieva
the Telerik team

[Allan]

Maria,

The project has a radscriptmanager reference in the master page.  (See master page aspx below.).  Should I remove the update manager from the main page and move the RadAjaxManager to where the update manager was?

Thanks,

Al

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="loggedin.master.cs" Inherits="loggedin" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>IGoogle</title>
    <link href="Style/PageStyle.css" type="text/css" rel="STYLESHEET" />
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td>
                    <table width="100%" cellpadding="10" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <asp:Image ID="Image1" runat="server" ImageUrl="~/images/symbol_logo_sm_Moto.jpg" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2" id="title">
                    <table class="header_table" border="0">
                        <tr>
                            <td>
                                <h1>
                                     Welcome to IGoogle
                                </h1>
                            </td>
                            <td align="right">
                                <table>
                                    <tr>
                                        <td align="right">
                                            <b>Welcome <asp:Label ID="FullUserName" runat="server"></asp:Label></b>  </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr><td>
                    <br />
                    <asp:LinkButton ID="lbAdmin" runat="server" Text="Admin" PostBackUrl="~/Admin.aspx" />
                        </td></tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                 </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                </asp:ContentPlaceHolder>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

[Iana Tsolova]

Hello Allan,

Indeed, you can leave the RadAjaxManager declaration in the content page, or move it to the MasterPage and use RadAjaxManagerProxy in the content page. More information is available here.

Best wishes,
Iana
the Telerik team