Rad Map keeps shifting when changing the Tabs

[Rubiya]

Hi ,

My scenario is as follows,

I have 3 user controls each of which contains Rad Map with some data.

This is displaying correctly. However my problem is that I am using these user controls in 3 different tabs using Rad Tab same as the 'Load On demand' demo of the RadTab in Telerik site. On the initial tab change the map displays correctly. But if keep changing the tabs the maps are shifting its position to the left.

Why is this happening?

Thanks

[Rumen]

Hi,

I tried to replicate the problem locally using the "LoadOnDemand" demo as a base and successfully managed to reproduce it.

I solved the issue by setting Width and Height properties to the Map controls to ensure that their dimensions stays untouched when the parent container changes after the ajax updates.

Regards,
Rumen
Progress Telerik

[Rubiya]

Hi Rumen,

 

Thanks for your reply.

I am trying this. In the meantime I have another question on the control.I am trying to show a loading panel in the Rad map when a button is clicked . This is to display some data on the map based on some filters. But when I click on the button the loading panel appears,however it does not disappear after that. Can you please help me with this issue.

 

Javascript code,

var currentLoadingPanel = null;
        var currentUpdatedControl = null;
        function RequestStart(sender, args) {
            currentLoadingPanel = $find("<%= LoadingPanel1.ClientID %>");

        if (args.get_eventTarget() == "<%= btnFilter.UniqueID %>") {
            currentUpdatedControl = "<%= mapCoverage.ClientID %>";
            }

        //show the loading panel over the updated control
            currentLoadingPanel.show(currentUpdatedControl);
        }
        function ResponseEnd() {
            //hide the loading panel and clean up the global variables
            //alert(currentLoadingPanel);
            //currentLoadingPanel = $find("<%= LoadingPanel1.ClientID %>");
            //alert(currentLoadingPanel);
            if (currentLoadingPanel != null)
                 alert("Loading panel hide");
                currentLoadingPanel.hide(currentUpdatedControl);
            currentUpdatedControl = null;
            currentLoadingPanel = null;
        }

 

aspx code

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" RequestQueueSize="1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnFilter">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="mapCoverage" LoadingPanelID="LoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
</telerik:RadAjaxManager>

RadMap control as below.

<telerik:RadMap RenderMode="Lightweight" runat="server" ID="mapCoverage" MinZoom="2" Zoom="2" OnItemDataBound="mapCoverage_ItemDataBound" Width="100%" Skin="Silk">
            <ClientEvents OnInitialize="OnInitializeCoverage" />
            <CenterSettings Latitude="30" Longitude="10" />
            <LayersCollection>
                <%--<telerik:MapLayer Type="Shape" ClientDataSourceID="RadClientDataSource2">
                    <StyleSettings>
                        <FillSettings Color="#E5E7E9" />
                        <StrokeSettings Color="#797D7F" />
                    </StyleSettings>
                </telerik:MapLayer>--%>
                <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                    UrlTemplate="http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png">
                    <StyleSettings>
                        <FillSettings Color="#E5E7E9" />
                        <StrokeSettings Color="#797D7F" />
                    </StyleSettings>
                </telerik:MapLayer>
                <telerik:MapLayer Type="Shape">
                    <StyleSettings>
                        <FillSettings Opacity="0.4" Color="#1E8449" />
                        <StrokeSettings Width="0" />
                    </StyleSettings>
                </telerik:MapLayer>
                <telerik:MapLayer Type="Marker" Shape="myCustomShape" LocationField="location">
                    <StyleSettings>
                        <FillSettings Color="Red" Opacity="0.6" />
                        <StrokeSettings Color="Black" />
                    </StyleSettings>
                    <TooltipSettings Width="300"
                        Template="<div class='rightcol'>    <div class='country'>#= marker.dataItem.country #</div>    <div class='city'>#= marker.dataItem.airport #</div>    <div class='location'>Location:#= marker.dataItem.Location #</div></div>">
                        <AnimationSettings>
                            <OpenSettings Duration="300" Effects="fade:in" />
                            <CloseSettings Duration="200" Effects="fade:out" />
                        </AnimationSettings>
                    </TooltipSettings>
                </telerik:MapLayer>
            </LayersCollection>
        </telerik:RadMap>

[Rumen]

Hi Rubiya,

Please try the following suggestions:

1. It could be that there are multiple ajaxifications in the page - for example if the code is in a user control or content page which is placed in another ajaxpanel/updatepanel. The problem is discusses in this help article: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radajaxmanager/troubleshooting/controls-wrapped-in-ajaxpanel-and-added-to-ajaxmanager-settings
2. You can wrap the map in an Asp:Panel and ajaxify the panel:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" RequestQueueSize="1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnFilter">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="MapWrapper1" LoadingPanelID="LoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:panel id="MapWrapper1" runat="server">
    <telerik:RadMap .../>
</asp:panel>

The following declaration is not needed and you can remove it:
<ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" /> logic

3. Ensure that the RadLoadingPanel has its Skin property set.

It you still experience the problem, please open a support ticket and provide a simple runnable project that demonstrates the issue.

Kind regards,
Rumen
Progress Telerik