This is a migrated thread and some comments may be shown as answers.

[Solved] RadAjaxManager or ProxyManager and load on demand tab strip.

4 Answers 201 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Temp asked on 20 Jun 2008, 04:46 AM

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/>";  
        
                }  
        
            }

4 Answers, 1 is accepted

answered on 06 Oct 2010, 03:12 PM

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" />
                     
                    <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?

answered on 06 Oct 2010, 03:12 PM

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" />
                     
                    <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?