This is a migrated thread and some comments may be shown as answers.

Pinning issue on creation of the control dyanamically

9 Answers 82 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Bhavya
Top achievements
Rank 1
Bhavya asked on 14 Jun 2011, 12:56 PM
Hi,
I am creating the sliding zone and sliding panes dynamically on a button click inside an update panel.
I will attach the code below.
The problem scenario:
1.Click on the postback button to create the controls
2.Controls are created.I pin the sliding pane created dynamically.
3.Then on clicking the postback button again,the width of the RadPane increases to the RadSlidingPaneWidth and on pinning the control goes back to the previous position.
NOTE: I cannot avoid using updatepanel as it is must for my application not to postback entire page on clicking the postback button.

Default.aspx:

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!

 

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">

 

 

<title></title>

 

 

<style type="text/css">

 

 

</style>

 

 

</

 

head>

 

 

<

 

script type="text/javascript">

 

 

var postbackButtonClientID = "<%=HdnVCCommandBtn.ClientID%>";

 

 

 

function RequestForControl() {

 

 

 

debugger

 

 

var requestType = "Create Control";

 

 

 

var Arguments = requestType;

 

 

__doPostBack(postbackButtonClientID, Arguments);

 

}

</

 

script>

 

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

</asp:ScriptManager>

 

 

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="300" Width="400">

 

 

<telerik:RadPane ID="MiddlePane" runat="server">

 

 

<input id="button" value="postback" onclick="javascript:RequestForControl();" type="button"/>

 

 

</telerik:RadPane>

 

 

<telerik:RadSplitBar ID="RadSplitBar2" runat="server" />

 

 

<telerik:RadPane ID="RightPane" Width="20px" runat="server" Height="98px">

 

 

<asp:UpdatePanel ID="VideoControlUpdatePanel" runat="server">

 

 

<ContentTemplate>

 

 

<asp:Panel ID="TestPanel" runat="server" BackColor="#898989" Height="100%" Width="100%">

 

 

<input id="HdnVCCommandBtn" runat="server" onclick="PostbackButton_Click" type="hidden" />

 

 

</asp:Panel>

 

 

</ContentTemplate>

 

 

</asp:UpdatePanel>

 

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

</form>

 

 

</

 

body>

 

 

</

 

html>

 

Default.aspx.cs:

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;

 

public

 

partial class _Default : System.Web.UI.Page

 

 

{

 

 

protected void Page_Load(object sender, EventArgs e)

 

 

{

 

ClientScript.GetPostBackEventReference(

this, string.Empty);

 

 

}

 

 

protected override void OnInit(EventArgs e)

 

 

{

 

 

base.OnInit(e);

 

 

 

if (IsPostBack)

 

 

{

 

 

if (Request.Form.Get("__EVENTTARGET") == HdnVCCommandBtn.ClientID.Replace("_", "$"))

 

 

{

 

 

RadSlidingZone rightZone = new RadSlidingZone();

 

 

rightZone.ID =

"RightZone";

 

 

rightZone.SlideDirection = Telerik.Web.UI.

SplitterSlideDirection.Left;

 

 

rightZone.Width = RightPane.Width;

 

 

RadSlidingPane rightSlidingPane1 = new RadSlidingPane();

 

 

rightSlidingPane1.ID =

"RightSlidingPane1";

 

 

rightSlidingPane1.Title =

"Right1";

 

 

rightSlidingPane1.Width =

new Unit(150);

 

 

rightZone.Items.Add(rightSlidingPane1);

 

 

RadSlidingPane rightSlidingPane2 = new RadSlidingPane();

 

 

rightSlidingPane2.ID =

"RightSlidingPane2";

 

 

rightSlidingPane2.Title =

"Right2";

 

 

rightSlidingPane2.Width =

new Unit(150);

 

 

rightZone.Items.Add(rightSlidingPane2);

 

RightPane.Controls.Add(rightZone);

 

TestPanel.Controls.Add(rightZone);

 

}

 

}

 

}

 

 

protected void PostbackButton_Click(object sender, EventArgs e)

 

 

{

 

}

 

}

 

 


