Dock inside an UpdatePanel not being refreshed

[Lina]

Hi,

I'm working on the PortalSiteCS example provided by Telerik. 

I have updated one of the widgets to contain a label, a textbox and a button.  This is what I want: when the user types something into the textbox and clicks the button the label should be updated with the new value and in the database the value of Configuration should be updated with the new value.

For this to happen I trigger a postback when the user clicks the button inside the dock.  The button bubbles up an event to the parent - default page.  The default page gets the ID of the dock and the value of the label.  I enclosed DockLayout in and UpdatePanel and here I call update() on it hoping to trigger postback but that doesn't happen!  The new value is saved to the database so a second click on the button inside the dock does refresh the value of the label. 

Any clues as to why this is happening? I've attached code below:

Thanks.

Default.aspx

<asp:scriptmanager runat="server" id="ScriptManager1">
</asp:scriptmanager>
Widget Configuration:
<asp:textbox maxlength="20" runat="server" id="TextConfiguration"></asp:textbox>
<asp:dropdownlist runat="server" id="ListWidgets">
</asp:dropdownlist>
<asp:button runat="server" id="ButtonAddDock" text="Add Dock" onclick="ButtonAddDock_Click" />



<asp:UpdatePanel ID="ParentUpdatePanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" >
    <ContentTemplate>
        <telerik:raddocklayout id="DockLayout" runat="server" onloaddocklayout="DockLayout_LoadDockLayout"
            onsavedocklayout="DockLayout_SaveDockLayout" storelayoutinviewstate="false">
            <div>
                <telerik:raddockzone runat="server" id="ZoneLeft" style="float: left; margin-right: 10px;"
                    width="45%" minheight="200px">
                </telerik:raddockzone>
                <telerik:raddockzone runat="server" id="ZoneRight" style="float: left;" minheight="200px"
                    width="45%">
                </telerik:raddockzone>
            </div>
            <div style="display: none">
                <asp:updatepanel runat="server" id="UpdatePanel1">
                    <triggers>
                        <asp:asyncpostbacktrigger controlid="ButtonAddDock" eventname="Click" />
                    </triggers>
                </asp:updatepanel>
            </div>
        </telerik:raddocklayout>
   </ContentTemplate>
</asp:UpdatePanel>

Default.aspx.cs

public partial class _Default : System.Web.UI.Page
{
    int PageID = 1;
    List<PageWidgetInfo> _pageWidgets;

    protected List<PageWidgetInfo> PageWidgets
    {
        get
        {
            if (_pageWidgets == null)
            {
                _pageWidgets = PageWidgetInfo.SelectPageWidgets(PageID);
                _pageWidgets.Sort();
            }
            return _pageWidgets;
        }
    }

    protected override void OnInit(EventArgs e)
    {
        foreach (PageWidgetInfo pageWidget in PageWidgets)
        {
            RadDock dock = CreateDock(pageWidget);

            DockLayout.Controls.Add(dock);

            CreateSaveStateTriggers(dock);
        }
        base.OnInit(e);
    }

    protected override void OnLoad(EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(TriggerAsyncPostback);

        if (!IsPostBack)
        {
            ListWidgets.DataSource = WidgetInfo.Select();
            ListWidgets.DataTextField = "Name";
            ListWidgets.DataValueField = "ID";
            ListWidgets.DataBind();
        }

        base.OnLoad(e);
    }

    protected RadDock CreateDock(PageWidgetInfo pageWidgetInfo)
    {
        RadDock dock = new RadDock();
        dock.ApplyState(DockState.Deserialize(pageWidgetInfo.State));
        dock.ID = pageWidgetInfo.ID.ToString();
        dock.Tag = pageWidgetInfo.ID.ToString();

        BaseWidget widget = LoadControl(pageWidgetInfo.Path) as BaseWidget;
        if (widget == null)
        {
            throw new Exception(string.Format("The UserControl with path '{0}' does not inherit from BaseWidget. All widgets must inherit from BaseWidget.", pageWidgetInfo.Path));
        }
        widget.Configuration = pageWidgetInfo.Configuration;
        dock.ContentContainer.Controls.Add(widget);


        //Currently, there is a problem with the RadDock command items:
        // if they are not explicitly created, the Command event it not fired.
        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());
        dock.Command += new DockCommandEventHandler(Dock_Command);

