PDA

View Full Version : BorderLayout + ASP.Net 2.0



mattsmith321
22 Oct 2006, 12:15 PM
I have BorderLayout Example 3 working within an ASP.Net 2.0 MasterPage project. Everything works fine for rendering the initial BorderLayout with the ASP.Net controls that I want. However, I'm now trying to get some of the controls to work with ASP.Net PostBack model and am finding that the controls are no longer performing as expected. However, if I comment out the onDocumentReady method which binds all of the BorderLayout stuff, all of the ASP.Net stuff begins to work as expected.

Is anyone else experiencing similar behavior?

jack.slocum
22 Oct 2006, 12:25 PM
Matt,

It might be because of the DOM rearranging going on. BorderLayout moves the nodes around, but they are still the same nodes (no cloning or anything) so I'm not sure why that would be a problem.

Do you know exactly what is going wrong?

rodiniz
24 Oct 2006, 3:37 AM
I am having the same problem. The postback happens but the event that handles the postback its not fired.
Do you do something with the form?
.net is really sensitive about the form.

jack.slocum
24 Oct 2006, 10:02 AM
It's possible that the elements are being moved outside of the postback form and that's causing the problem.

Like I said, if someone puts up a page I can give a more definitive answer.

You might test if this is the problem by rendering to a content div with width 100%/height 100% inside of the postback form instead of rendering into document.body. This will ensure that the elements stay within the form.

rodiniz
24 Oct 2006, 10:59 AM
Well Jack you guessed right the combo that fires the postback is relocated outside the form.
Any workaround?

jack.slocum
24 Oct 2006, 5:07 PM
Did you try what I said above? Put a container in the postback form that is sized to the viewport and render to it (instead of document.body). The UI should appear the same.

rodiniz
25 Oct 2006, 9:30 AM
See it for yourself...what am I doing wrong?
http://www.rodrigodiniz.qsh.eu/Queryanalisernew.aspx
also...how do I achieve this layout using your script?
http://www.rodrigodiniz.qsh.eu/Queryanaliser.aspx[/url]

jack.slocum
25 Oct 2006, 4:00 PM
These:

script src="/WebResource.axd?d=zQwoi6zWX1SmYEuULlCbc81qdXmhw2zixqxkIq3pN8QpZvubSTVS8yLMjoEQc5bNRzWo5FIUyb8oy6zjDdk6dUcyb13xboqdz4p6n87xL9WAdQHETUAOwJNqGGhDZlgY0&t=632950656570024215" type="text/javascript"

Are including an old version of yui-ext.

mattsmith321
26 Oct 2006, 1:17 PM
Sorry for the delay. I had to change course and just go with a stripped-down version of the navigation that I envisioned using BorderLayout. I'm sure that you are correct in that the issue is because we are rendering to the body and not getting the controls inside the form properly.

I mocked up a sample and present it as two different pages so that you can see the difference between one that works and one that doesn't. For the most part this example is just a copy of your Example 2 with some minor changes and some additional ASP.Net code to illustrate the problem which manifests itself when you change the color of the content via the dropdown in the top-right corner of the page. The difference between the two pages is that the following line is commented out in the first (OFF) example:

YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
BorderLayout is OFF (http://www.swoofware.com/projects/examples/borderlayout/borderlayout_off.aspx) - When you select a different option from the BGColor dropdown in the top-right, the page posts back as expected and the background color of the content area changes. Of course, because of the commented out line, the page is not rendered with the BorderLayout.
BorderLayout is ON (http://www.swoofware.com/projects/examples/borderlayout/borderlayout_on.aspx) - This time, the page is rendered via the BorderLayout code, but now the BGColor dropdown just posts back and does not make any changes. This is because the server-side event is not getting fired properly.

Hope those examples help. Based on your comment about the probable cause of the issue being that the controls are rendered to the body, I tried changing:

var layout = new YAHOO.ext.BorderLayout(document.body, {
to:

var layout = new YAHOO.ext.BorderLayout(document.getElementById('container'), {
but that caused JS errors. Not sure if I'm supposed to put another div on the page with the 100% height and width.

Thoughts?

stanleyho
2 Nov 2006, 3:38 PM
hi,

I'm facing this issue too, any solution to this issue?

jack.slocum
2 Nov 2006, 7:28 PM
Stanley, if you do a search in this forum Rodrigo has a query analyzer example in ASP.Net that uses the workaround I suggested above.

stanleyho
2 Nov 2006, 9:13 PM
hi,

Thanks for the reply, i tried to wrap it with another div as below:



var layout = new YAHOO.ext.BorderLayout(document.getElementById("whole"), {
north: {
split:false,
initialSize: 35
},
south: {
split:false,
initialSize: 20
},
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: true
}
});

<div>
<div>...</div>
</div>
as below:
div id: whole
div id: container


It solve the ASP.NET eventhandler issue, but the design of the border layout totally got corrupted :( Only the north section nicely done, other didn't.... Any idea jacksloc?

cheers,
stanley

adams
2 Nov 2006, 9:17 PM
Master pages work around.

In the javascript call, modify this line


var layout = new YAHOO.ext.BorderLayout(document.body, {

to be


layout = new YAHOO.ext.BorderLayout('aspnetForm', {

When a master page is rendered, the form name is changed to aspnetForm (it ignores the name/id you set in the actual form tag).

Once I made these modification, postbacks worked a dream.

Jack, awesome work on the library mate!

stanleyho
2 Nov 2006, 9:34 PM
hi adam,

I tried your solution, it work for the postback event handler. do you face any borderlayout issue?

Either you wrap with a new div on top of div container or using your method change to "aspnetForm", the border layout design still didn't work.

adams
2 Nov 2006, 9:51 PM
Hey mate

By using this method I did not have to wrap anything in a div.

So, in your master page



<form id="form1" runat="server">
<div id="container">
<div id="north" class="ylayout-inactive-content">
Application title would go here....
</div>
<div id="west" class="ylayout-inactive-content">
<asp:ContentPlaceHolder ID="LeftMenu" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="center" class="ylayout-inactive-content">
<asp:contentplaceholder id="CenterContent" runat="server"></asp:contentplaceholder>
</div>
<div id="east" class="ylayout-inactive-content">
<asp:ContentPlaceHolder ID="RightMenu" runat="Server"></asp:ContentPlaceHolder>
</div>
<div id="south" class="ylayout-inactive-content">
<asp:ContentPlaceHolder ID="SouthContent" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>


Then, in your head place the script like so.

<script type="text/javascript">
Example = function(){
// initialize state manager, we will use cookies
var layout;
return {
init : function(){
// initialize state manager, we will use cookies to remember the splitbar positions
YAHOO.ext.state.Manager.setProvider(new YAHOO.ext.state.CookieProvider());
layout = new YAHOO.ext.BorderLayout('aspnetForm', {
hideOnLayout: true,
north: {
split:false,
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
autoScroll:true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
autoScroll:true
},
center: {
titlebar: true,
autoScroll:true
}
});
layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
layout.add('south', new YAHOO.ext.ContentPanel('south', {title: '<%= Me.SouthTitle %>', closable: false}));
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: '<%= Me.WestTitle %>'}));
layout.add('east', new YAHOO.ext.ContentPanel('east', {title: '<%= Me.EastTitle %>', closable: false}));
layout.add('center', new YAHOO.ext.ContentPanel('center', {title: '<%= Me.CenterTitle %>', closable: false}));
layout.endUpdate();
layout.restoreState();
}
}

}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, false);

</script>

Once the form name issue was resolved, its been clear sailing.

rodiniz
3 Nov 2006, 3:42 AM
Glad to see there is a solution.Just to correct things my queryanaliser sample does not use any workaround ,since it has no postbacks.

stanleyho
3 Nov 2006, 11:18 PM
hi adam,

1stly, thank for your reply... I wonder did you try your code in firefox 2.0 and I.E 7? Because, when i used your code which is similiar to mine that replace the


document.body
http://www.extremesolution.com.au/images/original.JPG

with


aspnetForm
http://www.extremesolution.com.au/images/modified.JPG

it has the same result that the asp.net components works but all border layout features not working probably. The alignment and design all go wrong! any idea anyone...

I will really appreciate if someone can send me some working template code [css, javascript and asp.net code]. Thank you in future

jack.slocum
3 Nov 2006, 11:31 PM
Try putting this element inside your asp form:

<form...>
<div id="layout-target" style="width:100%;height:100%;">
... Put your layout divs in here ...
</div>
</form>

Then when you initialize your your layout, render it to 'layout-target' instead of document.body.

You will also need this CSS as well:

body {overflow:hidden;margin:0;padding:0;border:0px none;}
html, body{height:100%;}

and on your body tag for IE7: <body scroll="no">...

If that doesn't work, then remove the "position:absolute;top:0px;left:0px;" from the layout-target and replace it with "position:relative" and see what happens.

stanleyho
4 Nov 2006, 12:16 AM
hi jacksloc,

It works now! Thank You very much. I can't believe, just


position:absolute;top:0px;left:0px;

Make so much different! Thus, i hate IE browser coz it doesn't have any javascript debugger. For this instance, without the above css, IE thrown some script error but not in firefox!.

cheers,
stanley

jack.slocum
4 Nov 2006, 1:12 AM
Stanley, IE has a free debugger you can download that isn't bad at all. It's not quite visual studio 2005 but it's better than most other browsers.

http://www.microsoft.com/downloads/details.aspx?familyid=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en

You will need to enable script debugging in Internet Options.

lakinm1
17 Dec 2006, 7:44 PM
Hi all

I implemented the suggestions under this thread but I'm still having some layout issues.

1) If i put my code (dialogs within a layout region) in an HTML page (using divs), when I scroll the layout region, my dialogs scroll within the region nicely

2) If i put my code (dialogs within a layout region) in an ASPX pade (using asp:panels or divs), when I scroll, the dialogs appear to be on top of the region and don't scroll within the region. They just maintain their position

Any help would be greatly appreciated!!
Thanks

deanotron
5 Feb 2007, 5:37 PM
Hello

I am having the same issue as lakinm1 above - I implemented the suggestions above as well but did not have any luck. When viewing my page after being built by asp.net the content of my grid appears above the scrollbar and is disconnected from the scrolling action.

Does anyone know if there is a solution to the problem?

Cheers

luanlmd
17 Aug 2007, 1:30 PM
I'm Using this lines:


var layout = new Ext.BorderLayout(document.getElementById('aspnetForm'), { ...
and


#aspnetForm, body, html
{
width:100%;
height:100%;
}now the BorderLayout is working very fine in FF and IE.

photoz
20 Aug 2007, 9:36 AM
thank god for this thread...

just an aside, if you are not using a Masterpage, the ID of the form will be "form1" by default.

oscarin
20 Sep 2007, 9:37 AM
I'm using AJAX.NET Extensions and I tried to use the BorderLayout control. When I use BorderLayout and document.body everything goes fine, but the server is unable to process the events. However, when I set it to "layout-target" the complete layout gets corrupted even when I apply appropriate styling. This is the snippet where I'm adding the JS references:
<asp:ScriptManager ID="smPage" runat="server">
<Scripts>
<asp:ScriptReference Path="ext/adapter/ext/ext-base.js" />
<asp:ScriptReference Path="ext/ext-all.js" />
<asp:ScriptReference Path="layout.js" />
</Scripts>
</asp:ScriptManager>

bs.
2 Oct 2007, 6:09 AM
I do believe you need to keep the .js files outside of the ScriptManager and in the Head tags. That's what I did and it worked. Now, someone else may tell you that there is a different, better way - so be it, but for now, that is what is working for me. You'll still need to keep the ScriptManager control in your code, however.

Hope that helps,
bs.