Please help me with this issue asap.

Thanks in advance.


Regards,
Bhavya

9 Answers, 1 is accepted

Sort by
0
Niko
Telerik team
answered on 15 Jun 2011, 01:07 PM
Hello Bhavya,

Indeed, the sample code that you have provided was enough for me to reproduce the issue that you are facing. This behavior is normal for the RadSplitter as the docked sliding pane resizes the parent pane, in your case - RightPane. In order to work around this behavior you should reset the dimensions of both the Middle and Right panes. In order however to avoid unnecessary calculations you could store the dimensions OnClientLoad event of the RadSplitter and assign the cached values when you request for the controls. Here is the JavaScript sample:
function RequestForControl()
{
    var requestType = "Create Control";
    var Arguments = requestType;
    __doPostBack(postbackButtonClientID, Arguments);
    $find("<%= MiddlePane.ClientID %>").setVarSize(splitterPaneDims.MiddlePane);
    $find("<%= RightPane.ClientID %>").setVarSize(splitterPaneDims.RightPane);
}
 
var splitterPaneDims;
function storePaneSizes(splitter, args) {
    splitterPaneDims = {
        MiddlePane: $find("<%= MiddlePane.ClientID %>").getVarSize(),
        RightPane: $find("<%= RightPane.ClientID %>").getVarSize()
    };
}

Also, for your convenience, please, find attached the sample page with this implementation.

Hope this helps.

Kind regards,
Niko
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Bhavya
Top achievements
Rank 1
answered on 16 Jun 2011, 04:04 AM
Hi Niko,
Thanks for your reply.
The solution you provided worked for my application.

Regards,
Bhavya
0
Bhavya
Top achievements
Rank 1
answered on 26 Aug 2011, 09:45 AM
Hi Niko,
For the snippet i have sent I am facing anouther problem that i have added 2 RadSliders for the form and I see that these controls get misaligned when the page gets loaded for the first time as well as when i pin the sliding pane controls automatically.
I am replying on the same thread so that you can test on the same sample application.

Thanks in advance.


Regards,
Bhavya
0
Niko
Telerik team
answered on 29 Aug 2011, 12:27 PM
Hi Bhavya,

Unfortunately I cannot reproduce the issue that you are experiencing. The dynamically created RadSlidingPanes are ordered correctly in the RadSlidingZone and they are displayed without any visual glitches.
In order for me to at least see the issue that you are facing, I should ask you to record a video demonstrating the issue. Still the better option will be to open a support ticket and attach a fully runnable sample project that reproduces the issue, so that both of us can be sure that we are discussing one and the same code pieces.

Regards,
Niko
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Bhavya
Top achievements
Rank 1
answered on 02 Sep 2011, 07:51 AM

Hi Niko,
Thanks for your reply.
I will attach the sample for your reference.
Steps to reproduce:
1. Create the website for the application.
2. Deploy the application.
3.Delete all the temporary files and browse the URL.
4.Click on the postBack button.
5. You can see that the sliders are disoriented in the page on the initial click.
The same page will be loaded without any problem next time if we refresh the page or we click on the button again.
TestSlider.ascx:

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestSlider.ascx.cs" Inherits="TelerikSamples.TestSlider" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 <style type="text/css">
     #VideoInput
     {
         height: 219px;
         width: 215px;
     }
     </style>
 <asp:Panel ID="videoPane" runat="server" Width="100%" Height="100%">
  
