This is a migrated thread and some comments may be shown as answers.

Adding dynamic RadToolbarButton on AJAX postback

1 Answer 82 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Benjamin
Top achievements
Rank 1
Benjamin asked on 02 May 2012, 03:38 PM
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.

1 Answer, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 07 May 2012, 11:59 AM
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.
Tags
ToolBar
Asked by
Benjamin
Top achievements
Rank 1
Answers by
Kate
Telerik team
Share this question
or