Rad Map keeps shifting when changing the Tabs

4 posts, 0 answers
  1. Rubiya
    Rubiya avatar
    2 posts
    Member since:
    Aug 2017

    Posted 04 Sep 2017 Link to this post

    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

  2. Rumen
    Admin
    Rumen avatar
    13302 posts

    Posted 08 Sep 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Rubiya
    Rubiya avatar
    2 posts
    Member since:
    Aug 2017

    Posted 10 Sep 2017 in reply to Rumen Link to this post

    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>

  4. Rumen
    Admin
    Rumen avatar
    13302 posts

    Posted 14 Sep 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top