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

How to use radajax manager with UserControl

1 Answer 186 Views

Ajax

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

Prava kafle asked on 21 May 2010, 08:27 PM

Hi,
I am trying to use RadAjaxManager tool to update third party control. AjaxManager works fine if I just use ASP.Net web controls. Once I introduce ThinkGeo map control my application does not display map. My application is supposed to have partial page update on button click, but I am loosing my map even during page load.
Without the RadAjax Manager, my applicatio

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %> 
        
            <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register assembly="WebEdition" namespace="ThinkGeo.MapSuite.WebEdition" tagprefix="cc1" %> 
        
            <%@ Register Src="~/Map.ascx" TagName="Map" TagPrefix="ucMap" %> 
        
            <%@ Register Src="~/ElementInfo.ascx" TagName="ExcelData" TagPrefix="cc2" %> 
        
            <!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>Next Gen Web Browser</title> 
        
                <link href="MainPageStyle.css" rel="stylesheet" type="text/css" /> 
        
             </head> 
        
                <body> 
        
                <form  runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <%-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> 
        
             <script type="text/javascript">   
        
                        $(document).ready(function() { 
        
                            SendPostBack(); 
        
                        }); 
        
                        function SendPostBack() { 
        
                           <%=Page.GetPostBackEventReference(btnDummy)%>; 
        
                        } 
        
                 </script>--%> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                     <AjaxSettings> 
        
                         <telerik:AjaxSetting AjaxControlID="Button1"> 
        
                             <UpdatedControls> 
        
                                 <telerik:AjaxUpdatedControl ControlID="MapDivSplitter" /> 
        
                             </UpdatedControls> 
        
                         </telerik:AjaxSetting> 
        
                         <telerik:AjaxSetting AjaxControlID="Button2"> 
        
                             <UpdatedControls> 
        
                                 <telerik:AjaxUpdatedControl ControlID="MapDivSplitter" /> 
        
                             </UpdatedControls> 
        
                         </telerik:AjaxSetting> 
        
                         <telerik:AjaxSetting AjaxControlID="Map1"> 
        
                             <UpdatedControls> 
        
                                 <telerik:AjaxUpdatedControl ControlID="Map1" /> 
        
                             </UpdatedControls> 
        
                         </telerik:AjaxSetting> 
        
                     </AjaxSettings> 
        
                </telerik:RadAjaxManager>   
        
                <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%"   
        
                    Width="100%" PanesBorderSize="0"  BorderSize="0"   
        
                         Orientation="Horizontal" Skin="Vista" LiveResize="true"  
        
                    VisibleDuringInit="false" ResizeWithBrowserWindow="true"  > 
        
                    <telerik:RadPane ID="TitleBarPane" runat="server" Locked="true" Height="94px"> 
        
                             <asp:Image ID="logoImage" ImageUrl="theme/default/Logo.JPG"  alt="Company Logo" runat="server" /> 
        
                            <asp:Image id="logoStretch" ImageUrl="theme/default/LogoStretch.JPG" alt="Fill Image"   runat="server" Height="95px" Width="100%" /> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadSplitBar ID="TitleRadSplitBar" runat="server"  /> 
        
                    <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None"> 
        
                        <telerik:RadSplitter ID="ContentRadSplitter" runat="server" Skin="Vista" PanesBorderSize="0"  BorderSize="0" > 
        
                            <telerik:RadPane ID="LeftRadPane" runat="server" Width="230" BackColor="White" Scrolling="None"> 
        
                                 <asp:Button ID="Button1" runat="server" Text="Display Second Image "   onclick="Button1_Click"/> 
        
                                 <asp:Button ID="Button2" runat="server" Text="Hide Second Image "   onclick="Button2_Click"/> 
        
                           </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="NavRadSplitBar" runat="server" CollapseMode="Forward"  /> 
        
                            <telerik:RadPane ID="MapRadPane" runat="server" Scrolling="None"   > 
        
                                         <telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal" Skin="Vista" LiveResize="true" VisibleDuringInit="false" PanesBorderSize="0"  BorderSize="0"   > 
        
                                         <telerik:RadPane ID="MapPane" runat="server" Scrolling="None" > 
        
                                         <%--<asp:Button ID="btnDummy" runat="server"    Width="200" Height="30" 
        
                                                style="z-index:200; position:absolute; top:9px; left:179px;"  
        
                                                onclick="btnDummy_Click"  />--%> 
        
                                                <asp:Panel  ID="MyPanel" Height="100%" Width="100%" runat="server" ScrollBars="None"> 
        
                                            <cc1:Map ID="Map1" runat="server" Height="100%" Width="100%" > 
        
                                            </cc1:Map> 
        
                                            </asp:Panel> 
        
                                             </telerik:RadPane> 
        
                                            <telerik:RadSplitBar ID="MapRadSplitBar" runat="server" CollapseMode="None" /> 
        
                                            <telerik:RadPane ID="DataGridPane" runat="server" MinHeight="100" Height="130" Scrolling="Both" Collapsed="true">  
        
                                                 <%--<cc2:ExcelData  ID="Exceldata" runat="server"  />--%> 
        
                                            </telerik:RadPane> 
        
                                        </telerik:RadSplitter> 
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </telerik:RadPane> 
        
                </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Linq; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using Telerik.Web.UI; 
        
            using System.Data.SqlClient; 
        
            using System.Data; 
        
            using ThinkGeo.MapSuite.Core; 
        
            using ThinkGeo.MapSuite.WebEdition; 
        
            using System.Drawing; 
        
                public partial class Test : System.Web.UI.Page 
        
                { 
        
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                        if (!IsPostBack) 
        
                               openMap(); 
        
                       // NextGenProject.OpenProject(); 
        
                    } 
        
                    protected void Button1_Click(object sender, EventArgs e) 
        
                    { 
        
                        DataGridPane.Collapsed = false; 
        
                        DataGridPane.Splitter.SplitBarsSize = 6; 
        
                        MapRadSplitBar.CollapseMode = SplitBarCollapseMode.Both; 
        
                        //Map1.BackColor = Color.Green; 
        
                        //if (DataGridPane.Controls.Count > 0) 
        
                        //    DataGridPane.Controls.Clear(); 
        
                        //Control userControl = LoadControl("~/ElementInfo.ascx"); 
        
                        //DataGridPane.Controls.Add(userControl); 
        
                    } 
        
                    protected void Button2_Click(object sender, EventArgs e) 
        
                    { 
        
                        DataGridPane.Collapsed = true; 
        
                        DataGridPane.Splitter.SplitBarsSize = 6; 
        
                        MapRadSplitBar.CollapseMode = SplitBarCollapseMode.None; 
        
                       // Map1.BackColor = Color.Lavender; 
        
                        //if (MapPane.Controls.Count > 0) 
        
                        //    MapPane.Controls.Clear(); 
        
                        //Control userControl = LoadControl("~/Map.ascx"); 
        
                        //MapPane.Controls.Add(userControl); 
        
                    } 
        
                    void openMap() 
        
                    { 
        
                        string connectionString = "Data Source=MAPCOM071\\SQLEXPRESS2008;Initial Catalog=Lakeland;Integrated Security=True"; 
        
                        MsSql2008FeatureLayer fsl = new MsSql2008FeatureLayer(connectionString, "msiOverview", "ID"); 
        
                        fsl.ZoomLevelSet.ZoomLevel01.DefaultLineStyle = LineStyles.Canal1; 
        
                        fsl.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; 
        
                        fsl.Open(); 
        
                        RectangleShape currentExtent = fsl.GetBoundingBox(); 
        
                        fsl.Close(); 
        
                        fsl.Srid = 0; 
        
                        Map1.StaticOverlay.Layers.Add(fsl); 
        
                        Map1.MapUnit = GeographyUnit.Feet; 
        
                        Map1.CurrentExtent = currentExtent; 
        
                        Map1.BackColor = Color.DarkGoldenrod; 
        
                    } 
        
                    protected void btnDummy_Click(object sender, EventArgs e) 
        
                    { 
        
                        Map1.BackColor = Color.Indigo; 
        
                    } 
        
                }

n displays map on right and buttons on left but with RadAjax Manager my map panel is empty. How can I ajaxify my application with Ajax Manager. Given below is my code and mark up.

I have another issue with RadAjax manager. I wanted to set "Initiater control" and "Update control" using visual builder but I cannot see my user control in visual builder. Is it normal or am I missing something?

Thanks
Prava

1 Answer, 1 is accepted

answered on 26 May 2010, 03:13 PM

Hello Prava,

I noticed that you add MapDivSplitter as updated control into the RadAjaxManager settings. However this control have VisibleDuringInit="false" set for the splitter. Note that adding initially invisible controls into the ajax settings is not supported scenario. The initiator and target controls should always be visible on the page. Therefore I suggest you to add in the ajax setting a container which is always visible on the page instead of the splitter.
Regarding the property builder question you have - yes not seeing the UserControl into the PropertyBuilder is normal behavior. You could use only the user control's container in the designer settings.

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.