How to update controls on aspx page from user control (ascx)

[first]

I have an aspx page on which i have registered a usercontrol. The aspx page has a RadGrid, and a RadPanelBar. In the RadPanelBar item, i am calling the registered usercontrol. The usercontrol has some controls and a save button. When the save button is clicked, i am saving some data into database. After saving i need to refresh the RadGrid on the aspx page and also collapse the RadPanelBar whose items contains this usercontrol.

Can someone please suggest me how to achieve this? I am trying to use the ajaxRequest but looks like i am doing something wrong.

Below is the sample code

This is aspx page that contains radgrid and the radpanelbar. Please note the usercontrol is within one of the items of the RadPanelBar in a RadPanelItem.

ASPX PAGE

        <telerik:RadGrid ID="RadGrid_data" AllowSorting="True" PageSize="5" AutoGenerateColumns="false"

            ShowHeader="true" ItemStyle-Font-Size="11px" AlternatingItemStyle-Font-Size="11px"

            AllowPaging="true" PagerStyle-AlwaysVisible="true" runat="server" Skin="Telerik"

            ItemStyle-Wrap="false" ViewStateMode="Disabled" Height="200px">

            <MasterTableView Summary="Note" ShowHeadersWhenNoRecords="true" AllowNaturalSort="false">

                <NoRecordsTemplate>

                    There are no records to display

                </NoRecordsTemplate>

                <Columns>

                    <telerik:GridBoundColumn HeaderStyle-HorizontalAlign="Center" DataField="Date" HeaderText="Date/Time"

                        SortExpression="Date" UniqueName="Date" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

                        ItemStyle-VerticalAlign="Top" />

                ......

 

</Columns>

            </MasterTableView>

            <ItemStyle Wrap="true" />

            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

            <ClientSettings>

                <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" />

                <Selecting AllowRowSelect="true" />

                 <ClientEvents OnRowSelected="RowSelected" />

            </ClientSettings>

        </telerik:RadGrid>

 

 

<div class="bar_nav">

    <telerik:RadPanelBar ID="RadPanelBar_test" runat="server" Skin="Default" Width="100%">

        <Items>

            <telerik:RadPanelItem runat="server" Text="" Value="tstHeader" CssClass="clsPanelItem">

                <HeaderTemplate>

                    <!--the below span is required to display expand/collapse images-->

                    <span class="rpExpandHandle"></span>

                    <telerik:RadListView ID="RadListView_test" runat="server">

                        <EmptyDataTemplate>

                            <span><b>test</b> </span>

                        </EmptyDataTemplate>

                        <ItemTemplate>

                        </ItemTemplate>

                        <ItemTemplate>

                            <span><b>test method</b> </span>

                        </ItemTemplate>

                    </telerik:RadListView>

                </HeaderTemplate>

                <Items>

                    <telerik:RadPanelItem runat="server" Text="" Value="testDetail" CssClass="clsPanelItem">

                        <ItemTemplate>

                            <uc:GraduationCall ID="myUserControl" runat="server" />

                        </ItemTemplate>

                    </telerik:RadPanelItem>

                </Items>

            </telerik:RadPanelItem>

        </Items>

    </telerik:RadPanelBar>

</div>

Below is the source for UserControl - ascx

.... some standard controls to accept users input - like textbox, dropdowns etc.

   <div class="Submit">
       <asp:Button ID="Button_Submit" runat="server" Text="Submit"></asp:Button>
       <asp:Button ID="Button_Cancel" runat="server" Text="Cancel"></asp:Button>
   </div>

On the click of Button_Submit, i want to refresh the RadGrid_Data and collapse the RadPanelBar_test in the AJAX way. 

Currently i have all the required code which is working fine, but when i click on the submit, it posts back to the server and does the refresh of the controls on the aspx page. I want to ajaxify this and achieve this.

Below is the code i am using in my usercontrol codebehind to update the controls on the aspx page:

In the button_submit click event:

'Collapse RadPanelBar
DirectCast(Parent, Telerik.Web.UI.RadPanelItem).PanelBar.Items(0).Selected = False
DirectCast(Parent, Telerik.Web.UI.RadPanelItem).PanelBar.Items(0).Expanded = False

'Refresh RadGrid
            Dim ctlPlaceHolder As ContentPlaceHolder = CType(Me.Page.Master.FindControl("ContentPlaceHolder1"), ContentPlaceHolder)
            If Not ctlPlaceHolder Is Nothing Then
                Dim radGriddata As Telerik.Web.UI.RadGrid = CType(ctlPlaceHolder.FindControl("RadGrid_Data"), Telerik.Web.UI.RadGrid)
                If Not radGriddata Is Nothing Then
                    radGriddata.Rebind()
                End If
            End If

I am aware that i should be using RadAjaxManager on the aspx page and RadAjaxManagerProxy on my usercontrol. And then raise an ajax request on the usercontrol and have a listener on the aspx page where i should refresh my grid and collapse the radpanelbar.

I tried doing it but it doesn't work. Can someone please help me on this? I have already spent 2 days on this and not sure what am i dont wrong? May be my concepts are unclear.

Below is some details on what i am trying to do:

step 1: I have added the RadAjaxManager in Aspx page and RadAjaxManagerProxy in usercontrol ascx page.

Step 2:
I have the below JS function in the usercontrol ascx file. I am attaching this function to Button_Submit onClientClick event to raise the ajaxrequest with content argument.

<script language="javascript" type="text/javascript">
        function SubmitForm() {
            alert("test");
            $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("content");
        }

Step 3: I have the below code on the page load of the usercontrol codebehind. Note, i either user the server side to raise the ajax request or as the clientside as mentioned in Step 1 above.

Dim radAjaxManager As RadAjaxManager = radAjaxManager.GetCurrent(Page)
AddHandler radAjaxManager.AjaxRequest, AddressOf radAjaxManager_AjaxRequest

Step 4. I adding the AjaxRequest handle code in the usercontrol codebehind to refresh/update the controls on the parent page:

    Private Sub radAjaxManager_AjaxRequest(sender As Object, e As AjaxRequestEventArgs)
        'Add the code to refresh the radgrid and collapse the radpanelbar on the aspx page as shown in the codesnippet above in the thread.

    End Sub

Please help! I am already pulled my hairs alot!