Questions on UI for ASP.NET AJAX Forum

3 answers

160 views

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">