        return dock;
    }

    protected RadDock CreateDock(int widgetID, string widgetConfiguration)
    {
        WidgetInfo widget = WidgetInfo.Select(widgetID);
        if (widget == null)
        {
            throw new Exception(string.Format("Cannot find a Widget with ID={0}.", widgetID));
        }
        PageWidgetInfo newPageWidget = PageWidgetInfo.Insert(PageID, widgetID, widgetConfiguration, string.Empty);
        PageWidgets.Add(newPageWidget);

        RadDock dock = CreateDock(newPageWidget);
        dock.Title = widget.Name;

        return dock;
    }

    protected void Dock_Command(object sender, DockCommandEventArgs e)
    {
        if (e.Command.Name == "Close")
        {
            ScriptManager.RegisterStartupScript(
                UpdatePanel1,
                this.GetType(),
                "RemoveDock",
                string.Format("function _removeDock() {{" +
                    "Sys.Application.remove_load(_removeDock);" +
                    "$find('{0}').undock();" +
                    "$get('{1}').appendChild($get('{0}'));" +
                    "$find('{0}').doPostBack('DockPositionChanged');" +
                    "}};" +
                    "Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),
                true);
        }
    }

    private PageWidgetInfo FindWidget(int id)
    {
        foreach (PageWidgetInfo info in PageWidgets)
        {
            if (info.ID == id) return info;
        }
        return null;
    }

    protected void DockLayout_SaveDockLayout(object sender, DockLayoutEventArgs e)
    {
        foreach (DockState state in DockLayout.GetRegisteredDocksState())
        {
            int stateWidgetID = int.Parse(state.Tag);

            PageWidgetInfo pageWidget = FindWidget(stateWidgetID);
            if (pageWidget != null && !state.Closed)
            {
                pageWidget.State = state.ToString();
                pageWidget.Update();
            }
            else
            {
                PageWidgetInfo.Delete(stateWidgetID);
            }
        }
    }

    private void CreateSaveStateTriggers(RadDock dock)
    {
        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);

    }

    protected void ButtonAddDock_Click(object sender, EventArgs e)
    {
        RadDock dock = CreateDock(int.Parse(ListWidgets.SelectedValue), TextConfiguration.Text);

        UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);

        CreateSaveStateTriggers(dock);

        ScriptManager.RegisterStartupScript(
            dock,
            this.GetType(),
            "AddDock",
            string.Format(@"function _addDock() {{" +
                "Sys.Application.remove_load(_addDock);" +
                "$find('{1}').dock($find('{0}'));" +
                "$find('{0}').doPostBack('DockPositionChanged');" +
                "}};" +
                "Sys.Application.add_load(_addDock);", dock.ClientID, ZoneLeft.ClientID),
            true);
    }

    protected void DockLayout_LoadDockLayout(object sender, DockLayoutEventArgs e)
    {
        foreach (PageWidgetInfo pageWidget in PageWidgets)
        {
            e.Indices[pageWidget.DockState.UniqueName] = pageWidget.DockState.Index;
            e.Positions[pageWidget.DockState.UniqueName] = pageWidget.DockState.DockZoneID;
        }
    }

    protected override bool OnBubbleEvent(object source, EventArgs e)
    {
        Type type = source.GetType();
        string souceName = type.ToString();

        if ((e is CommandEventArgs) && souceName.Equals("System.Web.UI.WebControls.Button"))
        {
            Button temp = (Button)source;
            if(temp.ID.Equals("Button1"))
            {
                TriggerAsyncPostback_Click(source, e);
            }

            return true;
        }
        return false;
    }

    protected void TriggerAsyncPostback_Click(object sender, EventArgs e)
    {
        CommandEventArgs args = (CommandEventArgs)e;
        string configuration = (string)args.CommandArgument;
        string ID = (string)args.CommandName;

        //recreate it with the new data
        PageWidgetInfo pageWidgetInfo = FindWidget(int.Parse(ID));
        pageWidgetInfo.Configuration = configuration;

        //delete all docks from the zones
        foreach (RadDockZone zone in DockLayout.RegisteredZones)
        {
            zone.Controls.Clear();
        }

        //update DockLayout by updating the panel
        ParentUpdatePanel.Update();
    }
}

