Adding dynamic RadToolbarButton on AJAX postback

2 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    11 posts
    Member since:
    Oct 2007

    Posted 02 May 2012 Link to this post

    Hi,

    I am trying to add items to a toolbar dynamically per need - the idea is that each page can have a set of "action buttons" which may differ per page so the toolbar need to be loaded dynamically. The dynamical loading of the same items works but when attempting to add new items on a postback the new item isn't displayed in the toolbar.
    The dynamic loading of the toolbar is done in the OnInit event and the items are added on each postback (I don't use IsPostback). The toolbar is wrapped in an ASP.NET UpdatePanel. I also do call .Update() to make sure the UpdatePanel content is updated.
    I've tried without the UpdatePanel either just to see but neither of them worked.
    Is there any way to actually add items in a dynamic fashion?

    Update
    I donwloaded the latest Telerik controls to see if this has been fixed as i was using an older version od the Rad controls.
    here is my code
    <form id="form1" runat="server">
            <tl:RadScriptManager ID="rsm1" runat="server"></tl:RadScriptManager>
     
            <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="lb1" runat="server"></asp:Label>
     
                    <tl:RadToolBar ID="Toolbar1" runat="server" AutoPostBack="true">
                    </tl:RadToolBar>
     
                    <asp:Button ID="bt1" runat="server" Text="submit" OnClick="bt1_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>
     
            <%--<tl:RadAjaxManager ID="am1" runat="server">
                <AjaxSettings>
                    <tl:AjaxSetting AjaxControlID="Toolbar1">
                        <UpdatedControls>
                            <tl:AjaxUpdatedControl ControlID="Toolbar1" />
                            <tl:AjaxUpdatedControl ControlID="lb1" />
                        </UpdatedControls>
                    </tl:AjaxSetting>
                    <tl:AjaxSetting AjaxControlID="bt1">
                        <UpdatedControls>
                            <tl:AjaxUpdatedControl ControlID="Toolbar1" />
                            <tl:AjaxUpdatedControl ControlID="lb1" />
                        </UpdatedControls>
                    </tl:AjaxSetting>
                </AjaxSettings>
            </tl:RadAjaxManager>--%>
        </form>
    and the code behind C#:
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
     
        //PopulateToolbar();
    }
     
    protected void Page_Load(object sender, EventArgs e)
    {
        PopulateToolbar();
        Toolbar1.ButtonClick += new RadToolBarEventHandler(Toolbar1_ButtonClick);
    }
     
    public void PopulateToolbar()
    {
        RadToolBarButton button;
        DropDownList ddl;
         
        Toolbar1.Items.Clear();
        Toolbar1.AutoPostBack = true;
     
        button = new RadToolBarButton();
        ddl = new DropDownList();
        ddl.ID = "ddl1";
        ddl.Items.Add(new ListItem("One"));
        ddl.Items.Add(new ListItem("Two"));
        ddl.Items.Add(new ListItem("Three"));
        ddl.AutoPostBack = true;
        ddl.SelectedIndexChanged += new EventHandler(ddl_SelectedIndexChanged);
        button.Controls.Add(ddl);
        //
        Toolbar1.Items.Add(button);
     
        button = new RadToolBarButton();
        button.Text = "Refund";
        button.CommandName = "action";
        button.CommandArgument = "refund";
        Toolbar1.Items.Add(button);
    }
     
    protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList ddl;
        string szValue;
     
        ddl = sender as DropDownList;
        szValue = ddl.SelectedValue;
        lb1.Text = "ddl value changed: " + szValue;
    }
     
    protected void bt1_Click(object sender, EventArgs e)
    {
        RadToolBarButton button;
        DropDownList ddl;
     
        button = new RadToolBarButton();
        button.Text = "Void";
        button.CommandArgument = "void";
        button.CommandName = "action";
        //
        Toolbar1.Items.Add(button);
    }
     
    protected void Toolbar1_ButtonClick(object sender, RadToolBarEventArgs e)
    {
        lb1.Text = e.Item.Text + " clicked";
    }

    I've tested this with the RadAjaxManager and with the ASP.NET UpdatePanel getting the same result. Also tried to load the Toolbar controls from OnInit and Page_Load with a subtle change in the behaviour but both with a bug.
    I want to be able to maintain the DropDownList between postbacks and also be able to dynamically add/remove Toolbar items (DropDownList, ToolbarButtons you name it) between postbacks.
    I was thinking to use the RadToolBarDropDown instead of the ASP.NET DropDownList but the Telerik version doesn't seem to have certain behaviours as the ASP.NET version has built in, ie:
    1. when a button is clicked in the DropDown the clicked item is not set to the DropDown.Text attribute (should be easy to do through javascript but still is a kind of fix needed) - it may be a design decision but still
    2. cannot set a default DropDown item, say if I want to have on page load to have item 2 to be "selected/clicked". There seems to be a DropDown.Text attribute but still no Value/CommandArgument or such attribute holding the "clicked" button's value.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 May 2012 Link to this post

    Hi Benjamin,

    In general in ASP.NET when adding dynamically created controls they are lost after a postback of the page and therefore you will either need to recreate them after each postback or create them on the initalization stage of the PageLifeCycle as described here. However, I could suggest that you use trackChanges() and commitChanges() on the client side and implement your logic. You can refer to the following help articles for more clarification and examples:
    • http://www.telerik.com/help/aspnet-ajax/toolbar-client-side-basics.html
    • http://www.telerik.com/help/aspnet-ajax/toolbar-clientsideradtoolbar.html
    • http://www.telerik.com/help/aspnet-ajax/toolbar-clientsideradtoolbaritemcollection.html
    • http://demos.telerik.com/aspnet-ajax/toolbar/examples/appearance/images/defaultcs.aspx

    Kind regards,
    Kate
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top