Community & Support
Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / ToolBar / Updating different control with AJAX depending on clicked ToolbarButton

Updating different control with AJAX depending on clicked ToolbarButton

Article Info

Rating: 4

Article information

Article relates to

RadAjax v1.x
RadToolBar v1.x
Telerik.Web.UI v.2008.2.723+

Created by

Konstantin Petkov, Telerik

Last modified

August 5, 2008

Last modified by

Pavel Pankov, Telerik

HOW-TO
Update different control with AJAX depending on clicked ToolbarButton

DESCRIPTION
This article shows how a specific control can be updated depending on the clicked ToolbarButton (without the need of any JavaScript or Toolbar client-events handling)

SOLUTION
Two server-side events are used:

  1. RadToolBar's OnClick event: to determine and save in a variable the control to be updated depending on the command button.
  2. RadAjaxManager's ResolveUpdatedControls event: to add the specific control to be updated into the UpdatedControls collection.

The forthcoming code snippets hold the essentials of the logic summarized above:

ASPX/ASCX:

        <asp:Label ID="Label1" runat="server" Text="Click 'New' button as many times as you want to add new items and then click 'Save' to udpated the CheckBoxList"></asp:Label>    
        <radTlb:RadToolBar ID="RadToolBar1" runat="server" AutoPostBack="True" style="z-index: 103; left: 204px; position: absolute; top: 39px">     
            <Items>    
                <radTlb:RadToolBarButton ID="RadToolBarButton1" runat="server" ButtonImage="New.gif" ButtonText="New" CommandName="New" Hidden="False" />    
                <radTlb:RadToolBarButton ID="RadToolBarButton2" runat="server" ButtonImage="Save.gif" ButtonText="Save" CommandName="Save" Hidden="False" />    
            </Items>    
        </radTlb:RadToolBar>    
         
        <asp:CheckBoxList ID="CheckBoxList1" runat="server" style="z-index: 101; left: 251px; position: absolute; top: 91px" Height="51px" Width="26px">     
            <asp:ListItem>1</asp:ListItem>    
            <asp:ListItem>2</asp:ListItem>    
        </asp:CheckBoxList>    
        <asp:ListBox ID="ListBox1" runat="server" style="z-index: 102; left: 204px; position: absolute; top: 87px" Height="191px" Width="34px">     
            <asp:ListItem>1</asp:ListItem>    
            <asp:ListItem>2</asp:ListItem>    
        </asp:ListBox>    
        <radA:RadAjaxManager ID="RadAjaxManager1" runat="server" OnResolveUpdatedControls="RadAjaxManager1_ResolveUpdatedControls">     
            <AjaxSettings>    
                <radA:AjaxSetting AjaxControlID="RadToolBar1">     
                </radA:AjaxSetting>    
            </AjaxSettings>    
        </radA:RadAjaxManager>  

C#:

    private String updateControlID;     
    
    protected void Page_Load(object sender, EventArgs e)     
    {     
    
    }     
    protected void RadAjaxManager1_ResolveUpdatedControls(object sender, Telerik.WebControls.UpdatedControlsEventArgs e)     
    {     
        e.UpdatedControls.Add(new AjaxUpdatedControl(updateControlID, String.Empty));     
    }     
    
    protected void RadToolBar1_OnClick(object sender, Telerik.WebControls.RadToolBarClickEventArgs e)     
    {     
        switch (e.Button.CommandName)     
        {     
            case "New":     
                {     
                    ListBox1.Items.Add(new ListItem((ListBox1.Items.Count + 1).ToString()));     
                    updateControlID = "ListBox1";     
                    break;     
                };     
    
            case "Save":     
                {     
                    for (int i = CheckBoxList1.Items.Count; i < ListBox1.Items.Count; i++)     
                    {     
                        CheckBoxList1.Items.Add(new ListItem((i + 1).ToString()));     
                    }     
                    updateControlID = "CheckBoxList1";     
                    break;     
                }     
        }     
    }     
 