<table style="border: thin dashed #008080">
    <tr>
        <td style="border: thin dashed #0000FF">       
            <telerik:RadSlider ID="ElevationBar" runat="server" IsDirectionReversed="True" Height="200" Orientation="Vertical" SmallChange="1" MaximumValue="100" MinimumValue="0" Value="50" TrackPosition="TopLeft" ItemType="Item">
            </telerik:RadSlider
        </td>
        <td style="border: thin dashed #FF0000" >      
           <table style="border: thin dashed #FF00FF; height:100%; width:100%;">
                <tr>
                    <td style="border: thin dashed #800000; height:100%; width:100%;">                    
                        <telerik:RadSlider ID="AzimuthBar" runat="server" Width="200" MaximumValue="360" MinimumValue="0" Value="180" TrackPosition="TopLeft" ItemType="Item">
                        </telerik:RadSlider>
                    </td>
                </tr>
                <tr>
                    <td style="border: medium dashed #00FF00">
                        <div id="VideoInput" enableviewstate="true" runat="server" >
                        This is to test telerik slider problem
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    </table>
    </asp:Panel>

 

 

TestSlider.ascx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
  
namespace TelerikSamples
{
    public partial class TestSlider : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
  
        }
    }
}
Test.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TelerikSamples.Test" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<script type="text/javascript">
        var postbackButtonClientID = "<%=HdnVCCommandBtn.ClientID%>";
        function RequestForControl()
        {
            var requestType = "Create Control";
            var Arguments = requestType;
            __doPostBack(postbackButtonClientID, Arguments);
            $find("<%= MiddlePane.ClientID %>").setVarSize(splitterPaneDims.MiddlePane);
            $find("<%= RightPane.ClientID %>").setVarSize(splitterPaneDims.RightPane);
        }
  
        var splitterPaneDims;
        function storePaneSizes(splitter, args) {
            splitterPaneDims = {
                MiddlePane: $find("<%= MiddlePane.ClientID %>").getVarSize(),
                RightPane: $find("<%= RightPane.ClientID %>").getVarSize()
            };
  
}
  
///This event is called when the updatepanel finishes partial updating and
///the control has been returned to the browser.
///This event handler is used for expanding the sliding pane for the latest request.
function EndRequestHandler(sender, args) {
    try {
    debugger
        $find("<%= MiddlePane.ClientID %>").setVarSize(splitterPaneDims.MiddlePane);
        $find("<%= RightPane.ClientID %>").setVarSize(splitterPaneDims.RightPane);
        var zone = $find("RightZone");
        var SlidingPaneIDHolder = document.getElementById("RightSlidingPane1");
        if (SlidingPaneIDHolder != null) {
            if (zone != null) {
                var isSuccess = zone.expandPane("RightSlidingPane1"); // expand the pane
                if (isSuccess) {
                   var isDockSuccess=zone.dockPane("RightSlidingPane1");
                }           
            }
        }
    }
    catch (e) {
        alert("Error is processing the End request");
    }
}
    </script>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />  
        
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="300" Width="400" ResizeMode="EndPane" OnClientLoad="storePaneSizes">
                <telerik:RadPane ID="MiddlePane" runat="server">
                    <input id="button" value="postback" onclick="RequestForControl();" type="button"/>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar2" runat="server" />
                <telerik:RadPane ID="RightPane" Width="20px" runat="server" Height="98px" Locked="true">
                    <asp:UpdatePanel ID="VideoControlUpdatePanel" runat="server"
                        <ContentTemplate>
                            <asp:Panel ID="TestPanel" runat="server" BackColor="#898989" Height="100%" Width="100%"
                                <input id="HdnVCCommandBtn" runat="server" onclick="PostbackButton_Click" type="hidden" />
                            </asp:Panel>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </telerik:RadPane>
            </telerik:RadSplitter>
     
    </form>
</body>
<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
</script>
</html>


Test.aspx.cs:
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.Web.UI.HtmlControls;
  
