RadAjaxManager or ProxyManager and load on demand tab strip.

5 posts, 0 answers
  1. Temp
    Temp avatar
    55 posts
    Member since:
    May 2007

    Posted 19 Jun 2008 Link to this post

    Hi I am really struggling to get my head around these tools using the supplied documentation.

    I have what I think is a pretty common scenario. We have a tab strip with several dynamically loaded tabs, that use load on demand to fill in a page view. The page views all load a user webcontrol which contains a RadGrid. The RadGrid loads different data depending on the Category property assigned to teh user webcontrol.

    Could someone please have a look at my code and tell me what I need to do to get the grid to work with the edit/update/cancel code in ajax? At the moment I think they are always posting back.

    I have cut our code down to the bare essentials, it will not take long for Telerik to look. I have tried to read and understand the documentation on RadAjaxManager/RadProxyManager but do not know how I can set this to work properly sorry.

    <!--test.aspx--> 
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <%@ Register assembly="RadTabStrip.Net2" namespace="Telerik.WebControls" tagprefix="radTS" %> 
    <%@ Register TagPrefix="uc" TagName="UserControl1" Src="UserControl1.ascx"%> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
        <script type="text/javascript">  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
           
        <asp:ScriptManager ID="ScriptManager" runat="server" /> 
        <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">  
            <asp:Image runat="server" ID="LoadingImage1" ImageUrl="~/Ajax/Img/loading7.gif" AlternateText="Loading..." /> 
        </telerik:RadAjaxLoadingPanel> 
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">  
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="RadMultiPage1">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
        <script type="text/javascript">  
            function onTabSelecting(sender, args)  
            {     
                if (args.get_tab().get_pageViewID())  
                {args.get_tab().set_postBack(false);}  
            }  
        </script> 
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated">  
        </telerik:RadMultiPage> 
        <telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1" Skin="Office2007" OnTabClick="RadTabStrip1_TabClick" Orientation="HorizontalBottom">  
        </telerik:RadTabStrip> 
        <span id="spnDebug" runat="server">  
        </span> 
        </div> 
        </form> 
    </body> 
    </html> 
     
     
    <!--test.aspx.cs--> 
    using System;  
    using System.Collections;  
    using System.Configuration;  
    using System.Data;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.HtmlControls;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    using System.Xml.Linq;  
    using Telerik.Web.UI;  
     
    public partial class Test : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, System.EventArgs e)  
        {  
            if (!Page.IsPostBack)  
            {  
                  
                AddTab("Category 1");  
                AddTab("Category 2");  
                AddTab("Category 3");  
                if(RadTabStrip1.Tabs.Count > 0){AddPageView(RadTabStrip1.Tabs[0]);}  
                  
            }  
        }  
     
        private void AddTab(string tabName)  
        {  
            RadTab tab = new RadTab();  
            tab.Text = tabName;  
            RadTabStrip1.Tabs.Add(tab);  
        }  
     
        protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)  
        {  
            string userControlName = "UserControl1.ascx";  
            test_UserControl1 userControl = (test_UserControl1) Page.LoadControl(userControlName);  
            userControl.ID = e.PageView.ID + "_userControl";  
            userControl.Category = e.PageView.ID;  
            e.PageView.Controls.Add(userControl);  
        }  
     
        private void AddPageView(RadTab tab)  
        {  
            RadPageView pageView = new RadPageView();  
            pageView.ID = tab.Text;  
            RadMultiPage1.PageViews.Add(pageView);  
            tab.PageViewID = pageView.ID;  
        }  
     
        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)  
        {  
            AddPageView(e.Tab);  
            e.Tab.PageView.Selected = true;  
        }  
          
          
    }  
     
    <!--User Control 1--> 
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserControl1.ascx.cs" Inherits="test_UserControl1" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="Horizontal" AutoGenerateEditColumn="true" Skin="WebBlue" OnUpdateCommand="RadGrid1_UpdateCommand" OnItemDataBound="RadGrid1_ItemDataBound" OnNeedDataSource="RadGrid1_NeedDataSource">  
        <MasterTableView AutoGenerateColumns="True" EditMode="InPlace" TableLayout="Auto">  
            <RowIndicatorColumn Visible="False">  
                <HeaderStyle Width="20px"></HeaderStyle> 
            </RowIndicatorColumn> 
            <ExpandCollapseColumn Visible="False" Resizable="False">  
                <HeaderStyle Width="20px"></HeaderStyle> 
            </ExpandCollapseColumn> 
            <Columns> 
            </Columns> 
            <EditFormSettings> 
                <PopUpSettings ScrollBars="None"></PopUpSettings> 
            </EditFormSettings> 
        </MasterTableView> 
    </telerik:RadGrid> 
    <span id="spnDebug" runat="server"/>  
     
    <!--UserControl1.ascx.cs--> 
    using System;  
    using System.Collections;  
    using System.Configuration;  
    using System.Data;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.HtmlControls;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    using System.Xml.Linq;  
     
    using Telerik.Web.UI;  
     
    public partial class test_UserControl1 : System.Web.UI.UserControl  
    {  
        public string Category{get;set;}  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            spnDebug.InnerHtml = "UC loaded at " + DateTime.Now.ToString() + "<br/>Category is " + Category + "<br/>";  
        }  
          
          
        protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)  
        {  
            ArrayList list = new ArrayList();  
            switch (Category)  
            {  
                case "Category 1":  
                    list.Add("Cat1 Thing 1");  
                    list.Add("Cat1 Thing 2");  
                    list.Add("Cat1 Thing 3");  
                    break;  
                case "Category 2":  
                    list.Add("Cat2 Thing 1");  
                    list.Add("Cat2 Thing 2");  
                    list.Add("Cat2 Thing 3");  
                    break;  
                case "Category 3":  
                    list.Add("Cat3 Thing 1");  
                    list.Add("Cat3 Thing 2");  
                    list.Add("Cat3 Thing 3");  
                    break;  
                default:  
                    list.Add("Cat Unknown Thing 1");  
                    break;  
            }  
            RadGrid1.DataSource = list;  
              
        }  
     
        protected void RadGrid1_UpdateCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)  
        {  
            spnDebug.InnerHtml += "RadGrid1_UpdateCommand Called<br/>";  
        }  
     
        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
        {  
            spnDebug.InnerHtml += "RadGrid1_ItemDataBound Called<br/>";  
        }  
          
    }  
     
  2. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 23 Jun 2008 Link to this post

    Hi Temp,

    The easiest solution would be to wrap the TabStrip and MultiPage control in a single RadAjaxPanel and remove the RadAjaxManager. I'd suggest you however delete the current settings instead and just put a RadAjaxManagerProxy in your user control configuring it to ajaxify and update the Grid.

    Best wishes,
    Konstantin Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Milind Raje
    Milind Raje avatar
    37 posts
    Member since:
    May 2010

    Posted 06 Oct 2010 Link to this post

    I am trying to issue a warning message when the user tries to click on "save" (asp:Button) without making any selection on the grid. Here is the code:

    protected void SaveButtonClick(object sender, EventArgs e)
    {
       if( something) {
              // save
       } else {
              // Warn
             ClientScript.RegisterStartupScript(this.gettype(),"ErrorScript","<script>aler('You must select a record');</script>");
        }
    }

    This works however it leads to a full postback which is not a desirable effect.
    I tried to put panel around the save button and used the following on aspx side:
    <telerik:RadAjaxManagerProxy ID="proxyManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="saveButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="panel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
    .............
     <asp:Panel ID="panel" runat="server">
                    <div>
                        <asp:Button ID="saveButton" runat="server" Width="80px" Text="Save" ValidationGroup="Form"
                            CausesValidation="true" OnClick="SaveButtonClick" />
                        &nbsp;
                        <asp:Button ID="cancelButton" runat="server" Width="80px" Text="Cancel" CausesValidation="false"
                            OnClick="CancelButtonClick" />
                    </div>
                </asp:Panel>

    This does not work. What is the best way/elegant way of achieving this?
  4. Milind Raje
    Milind Raje avatar
    37 posts
    Member since:
    May 2010

    Posted 06 Oct 2010 Link to this post

    I am trying to issue a warning message when the user tries to click on "save" (asp:Button) without making any selection the grid. Here is the code:

    protected void SaveButtonClick(object sender, EventArgs e)
    {
       if( something) {
              // save
       } else {
              // Warn
             ClientScript.RegisterStartupScript(this.gettype(),"ErrorScript","<script>aler('You must select a record');</script>");
        }
    }

    This works however it leads to a full postback which is not a desirable effect.
    I tried to put panel around the save button and used the following on aspx side:
    <telerik:RadAjaxManagerProxy ID="proxyManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="saveButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="panel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
    .............
     <asp:Panel ID="panel" runat="server">
                    <div>
                        <asp:Button ID="saveButton" runat="server" Width="80px" Text="Save" ValidationGroup="Form"
                            CausesValidation="true" OnClick="SaveButtonClick" />
                        &nbsp;
                        <asp:Button ID="cancelButton" runat="server" Width="80px" Text="Cancel" CausesValidation="false"
                            OnClick="CancelButtonClick" />
                    </div>
                </asp:Panel>

    This does not work. What is the best way/elegant way of achieving this?
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 08 Oct 2010 Link to this post

    Hello Milind,

    Please set the asp panel to update itself. Also refer to the following help topic which elaborates on executing custom script after Ajax request. 


    Sincerely yours,
    Maria Ilieva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top