[Petio Petkov]

Hi Lina,

Your code looks fine and I cannot tell at this point what might be the reason for the problem. Can you please send us a simple running project, where we can observe the problem?

Once we receive it, we will do our best to help you.


Sincerely yours,
Petio Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Lina]

Hi Petio,

Thank for looking into it.  I will mail you some code. 

Meanwhile I am facing another issue.  I'm trying to implement an out-of-panel update using a RadAjaxPanel.  I added the following code in the ascx:

<input type="button" value="Apply" onclick='<%=RadAjaxPanel1.ClientID%>.AjaxRequestWithTarget("<%=RadAjaxPanel1.UniqueID %>", "ChangeColor")' />

 and  overrode RaisePostBackEvent in the ascx.cs but I get the following errors (I tried implementing IPostBackEventHandler) :

 protected override void RaisePostBackEvent(IPostBackEventHandler source, String eventArgument)
    {
        base.RaisePostBackEvent(source, eventArgument);
        switch (eventArgument)
        {
            case "ChangeColor":
                RadAjaxPanel1.BackColor = Color.Maroon;
                break;
        }
    }

Error 1 'UserControls_Tile.RaisePostBackEvent(System.Web.UI.IPostBackEventHandler, string)': no suitable method found to override 

Error 2 'UserControls_Tile' does not implement interface member 'System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(string)'

Can you send a small code sample where out-of-panel update is used?

Thanks,
Lina

[Lina]

Hi,

Before you ask, I am not using a RadAjaxManager instead as I am trying to ajaxify webcontrols inside a usercontrol inside a dynamically created dock. 

Waiting for the a quick code sample of out-of-panel update of RadAjaxPanel which I think would be an easier implementation in my scenario.

Thanks,
Lina

[Lina]

Hi,

Can someone help with this query?

Thanks,
Lina

[Obi-Wan Kenobi]

You can read about your errors here:
http://www.telerik.com/community/forums/thread/b311D-mmgmc.aspx


Generally UserControl does not implement IPostBackEventHandler. That is why, to achieve your goal you need to implement the following interface when needed. Here is the bare bone logic:

Public Class WebUserControl1
    Inherits System.Web.UI.UserControl
    Implements IPostBackEventHandler

    Public Sub RaisePostBackEvent(ByVal eventArgument As String) Implements System.Web.UI.IPostBackEventHandler.RaisePostBackEvent

    End Sub
End Class

RaisePostBackEvent should have a single string argument"

[Lina]

Thanks for the reply.  I tried implementing the code - everything compiles now but I get the following runtime error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

So I put code for the button inside a RadScriptBlock.  When the button is clicked I see that the code inside onclick of the button is reached but the RaisePostBackEvent is not being fired. 

ascx:

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
   <input type="button" value="Simple Button" onclick='<%=RadAjaxPanel1.ClientID%>.AjaxRequestWithTarget("<%=RadAjaxPanel1.UniqueID %>", "ChangeColor")' />
</telerik:RadScriptBlock >

ascx.cs:

 

public partial class UserControls_Tile : System.Web.UI.UserControl, IPostBackEventHandler
{
.
.
.
void IPostBackEventHandler.RaisePostBackEvent(String eventArgument)
    {
        switch (eventArgument)
        {
            case "ChangeColor":
                RadAjaxPanel1.BackColor = System.Drawing.Color.AntiqueWhite;
                break;
        }
    }

}

[Petio Petkov]

Hi Lina,

Please open a new support ticket and send us a project, where we can observe the problems you have. Once we receive it we will do our best to help you.Please provide us a detailded description about your desired goal too.

All the best,
Petio Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Lina]

Hi Petio,

I submitted this ticket: 127671

Thanks