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

1 posts, 0 answers
  1. first
    first avatar
    7 posts
    Member since:
    Feb 2014

    Posted 19 Apr 2014 Link to this post

    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.

    <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">
                        There are no records to display
                        <telerik:GridBoundColumn HeaderStyle-HorizontalAlign="Center" DataField="Date" HeaderText="Date/Time"
                            SortExpression="Date" UniqueName="Date" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"
                            ItemStyle-VerticalAlign="Top" />
                <ItemStyle Wrap="true" />
                <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
                    <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" />
                    <Selecting AllowRowSelect="true" />
                     <ClientEvents OnRowSelected="RowSelected" />
    <div class="bar_nav">
        <telerik:RadPanelBar ID="RadPanelBar_test" runat="server" Skin="Default" Width="100%">
                <telerik:RadPanelItem runat="server" Text="" Value="tstHeader" CssClass="clsPanelItem">
                        <!--the below span is required to display expand/collapse images-->
                        <span class="rpExpandHandle"></span>
                        <telerik:RadListView ID="RadListView_test" runat="server">
                                <span><b>test</b> </span>
                                <span><b>test method</b> </span>
                        <telerik:RadPanelItem runat="server" Text="" Value="testDetail" CssClass="clsPanelItem">
                                <uc:GraduationCall ID="myUserControl" runat="server" />

    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>

    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
                    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() {
                $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!

Back to Top