Compatibility issue with Openlayers.

7 posts, 0 answers
  1. Yang
    Yang avatar
    4 posts
    Member since:
    Apr 2013

    Posted 16 Dec 2013 Link to this post

    Hi support team,

    Our customer recently found an issue that the Telerik splitter's radPane don't work well with Openlayers which is a famous map engine. Here is a link to show the issue http://www.screencast.com/t/bQUC5MQg4V2u

    Like the video shows, the issue is the map didn't fill the whole div, but if when I pan the map, then it full. If I remove the map div from splitter, the map can also fill the whole div. What I am guessing is when the map is initialized, it doesn't know what's the exact size of the div of the map as the Splitter generates the div dynamic. I also tested the latest version of Openlayer, but encountered the same issue.

    In order to make the issue smallest, I created a sample to recreate the issue and type some comments.(seems your forums don't support to attach .zip, please download it from http://www.screencast.com/t/gdh0MWOF )

    Thanks in advanced.
    Troy
  2. Yang
    Yang avatar
    4 posts
    Member since:
    Apr 2013

    Posted 17 Dec 2013 Link to this post

    Hi,

    Now, I can narrow down the issue after debugged into it so we can ignore the above and just see the below.

    In Telerik Splitter, It will generated the mixed div "RAD_SPLITTER_PANE_CONTENT_Radpane" with 398*398(px) client size at the first time in the browser but actually, the real value is not that after the initialization somehow. for example like 1678*332 etc which might based on the browser screen size.

    I think that's the root of the issue which results to such strange behavior. Because the Openlayers can only read out the client size(398*398) from its parent node during its initialization, and after the initialization, the size might be modified by Telerik to fit the screen size I guess.

    So, My question is: is there any way to make the div "RAD_SPLITTER_PANE_CONTENT_Radpane" with a full screen client size?

    If you are confused on the above, Just skip it and would you please explain this?
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, body, form {
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
        </style>
     
        <script type="text/javascript">
            function init() {
                var radPane = document.getElementById("Radpane");
                if (radPane) {
                    alert(radPane.clientWidth);
                    // 398 px ???
                    // can we make it changed based on the current screen size as I want to get the full screen size at this moment?
                }
            }
        </script>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server" style="height: 100%;">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <telerik:RadSplitter ID="Radsplitter" runat="server" Width="100%" Height="100%" LiveResize="true" Orientation="Horizontal">
                <telerik:RadPane ID="Radpane" Height="100%" Width="100%" runat="server" BorderColor="Black" BorderStyle="Double" BorderWidth="3" BackColor="Yellow">
                    <div id="Map1" style="height: 100%; width: 100%; border: 5px solid red;">
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </form>
        <script type="text/javascript">
            init();
        </script>
    </body>
    </html>

    Thanks for any reply,
    Troy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 18 Dec 2013 Link to this post

    Hi Yang,

    I would like to start with the fact, that the use of a Splitter with only one RadPane is highly not recommended scenario which is not supported and might lead to man unexpected issues.

    Directly regarding the experienced issue - the Splitter needs some time in order to calculate its size properly, depending on the current browser size. The earlier moment when you can access the already calculated size of the control (not the initial one) is its ClientLoad event. For example:
    <telerik:RadSplitter ID="Radsplitter" runat="server" Width="100%" Height="100%" LiveResize="true"OnClientLoad="OnClientLoad" Orientation="Horizontal">
        <telerik:RadPane ID="Radpane" Height="100%" Width="100%" runat="server" BorderColor="Black"
            BorderStyle="Double" BorderWidth="3" BackColor="Yellow">
            <div id="Map1" style="height: 100%; width: 100%; border: 5px solid red;">
            </div>
        </telerik:RadPane>
        <telerik:RadPane ID="AdditionaPane1" runat="server" Height="100px" BackColor="Blue"></telerik:RadPane>
    </telerik:RadSplitter>
    <script type="text/javascript">
        function OnClientLoad(splitter, args) {
            var radPane = $get("Radpane");
            alert("OnClientLoad: " + radPane.clientWidth);
        }
    </script>

    I hope you will find this information helpful.

    Regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Yang
    Yang avatar
    4 posts
    Member since:
    Apr 2013

    Posted 18 Dec 2013 Link to this post

    Hi Vestelina,

    Thanks for your information and recommendation. 

    Using only one RadPane is just a mistake as I have removed many codes from the original one to make the issue seems simple but still thanks.

    For the ClientLoad event, Actually, I have learned and tried it before from the other threads. Wrapping the init() method in this event does works fine, but this scripts was registered into the page by ScriptManager in server side, So I don't think there is a way to register them into this event.

    Since there is an execute sequence issue, I have to ask our customer to accept the below workaround:

    <telerik:RadSplitter ID="Radsplitter" runat="server" Width="100%" Height="100%" LiveResize="true" Orientation="Horizontal" OnClientLoad="SplitterLoaded">
        <telerik:RadPane ID="Radpane" Height="100%" Width="100%" runat="server">
            <div id="Map1" style="height: 100%; width: 100%;">
            </div>
        <script type="text/javascript">
            (function () {
                var mapContainer = document.getElementById("Map1");
                mapContainer.style.width = screen.width + "px";
            })();
        </script>
        </telerik:RadPane>
        <telerik:RadPane ID="AdditionaPane1" runat="server" Height="100px" BackColor="Blue"></telerik:RadPane>
    </telerik:RadSplitter>

    Still thank your assistance.
    Troy
  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 23 Dec 2013 Link to this post

    Hi Troy,

    If I understand correctly, the desired achievement is to load the first pane initially with the same size as the browser's dimensions.

    To achieve this:
    • You can do that by using the CSS size inheritance, start with the proper inheritance of the HTML element, which will get the browser's size and use the same rule further down to the form child element:
      <head id="Head1" runat="server">
          <style type="text/css">
           /* CSS reset
              The following reset will force the form
               element to inherit the size of the html
               and the body elements */
              html, body, #form1 {
                  height: 100%;
                  width: 100%;
                  margin:0;
                  padding:0;
              }
          </style>
      </head>
      <body>
          <form id="form1" runat="server">
              <telerik:RadScriptManager runat="server" ID="RSM1"></telerik:RadScriptManager>
       
              <telerik:RadSplitter ID="Radsplitter" runat="server" Width="100%"
                  Height="100%" LiveResize="true" Orientation="Horizontal"
                  OnClientLoad="SplitterLoaded">
                  <telerik:RadPane ID="Radpane" Height="100%" Width="100%" runat="server">
                      <div id="Map1" style="height: 100%; width: 100%;">
                          This is the DIV element in the first Pane
                      </div>
                  </telerik:RadPane>
                  <telerik:RadPane ID="AdditionaPane1" runat="server"
                       Height="100px" BackColor="Blue"></telerik:RadPane>
              </telerik:RadSplitter>
          </form>
      </body>
      </html>
    • You can use the OnClientLoad event to set the proper size of the pane and the desired container:
      <telerik:RadSplitter ID="Radsplitter" runat="server" Width="100%"
          Height="100%" LiveResize="true" Orientation="Horizontal"
          OnClientLoad="SplitterLoaded">
          <telerik:RadPane ID="Radpane" runat="server">
              <div id="Map1" style="height: 100%; width: 100%;">
                  This is the DIV element in the first Pane
              </div>
          </telerik:RadPane>
          <telerik:RadPane ID="AdditionaPane1" runat="server"
              Height="100px" BackColor="Blue">
          </telerik:RadPane>
      </telerik:RadSplitter>
      <script type="text/javascript">
          function SplitterLoaded() {
              var width = window.innerWidth;
              var height = window.innerHeight;
              var mapContainer = document.getElementById("Map1");
              var pane = $find("<%= Radpane.ClientID %>");
       
              // Set size to the pane
              pane.set_width(width);
              pane.set_height(height);
              // Set size to the container
              mapContainer.style.width = width + "px";
              mapContainer.style.height = height + "px";
              }
      </script>
    • And with the Init event:
      <telerik:RadSplitter ID="Radsplitter" runat="server" Width="100%"
          Height="100%" LiveResize="true" Orientation="Horizontal"
          OnClientLoad="OnClientLoad">
          <telerik:RadPane ID="Radpane" runat="server">
              <div id="Map1" style="height: 100%; width: 100%;">
                  This is the DIV element in the first Pane
              </div>
          </telerik:RadPane>
          <telerik:RadPane ID="AdditionaPane1" runat="server"
              Height="100px" BackColor="Blue">
          </telerik:RadPane>
      </telerik:RadSplitter>
      <script type="text/javascript">
          Sys.Application.add_init(function () {
              var width = window.innerWidth;
              var height = window.innerHeight;
              var mapContainer = document.getElementById("Map1");
       
              mapContainer.style.width = width + "px";
              mapContainer.style.height = height + "px";
          });
       
          function OnClientLoad(sender, args) {
              // Note that the pane object is not initialized in the init event
              // And you should further use the load event to resize the pane.
              var mapContainer = document.getElementById("Map1");
              var width = mapContainer.offsetWidth;
              var height = mapContainer.offsetHeight;
       
              sender.set_width(width);
              sender.set_height(height);
          }
      </script>

    You should note that on the Init event, the Pane's object is not initialized and should be resided again on its OnClientLoad event.

    If these approaches does not help you, please get back with more details about the desired achievement and the specific requirements of the Splitter control.

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  7. Yang
    Yang avatar
    4 posts
    Member since:
    Apr 2013

    Posted 24 Dec 2013 Link to this post

    Hi Lanko,

    Thanks for your answers and Happy Christmas!

    But I believed I have tried the previous two ways except the third one. Now, the third one also doesn't work. My question is simple:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, body, form {
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
        </style>
      
        <script type="text/javascript">
            function init() {
                var radPane = document.getElementById("Radpane");
                if (radPane) {
                    alert(radPane.clientWidth);
                    // 398 px ???
                    // can we make it changed based on the current screen size as I want to get the full screen size at this moment?
                }
            }
        </script>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server" style="height: 100%;">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <telerik:RadSplitter ID="Radsplitter" runat="server" Width="100%" Height="100%" LiveResize="true" Orientation="Horizontal">
                <telerik:RadPane ID="Radpane" Height="100%" Width="100%" runat="server" BorderColor="Black" BorderStyle="Double" BorderWidth="3" BackColor="Yellow">
                    <div id="Map1" style="height: 100%; width: 100%; border: 5px solid red;">
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </form>
        <script type="text/javascript">
            init();
        </script>
    </body>
    </html>


    Both the event "OnClientLoad" and the "Sys.Application.add_init" execute after the init() method. That's why I always get the "398px" size in this method at that time.
    Hope my question is clear now.

    Troy

  8. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 27 Dec 2013 Link to this post

    Hello Troy,

    Happy Christmas to you too!

    On this state of the Page the pane control is still not rendered correctly and you cannot get its proper size, because it is not applied yet.

    As you can see, the following modification of the init() method will return the correct size on a later state, when the pane is rendered as expected:
    function init() {
        var radPane = document.getElementById("Radpane");
        if (radPane) {
            setTimeout(function () {
                alert(radPane.clientWidth);
            }, 0);
             
            // 398 px ???
            // can we make it changed based on the current screen size as I want to get the full screen size at this moment?
        }
    }


    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017