VB.NET:

    Private updateControlID As [String]     
    
    Protected Sub RadAjaxManager1_ResolveUpdatedControls(ByVal sender As Object, ByVal e As Telerik.WebControls.UpdatedControlsEventArgs) Handles RadAjaxManager1.ResolveUpdatedControls     
        e.UpdatedControls.Add(New AjaxUpdatedControl(updateControlID, [String].Empty))     
    End Sub    
    
    Protected Sub RadToolBar1_OnClick(ByVal sender As Object, ByVal e As Telerik.WebControls.RadToolBarClickEventArgs) Handles RadToolBar1.OnClick     
        Select Case e.Button.CommandName     
            Case "New"    
                ListBox1.Items.Add(New ListItem((ListBox1.Items.Count + 1).ToString()))     
                updateControlID = "ListBox1"    
                Exit Select    
            Case "Save"    
                Dim i As Integer    
                For i = CheckBoxList1.Items.Count To ListBox1.Items.Count - 1     
                    CheckBoxList1.Items.Add(New ListItem((i + 1).ToString()))     
                Next i     
                updateControlID = "CheckBoxList1"    
                Exit Select    
        End Select    
    End Sub 

 

Here is the code for Telerik's RadControls for Asp.Net AJAX:

<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager> 
<asp:Label ID="Label1" runat="server" Text="Click 'New' button as many times as you want to add new items and then click 'Save' to udpated the CheckBoxList"></asp:Label>     
<telerik:RadToolbar ID="RadToolbar1" runat="server" style="z-index: 103; left: 204px; position: absolute; top: 39px"  
 OnButtonClick="RadToolbar1_OnClick"> 
    <Items> 
        <telerik:RadToolbarButton runat="server" Text="New" CommandName="New"/> 
        <telerik:RadToolbarButton runat="server" Text="Save" CommandName="Save"/> 
    </Items> 
</telerik:RadToolbar> 
 
<asp:CheckBoxList ID="CheckBoxList1" runat="server" style="z-index: 101; left: 251px; position: absolute; top: 91px" Height="51px" Width="26px"> 
    <asp:ListItem>1</asp:ListItem> 
    <asp:ListItem>2</asp:ListItem> 
</asp:CheckBoxList> 
<asp:ListBox ID="ListBox1" runat="server" style="z-index: 102; left: 204px; position: absolute; top: 87px" Height="191px" Width="34px"> 
    <asp:ListItem>1</asp:ListItem> 
    <asp:ListItem>2</asp:ListItem> 
</asp:ListBox> 
 
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"  > 
    <AjaxSettings> 
        <telerik:AjaxSetting AjaxControlID="RadToolbar1"> 
            <UpdatedControls> 
                <telerik:AjaxUpdatedControl ControlID="CheckBoxList1" /> 
            </UpdatedControls> 
        </telerik:AjaxSetting> 
        <telerik:AjaxSetting AjaxControlID="RadToolbar1"> 
            <UpdatedControls> 
                <telerik:AjaxUpdatedControl ControlID="ListBox1" /> 
            </UpdatedControls> 
        </telerik:AjaxSetting> 
    </AjaxSettings> 
</telerik:RadAjaxManager> 


C#:

protected void RadToolbar1_OnClick(object sender, RadToolBarEventArgs e) 
{ 
    RadToolBarButton button = e.Item as RadToolBarButton; 
 
    switch (button.CommandName) 
    { 
        case "New": 
            { 
                ListBox1.Items.Add(new ListItem((ListBox1.Items.Count + 1).ToString())); 
                updateControlID = "ListBox1"; 
                break; 
            }; 
 
        case "Save": 
            { 
                for (int i = CheckBoxList1.Items.Count; i < ListBox1.Items.Count; i++) 
                { 
                    CheckBoxList1.Items.Add(new ListItem((i + 1).ToString())); 
                } 
                updateControlID = "CheckBoxList1"; 
                break; 
            } 
    } 
} 


VB.NET:

Private updateControlID As [String] 
 
Protected Sub RadToolbar1_OnClick(ByVal sender As Object, ByVal e As RadToolBarEventArgs) Handles RadToolbar1.ButtonClick 
    Dim button As RadToolBarButton = CType(e.Item, RadToolBarButton) 
    Select Case button.CommandName 
        Case "New" 
            ListBox1.Items.Add(New ListItem((ListBox1.Items.Count + 1).ToString())) 
            updateControlID = "ListBox1" 
            Exit Select 
        Case "Save" 
            Dim i As Integer 
            For i = CheckBoxList1.Items.Count To ListBox1.Items.Count - 1 
                CheckBoxList1.Items.Add(New ListItem((i + 1).ToString())) 
            Next i 
            updateControlID = "CheckBoxList1" 
            Exit Select 
    End Select 
End Sub 


The complete working applications both on CS and VB are attached for additional reference.

Files

Comments

  • sullivanst , Jan 15, 2008

    Extremely useful when the control you want to update is in a container which might be Visible=false

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.