Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Dynamic control invisible inside radsplitter

1 Answer 84 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Prava kafle
Top achievements
Rank 1
Prava kafle asked on 20 May 2010, 06:59 PM
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> 
 

1 Answer, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 25 May 2010, 09:18 AM
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.
Tags
Splitter
Asked by
Prava kafle
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Share this question
or