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

Compatibility issue with Openlayers.

6 Answers 88 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Yang
Top achievements
Rank 1
Yang asked on 16 Dec 2013, 07:38 AM
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

6 Answers, 1 is accepted

Sort by
0
Yang
Top achievements
Rank 1
answered on 17 Dec 2013, 09:02 AM
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
0
Vessy
Telerik team
answered on 18 Dec 2013, 12:33 PM
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.
0
Yang
Top achievements
Rank 1
answered on 19 Dec 2013, 04:56 AM
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
0
Ianko
Telerik team
answered on 23 Dec 2013, 12:12 PM
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.
0
Yang
Top achievements
Rank 1
answered on 25 Dec 2013, 05:14 AM
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
0
Ianko
Telerik team
answered on 27 Dec 2013, 07:55 AM
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.
Tags
Splitter
Asked by
Yang
Top achievements
Rank 1
Answers by
Yang
Top achievements
Rank 1
Vessy
Telerik team
Ianko
Telerik team
Share this question
or