refresh control in aspx page from usercontrol using RadAjaxmanager

6 posts, 0 answers
  1. Ravi
    Ravi avatar
    14 posts
    Member since:
    Nov 2010

    Posted 17 Nov 2010 Link to this post

    <telerik:RadAjaxManager ID="ajaxManager" runat="server"
            <AjaxSettings
                <telerik:AjaxSetting AjaxControlID="gvMemberList"
                    <UpdatedControls
                        <telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" /> 
                           
                    </UpdatedControls
                </telerik:AjaxSetting
             <telerik:AjaxSetting AjaxControlID="btnRefresh"
                    <UpdatedControls
                        <telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />                    
                        <telerik:AjaxUpdatedControl ControlID="tabDetails" LoadingPanelID="ajaxLoadingPanel" />                     
                    </UpdatedControls
                </telerik:AjaxSetting
            </AjaxSettings
     </telerik:RadAjaxManager
        
        <telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Skin="Default"
        </telerik:RadAjaxLoadingPanel
        
        
    <asp:ImageButton ID="btnRefresh" ImageUrl="~/Images/refresh.png" OnClick="btnRefresh_Click"
                                runat="server" ToolTip="Refresh all list." /> 
        
    <telerik:RadGrid ID="gvMemberList" runat="server" AllowPaging="True" OnInit="gvMemberList_Init"
                                AllowCustomPaging="true" AllowSorting="True" SkinsPath="RadControls/Skins" EnableAJAX="True"
                                OnSortCommand="gvMemberList_SortCommand" OnPageIndexChanged="gvMemberList_PageIndexChanged"
                                OnItemDataBound="gvMemberList_ItemDataBound" OnItemCommand="gvMemberList_ItemCommand"
                                GridLines="None" EnableEmbeddedSkins="true" PageSize="10" Visible="true" ShowStatusBar="true"
                                LoadingTemplateTransparency="45" Width="90%" CellSpacing="0" CellPadding="0"
                                AutoGenerateColumns="false" AllowFilteringByColumn="True" Skin="WebBlue"
                                <GroupingSettings CaseSensitive="false" /> 
                                    
                                <MasterTableView DataKeyNames="EmpID" FilterItemStyle-Width="1%" AllowFilteringByColumn="true"
                                    AllowMultiColumnSorting="false"
                                    <Columns
                                            
                                        <telerik:GridBoundColumn DataField="EmpName" HeaderText="EmployeeName" UniqueName="EmployeeName"
                                            HeaderStyle-HorizontalAlign="Center" FilterControlWidth="25px"
                                            <ItemStyle HorizontalAlign="Center" Width="1%" /> 
                                        </telerik:GridBoundColumn
                                        <telerik:GridBoundColumn DataField="Address" HeaderText="Emploee Address" UniqueName="Emploee Address"
                                            HeaderStyle-HorizontalAlign="Center" FilterControlWidth="25px"
                                            <ItemStyle HorizontalAlign="Center" Width="1%" /> 
                                        </telerik:GridBoundColumn
                         </Columns
                                </MasterTableView
     </telerik:RadGrid
        
     <telerik:RadTabStrip ID="tabMemberDetails" runat="server" Skin="WebBlue" MultiPageID="tabDetails"
                                SelectedIndex="0" Align="Justify" ClickSelectedTab="true" EnableViewState="false"
                                ReorderTabsOnSelect="true" Width="1139px" OnTabClick="tabMemberDetails_Click"
                                ScrollChildren="true"
                            </telerik:RadTabStrip
     <telerik:RadMultiPage ID="tabDetails" ScrollBars="Auto" runat="server" SelectedIndex="0"
                                CssClass="pageView" Width="1137px" Height="470px"
     </telerik:RadMultiPage>
    protected void tabMemberDetails_Click(object sender, RadTabStripEventArgs e) 
    StatusNotes control = LoadControl("~/Controls/StatusNotes.ascx") as StatusNotes; 
    control.btnSaveClk += new StatusNotes.btnStatus_Click(control_btnSaveClk); 
        
     void control_btnSaveClk(object sender, EventArgs e) 
    {             
         btnRefresh_Click(this, new ImageClickEventArgs(0,0)); 
        
    protected void btnRefresh_Click(object sender, ImageClickEventArgs e) 
            
                gvMemberList.Rebind();             
            }

    I have a RadGrid and TabControl. In RadAjaxmanger, I am updating my grid when i click gridrows or when i click the refresh button.
    I have a usercontrol with a button and I have exposed its event btnSaveClk. In that event I call the Refresh button click event which rebinds the grid. When i debug the code, the data set shows the fresh data, but it is not reflect in the UI.
    I know the obvious problem is the btnrefresh_Click was not fired by clicking the Refresh button but it was called indirectly by some other event. Hence Can anyone help me how to work it out.
  2. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 22 Nov 2010 Link to this post

    Hi Ravi,

    Could you please try adding the AjaxSetting which update the RadGrid when the RadTabStrip is updated and let me know if the issue still exists:
    <telerik:RadAjaxManager ID="ajaxManager" runat="server"
      <AjaxSettings
        <telerik:AjaxSetting AjaxControlID="tabMemberDetails"
             <UpdatedControls
                <telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />   
             </UpdatedControls
        </telerik:AjaxSetting
        <telerik:AjaxSetting AjaxControlID="gvMemberList"
            <UpdatedControls
              <telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" /> 
           </UpdatedControls
        </telerik:AjaxSetting
        <telerik:AjaxSetting AjaxControlID="btnRefresh"
          <UpdatedControls
            <telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />                    
            <telerik:AjaxUpdatedControl ControlID="tabDetails" LoadingPanelID="ajaxLoadingPanel" />                     
          </UpdatedControls
        </telerik:AjaxSetting>

    Looking forward for your reply.

    Greetings,
    Radoslav
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Ravi
    Ravi avatar
    14 posts
    Member since:
    Nov 2010

    Posted 23 Nov 2010 Link to this post

    Actually I dont need to update my gvMemberList when user changes the Tabs. As you can see I am dynamically loading usercontrol in those Tabs and inside those usercontrol I have other controls like Radgrid , Buttons. Now I need to refresh the gvMemberList in main page when I click the buttons iniside the usercontrols.

    <telerik:RadAjaxManager ID="RadAjaxManager_StatusNotes" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnSave">
           <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="panel" LoadingPanelID="ajaxLoadingPanel" />
           </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnClear">
           <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="panel" LoadingPanelID="ajaxLoadingPanel" />
           </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    </telerik:RadAjaxManager>
      
    <telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
       
     <asp:Panel ID="panel" runat="server">
        <table width="100%">
             <tr>
                <td colspan="4" align="right">
                    <asp:Button ID="btnSave"  runat="server" Text="Save"  OnClick="btnSave_Click" />
                    <asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click" />
                </td>
            </tr>
            <tr>
                <td colspan="4" width="100%">
                    <asp:Label ID="lblMessage" runat="server" CssClass="error"></asp:Label>
                </td>
            </tr>
            <tr>
                <td width="100%" colspan="4">
                    <telerik:RadGrid ID="grid" runat="server" PageSize="10" Skin="WebBlue" AllowPaging="true" OnNeedDataSource="grid_NeedDataSource" 
                       AutoGenerateColumns="false" OnPageIndexChanged="grid_PageIndexChanged" EnableViewState="false" >
                      <MasterTableView>
                        <Columns>
                          <telerik:GridBoundColumn DataField="UpdDate"  HeaderText="Date">
                          </telerik:GridBoundColumn>
                          <telerik:GridBoundColumn DataField="Username" HeaderText="User Name">
                          </telerik:GridBoundColumn>
                          <telerik:GridBoundColumn DataField="StatusLabel" HeaderText="Status">
                          </telerik:GridBoundColumn>
                          <telerik:GridBoundColumn DataField="Notes" HeaderText="Notes">
                          </telerik:GridBoundColumn>
                        </Columns>
                      </MasterTableView>
                      <PagerStyle Mode="NumericPages" />
                    </telerik:RadGrid>
                </td>
            </tr>
        </table>
    </asp:Panel>

    As you can see I have Save and Clear buttons and another grid inside the usercontrol. I am saving new entry in the database with the save button and hence the newly added row have to be shown in the "gvMemberList" . For this I have exposed the event from the usercontrol to the main page and rebound the "gvMemberList". The datasource shows the new set of data but the problem is the gvMemberList is not being refreshed.
  4. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 25 Nov 2010 Link to this post

    Hello Ravi,

    In order to achieve the desired functionality you need to use the suggested ajax settings. Also I suggest you to add the user control into the RadMultiPage.PageViewCreated event handler otherwise the events will not been fired properly. Additionally in this case you need to enable the ViewState of the RadTabStrip. However to use the PageViewCreated you need to add the Tabs and the MultyPages dynamically. For example:
    protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
     
            if (!Page.IsPostBack)
            {
                AddTab("Corporate");
                AddTab("Personal");
            }
        }
     
        private void AddTab(string tabName)
        {
            RadTab tab = new RadTab();
            tab.Text = tabName;
            tabMemberDetails.Tabs.Add(tab);
            RadPageView pageView = new RadPageView();
            pageView.ID = tabName;
            tabDetails.PageViews.Add(pageView);
        }
     
        void tabDetails_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            MyUserControl control = LoadControl("~/MyUserControl.ascx") as MyUserControl;
            control.BtnSaveClicked += new EventHandler(control_BtnSaveClicked);
            control.ID = e.PageView.ID + "_userControl";
            e.PageView.Controls.Add(control);
        }

    I am sending you a simple example which demonstrates the desired functionality. Please check it out and let me know if it helps you.

    All the best,
    Radoslav
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Ravi
    Ravi avatar
    14 posts
    Member since:
    Nov 2010

    Posted 26 Nov 2010 Link to this post

    Hello Radoslav

    I really appreciate your help and for the working example. I have one confusion. From many forums, I read that the dynamic controls have to be loaded during Page_Init method if we have to persist the view state of the dynamically added controls . Few links are
    http://www.4guysfromrolla.com/articles/092904-1.aspx
    http://geekswithblogs.net/shahed/archive/2008/06/26/123391.aspx

    In my project, I am trying to do the same.

    <telerik:RadTabStrip ID="tabMemberDetails" runat="server" Skin="WebBlue" MultiPageID="tabDetails" SelectedIndex="0" Align="Justify" ClickSelectedTab="true" EnableViewState="false" ReorderTabsOnSelect="true" Width="1139px" ScrollChildren="true" OnClientTabSelected="TabCallback">
    </telerik:RadTabStrip>
      
     <telerik:RadMultiPage ID="tabDetails" ScrollBars="Auto" runat="server" SelectedIndex="0" CssClass="pageView" Width="1137px" Height="470px">
    </telerik:RadMultiPage>
      
      
    <telerik:RadGrid ID="gvSingleMember"............
       .............
       .............
      
      <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
        <Selecting AllowRowSelect="True" />
        <ClientEvents OnRowSelected="RowSelected" />
      </ClientSettings>
    </teleri:RadGrid>

    Above codes shows the structure of my RadTabStrip and RadGrid. OnRowSelected event, I am storing the EmpID in the hiddenfield. So that I can use it in the code behind to load usercontrol for the particular Employee. The codebehind section is as shown below.

    protected void Page_Init(object sender, EventArgs e)
     {
                 LoadTabs();
     }
      
    private void LoadTabs()
     {
        generates the Tabs..........
        LoadPageView()
     }
      
    protected void LoadPageView()
      {
        ViewState["EmpID"] = hidEmpID.Value(HiddenField);
        string viewID = null;    
        Generate PageViews............
        LoadUserControls............. 
        BindControls in the RadTabStrip......        
      }

    In the above codes, I have not written the full codes because it would look complex and lengthy. However you wiil understand what I am doing. In the Page_Init event, I am calling LoadTabs where I load Tabs dynamically. After loading tabs I call LoadpageView(), where I generate PageViews and load the usercontrol. Now the problem is in the LoadPageView event. I need to access the hiddenField value and store in Viewstate because I need to load usercontrol for particular Employee. And as far as I know, I can't do this before Page_Load event. It gives empty value.

    Can you suggest me any way so that I can access hidden field value during Page_Init. Or could you confirm that loading dynamic controls in Page_Load event will not give any problem.

    With Regards
    Ravi


  6. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 30 Nov 2010 Link to this post

    Hello Ravi,

    You could get the value from the HiddenField into the Page_Init with the following code snippet:
    base.OnInit(e);
    if (Form.Method == "post")
    {
        NameValueCollection nvc = Request.Form;
        if (nvc["HiddenField1"] != null)
        {
           string value = nvc["HiddenField1"].ToString();
        }
    }

    Additionally I am sending you a simple example. Please check it out and let me know if it helps you.

    Greetings,
    Radoslav
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top