Dynamic control invisible inside radsplitter

2 posts, 0 answers
  1. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 20 May 2010 Link to this post

    Hi,

    I am trying to display a ThinkGeoMap inside radsplitter and ajaxify it using RadAjax Manager. The map works fine if I use Asp.Net UpdatePanels. Once I remove Updatepanels and use RadAjax Manager my map is invisible.

    If I replace map with Image everything works fine. Why  am I having problem with a dynamic control like map? Given below is my code and mark up.

    Thanks,
    Prava
    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; 
    namespace NextGenWebApp 
        public partial class Test : System.Web.UI.Page 
        { 
            protected void Page_Load(object sender, EventArgs e) 
            { 
                if (!IsPostBack) 
                    openMap(); 
            } 
            protected void Button1_Click(object sender, EventArgs e) 
            { 
                DataGridPane.Collapsed = false
                DataGridPane.Splitter.SplitBarsSize = 6; 
                MapRadSplitBar.CollapseMode = SplitBarCollapseMode.Both; 
     
     
            } 
            protected void Button2_Click(object sender, EventArgs e) 
            { 
                DataGridPane.Collapsed = true
                DataGridPane.Splitter.SplitBarsSize = 6; 
                MapRadSplitBar.CollapseMode = SplitBarCollapseMode.None; 
     
            } 
            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(); 
                PointShape center = currentExtent.GetCenterPoint(); 
                fsl.Srid = 0; 
                Map1.MapUnit = GeographyUnit.Feet; 
                LayerOverlay staticOverlay = new LayerOverlay(); 
                staticOverlay.Layers.Add(fsl); 
                Map1.CustomOverlays.Add(staticOverlay); 
                Map1.CurrentExtent = currentExtent; 
                Map1.BackColor = Color.DarkGoldenrod; 
                Map1.CenterAt(center); 
            } 
     
             
          
     
        } 
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="NextGenWebApp.Test" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <%@ Register assembly="WebEdition" namespace="ThinkGeo.MapSuite.WebEdition" tagprefix="cc1" %> 
    <!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"
        <style type="text/css" > 
            html, body, form 
            { 
                height: 100%; 
                margin: 0; 
                padding: 0; 
                overflow: hidden; 
            } 
             .TitleRadSplitBar 
            { 
               margin :0px;  
               overflow:hidden; 
            } 
            
        </style> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script
        </head> 
        <body> 
        <form id="form1" runat="server"
       <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
          <%--  <%--Code below centralize the map and covers 100% of  RadPanel container--%> 
               <script type="text/javascript">   
                $(document).ready(function() { 
                    SendPostBack(); 
                }); 
                function SendPostBack() { 
                   <%=Page.GetPostBackEventReference(btnDummy)%>
                } 
                 </script> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"    > 
            <AjaxSettings> 
               <telerik:AjaxSetting  AjaxControlID="MapDivSplitter"
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="MapDivSplitter" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                <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="btnDummy"
                    <UpdatedControls> 
                       <%--   <telerik:AjaxUpdatedControl ControlID="Panel1" />--%> 
                      <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:Panel ID="Panel1" runat="server" Height="100%" Width="100%"  style="padding:0px; margin:0px;"  BackColor="Black">--%> 
                                          <cc1:Map ID="Map1" runat="server"   Height="100%" Width="100%"  > 
                                           </cc1:Map> 
                                          <%--<asp:Image ID="Image1" ImageUrl="theme/default/Logo.JPG"  alt="Company Logo" runat="server" height="100%" width="100%"  /> 
                                        </asp:Panel>--%> 
                                      <asp:Button ID="btnDummy" runat="server" Style="display: none;" /> 
                                    </telerik:RadPane> 
                                    <telerik:RadSplitBar ID="MapRadSplitBar" runat="server" CollapseMode="None" /> 
                                    <telerik:RadPane ID="DataGridPane" runat="server" MinHeight="100" Height="130" Scrolling="Both" Collapsed="true">  
                                        <asp:Image ID="Image2" ImageUrl="theme/default/Logo.JPG"  alt="Company Logo" runat="server" height="100%" width="100%"  /> 
                                    </telerik:RadPane> 
                                </telerik:RadSplitter> 
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 
     
  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 25 May 2010 Link to this post

    Hi Prava,

    Does it makes any difference if you add an ajax setting where the Map1 control updates itself?
    Also try calling the openMap() method on each Page_Load instead of on initial page load. Note that when controls are added dynamically with ajax, they should be recreated on each page load.

    Let me know how it goes.

    Best wishes,
    Iana
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top