namespace TelerikSamples
{
    public partial class Test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ClientScript.GetPostBackEventReference(this, string.Empty);
        }
  
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            if (IsPostBack)
            {
                if (Request.Form.Get("__EVENTTARGET") == HdnVCCommandBtn.ClientID.Replace("_", "$"))
                {
                    RadSlidingZone rightZone = new RadSlidingZone();
                    rightZone.ID = "RightZone";
                    rightZone.SlideDirection = Telerik.Web.UI.SplitterSlideDirection.Left;
                    rightZone.Width = RightPane.Width;
                    RadSlidingPane rightSlidingPane1 = new RadSlidingPane();
                    rightSlidingPane1.ID = "RightSlidingPane1";
                    rightSlidingPane1.Title = "Right1";
                    rightSlidingPane1.Width = new Unit(300);
                    rightZone.Items.Add(rightSlidingPane1);
                    RadSlidingPane rightSlidingPane2 = new RadSlidingPane();
                    rightSlidingPane2.ID = "RightSlidingPane2";
                    rightSlidingPane2.Title = "Right2";
                    rightSlidingPane2.Width = new Unit(300);
                    rightZone.Items.Add(rightSlidingPane2);
                    //RightPane.Controls.Add(rightZone);
                    TestPanel.Controls.Add(rightZone);
  
                    var _testSlider = LoadControl("TestSlider.ascx") as TestSlider;
                    if (_testSlider != null)
                    {
                        _testSlider.EnableViewState = true;
                        _testSlider.ID = String.Concat("UC", 1);
  
                        rightSlidingPane1.Controls.Add(_testSlider as Control);
                    }
                }
            }           
        }
  
        protected void PostbackButton_Click(object sender, EventArgs e)
        {
        }
  
    }
}

Please provide me a solution for the same.
Thanks in advance.


Regards,
Bhavya
0
Niko
Telerik team
answered on 03 Sep 2011, 12:23 PM
Hi Bhavya,

Unfortunately, again, I was not able to reproduce the issue. In order to back up my investigation I have prepared a short video demonstrating the correct behavior in IE, Firefox and Chrome - http://screencast.com/t/5bqB59Ms4j. Also, please, find attached the sample page and web control that I was working with. Is there something that I am missing in my tests?

Kind regards,
Niko
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Bhavya
Top achievements
Rank 1
answered on 05 Sep 2011, 06:53 AM
Hi Niko,
Thanks for your reply.
Some questions around the deployment i had as i could see that you were not able to reproduce the issue.
1.I could see that the browser was IE9.Did you try the application in IE9?
2.Did you clear the cookies and temporary files before browsing the URL?
3.Did you deploy the application in IIS(5 / 6.0) and tried browsing it?

I want you to try in IE6 and IE8 browsers (specifically) deploying it in IIS and clearing the temporary files and cookies and open it in new browser.

This issue is very much reproducible in the envoronment mentioned above for the first time when we browse the page in the new browser.
I am attaching the video for the same in the link below.
http://screencast.com/t/dfF2queZJ0

Thanks in advance,

Regards,
Bhavya
0
Accepted
Niko
Telerik team
answered on 07 Sep 2011, 01:24 PM
Hi Bhavya,

Indeed, I was now able to reproduce the issue. This may happen in other browsers, but the native instances of IE6-8 are more prone to this behavior. The issue comes from the AJAX request and the dynamic loading of the controls. The CSS resources are loaded along with this request, however, they may not be loaded on time for the control initialization and the visual glitches are the result. In order to avoid this race condition, you can load manually the CSS resources through, for example, the RadStyleSheetManager:
<telerik:RadStyleSheetManager ID="theStyleSheetManager" runat="server">
    <StyleSheets>
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Slider.css" />
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Slider.Default.css" />
    </StyleSheets>
</telerik:RadStyleSheetManager>
Please, note that the names of the style sheets specify the skin that you will be using in the application. Now for the sliders you can disable the CSS resources since you already have them on the page:
<telerik:RadSlider ID="ElevationBar" runat="server" IsDirectionReversed="True" Height="200" Orientation="Vertical" SmallChange="1" MaximumValue="100" MinimumValue="0" Value="50" TrackPosition="TopLeft" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false"
                </telerik:RadSlider>

Hope this will help you solve your issue.

Kind regards,
Niko
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Bhavya
Top achievements
Rank 1
answered on 15 Sep 2011, 11:47 AM
Thanks Niko, that worked.

Regards,
Bhavya
Tags
Splitter
Asked by
Bhavya
Top achievements
Rank 1
Answers by
Niko
Telerik team
Bhavya
Top achievements
Rank 1
Share this question
or