Layout first use questions

NigelW · June 12, 2011, 8:04am

Hi,

I have just started to use the layout download and have a few basic questions.

History – Before using layout I had the scheduler configured as below.

Note: I am using tiles for headers and footers.


  <div id='userpagescheduler' style="width:800px; height:400px; margin-right: auto; margin-left: auto;">  
    <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
      <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
	    <div class="dhx_cal_today_button"></div>
 	    <div class="dhx_cal_date"></div>
  	    <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
	    <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
 	    <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
	  </div>
	  <div class="dhx_cal_header"></div>
	  <div class="dhx_cal_data"></div>		
    </div>
  </div>
</div>

To use the layout I placed the following div container round this logic and added the layout initialisation.


<div id="userpagebody" style="position:absolute; width:100%; height:100%;">
 ...... as above
</div>

var dhxLayout = new dhtmlXLayoutObject("userpagebody", "3W");
         dhxLayout.cells("b").attachObject("scheduler_here");

The basics seem to work.

So my questions are:

When the page gets loaded the original scheduler layout is seen briefly – should I have the above div containers structures in another way to avoid this ?
I am getting a page horizontal scroll bar – even though the layout seems to fit the page completely.
I would really like the cell ‘b’ – the one with the scheduler in - to be a larger width than I am getting but – setWidth – does not seem to work. I would also like it so this cell cannot be collapsed.

Thanks for any help much appreciated.

NigelW · June 12, 2011, 10:31am

I have also noticed that my JSP text below the ‘userpagebody’ container is not displayed.

Alexandra · June 13, 2011, 12:54pm

Hi,

You may use attachScheduler method to put the scheduler into layout cell. setWidth works in this case. Please check the sample:
dhtmlxLayout/samples/04_components/11_scheduler.html

I would also like it so this cell cannot be collapsed.
dhxLayout.attachEvent(“onCollapse”,function(id){
if(id == “a”)
dhxLayout.cells(“a”).expand()
})

Or you may hide header:
dhxLayout.cells(“a”).hideHeader()

I have also noticed that my JSP text below the ‘userpagebody’ container is not displayed.

Does this issue relate scheduler or layout?

NigelW · June 13, 2011, 1:11pm

Hi,

I did look in the download for a scheduler example but in the download I did over the weekend of the layout in 04_components I have no 11 - I have 10_status and 12_gmaps but no 11.

Thanks,

Alexandra · June 13, 2011, 1:58pm

Sorry. You are right. This sample as well as Scheduler libraries is not included into the Suite package.
You may check the following sample:

dhtmlxScheduler/samples/05_calendar/04_layout.html

NigelW · June 13, 2011, 2:43pm

Thanks a few questions further.

I assume I do not need


scheduler.init('scheduler_here',null,"week");

if I use


dhxLayout.cells("b").attachScheduler();

I have used your example - thanks:


dhxLayout.attachEvent("onCollapse",function(id){
if(id == "a")
dhxLayout.cells("a").expand()
})

Is there a way to remove the ‘<<’ from the header?

I am doing the following.


var dhxLayout = new dhtmlXLayoutObject("userpagebody", "3W");


div id="userpagebody" style="position:absolute; width:100%; height:100%;">
</div>

However my Tiles footer and text in a

container below the ‘userpagebody’ is not displayed eg.


var dhxLayout = new dhtmlXLayoutObject("userpagebody", "3W");
div id="userpagebody" style="position:absolute; width:100%; height:100%;">
</div>
<div>           
Text not displayed  
</div>

I am getting a windows page horizontal scroll bar – even though the layout seems to fit the page completely.

Thanks for any help.

NigelW · June 13, 2011, 5:46pm

Done some more work on question 3 above:


        var dhxLayout = new dhtmlXLayoutObject(document.body, "3W");
             dhxLayout.attachHeader("header");
             dhxLayout.attachFooter("footer");

with layout as below:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
  
   <body> 
     <table width="100%" border="0">
      <tr>
        <td>


<div id="header">  
 <img src="/Logo.png" alt="" width="15%">
 <a href="/j_spring_security_logout">Logout</a>
 <div id="time">
   Current Time: 
   13/06/2011
  <div id="clock" class="jclock"></div>
 </div>
</div>        
<hr> </td>  
      </tr>
     <tr>
        <td valign="top" align="left">
         		
<div id="userpagebody1" style="position:absolute; width:100%; height:100%;">         

<div id="userpageheader" style="background-color: teal;">
   <img id="image" src="/DisplayImage?userid=1" alt="" height="80" width="8%" style="float: right; margin: 0px 0px 5px 5px;">
   <h2>
   User Name: a <br>
   First Name: a<br> 
   Last Name: a <br>
   </h2>
</div>

<div id="userpagebody" style="position:absolute; width:100%; height:100%;">
</div>

<div id="testing">           
display relationships - jb page  
</div>   

</div>   
<script type="text/javascript">window.onload=init;</script>   
        </td>  
     </tr>
     <tr>
        <td><div id="footer">
Copyright @ 2011
</div> </td>  
     </tr>
     </table> 
   </body> 
</html>

I have also tried.


       var dhxLayout = new dhtmlXLayoutObject(document.body, "3W");
             dhxLayout.attachHeader("header,userpageheader");
             dhxLayout.attachFooter("testing,footer");

and


       var dhxLayout = new dhtmlXLayoutObject("userpagebody1", "3W");
             dhxLayout.attachHeader("userpageheader");
             dhxLayout.attachFooter("testing");

None of which seem to work - any help appreciated.

NigelW · June 13, 2011, 8:09pm

Note 1: ‘header’ and ‘footer’ above produced by ‘tiles’.

Note 2: I have removed all the ‘table’ stuff above - but still no success - I think the issue is that I have two headers (one from tiles and one from my page) and two footer (one from my page and one from tiles) and I am not sure how to set up dhtlmxlayout for this case.

Alexandra · June 14, 2011, 10:42am

Hi,

Is there a way to remove the ‘<<’ from the header?

dhxLayout.cells(“a”).hideArrow();

Why are you using absolute position ? Make sure that all containers haev desired sized.

var dhxLayout = new dhtmlXLayoutObject(document.body, “3W”);

Layout will occupy the whole page as it is initialized in body. There will be only header, footer and layout of the page.

NigelW · June 14, 2011, 11:18am

Thanks

Still some issues – sorry.

I have changed my layout as follows to simplify things.

I am now using pattern “5I”.


var dhxLayout = new dhtmlXLayoutObject(document.body, "5I");
         
         dhxLayout.attachHeader("header");
         dhxLayout.attachFooter("footer");

         dhxLayout.cells("a").setHeight(80);
         dhxLayout.cells("e").setHeight(80);
         
         dhxLayout.cells("a").hideHeader();
         dhxLayout.cells("e").hideHeader();
         
         dhxLayout.cells("b").setWidth(200);
         dhxLayout.cells("d").setWidth(200);
         
         dhxLayout.cells("c").attachScheduler();

         dhxLayout.cells("a").fixSize(true, true);
         dhxLayout.cells("b").fixSize(true, true);
         dhxLayout.cells("c").fixSize(true, true);
         dhxLayout.cells("d").fixSize(true, true);
         dhxLayout.cells("e").fixSize(true, true);
         
         dhxLayout.cells("a").hideArrow();
         dhxLayout.cells("b").hideArrow();
         dhxLayout.cells("c").hideArrow();
         dhxLayout.cells("d").hideArrow();
         dhxLayout.cells("e").hideArrow();
         
         dhxLayout.cells("b").setText("Left Text");
         dhxLayout.cells("c").setText("Calendar");
         dhxLayout.cells("d").setText("Right Text");
         
         dhxLayout.attachEvent("onCollapse",function(id){
        	                   dhxLayout.cells(id).expand();
                              });         
        
         dhxLayout.cells("a").attachObject("userpageheader");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
   
   <head>
      
      
   </head>
   <body> 
 
     
<div id="header">  
 <img src="/Logo.png" alt="" width="15%">
<div id="time">
   Current Time: 
   14/06/2011
  <div id="clock" class="jclock"></div>
 </div>
</div>        
<hr>
     
<div id="userpageheader" style="background-color: teal;">
   <img id="image" src="/DisplayImage?userid=1" alt="" height="80" width="8%" style="float: right; margin: 0px 0px 5px 5px;">
   <h2>
   User Name: a <br>
   First Name: a<br> 
   Last Name: a <br>
   </h2>
</div>
  
     <div id="footer">
Copyright @ 2011
</div> 
     
   </body> 
</html>


html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
    }

So the issues I have with the above are.

I do not see cell ‘e’ at all.
The ‘footer’ is not below cells ‘b,c,d’ – it is part of cell ‘b’.
On the first loading of the page I am still seeing the ‘header’ , ’userpageheader’ and ‘footer’ which are then overwritten by the layout – how do I stop this ?
The scheduler in cell ‘c’ – I cannot see the bottom of the calendar ie. 23:00 in week view – and if I open an event in IE for 22:00 you cannot see the save/close part so you cannot use this event.
In FF cell ‘a’ is partially overwritten by cells ‘b,c,d’.

Again thanks for any help.

Alexandra · June 15, 2011, 8:54am

Could you attach the completed demo? docs.dhtmlx.com/doku.php?id=othe … leted_demo

NigelW · June 15, 2011, 9:08am

My application is available online now would it be ok if once I have uploaded the problem settup I send a link and logon details to your support email address as I have done before ?

Alexandra · June 15, 2011, 9:34am

It would be better if you attach completed demo. We do not require to the real application, just sample that reproduces the problem.

NigelW · June 15, 2011, 12:47pm

I have had a go at providing the problem as requested.

Note: I have had some difficulty actually getting the scheduler into the example ie. no cells for events on the display – but I do not think this affects the issues raised before.

Which are:

I do not see cell ‘e’ at all.
The ‘footer’ is not below cells ‘b,c,d’ – it is part of cell ‘b’.
On the first loading of the page I am still seeing the ‘header’ , ’userpageheader’ and ‘footer’ which are then overwritten by the layout – how do I stop this ?
The scheduler in cell ‘c’ – I cannot see the bottom of the calendar ie. 23:00 in week view – and if I open an event in IE for 22:00 you cannot see the save/close part so you cannot use this event.
Cell ‘a’ is partially overwritten by cells ‘b,c,d’.

In also have some questions on the Accordion I have in cell ‘b’.

Can the user close all the Accordion sections so it looks the same as when first loaded ?
On my real site I can get dhx_black to work for the Accordion but not blue or skyblue – on the example even black does not appear to work.

Again thanks for any help.

NigelW · June 15, 2011, 3:48pm

Hi,

I have solved 1, 2 and 4 above by setting the cell Height (‘e’) to 150 rather than 80.

So I do not need help with these I only need help with 3,5,6,7 - thanks

Note: On 5 it appears that the dhtmlxlayout is placing the contents on cell ‘a’ to low in cell ‘a’ leaving a gap - therefore pushing the rest of cell ‘a’ down.

I have also noticed the header has a blank line at the top of it placed there by the dhtmlxlayout funtionality - can this be removed ?

NigelW · June 16, 2011, 6:36pm

I have been doing some more work and have solved 5 (to do with using

in the cell) and 8 (to do with
not being in the correct place in the
).
So I could do with help on.

On the first loading of the page I am still seeing the ‘footer’ – then being overwritten by the dhtmlxlayout – how do I stop this – setting display:none as I have done in the ‘userpageheader’ does not work.

Can I set it up so the user can close all the Accordion sections so it looks the same as when first loaded ?

On my real site I can get dhx_black to work for the Accordion but not blue or skyblue – on the example even black does not appear to work.

My other questions are.

How can I set the background colour of layout cell(’a’) only ?

I can have many items in an Accordion that is inside a layout cell – I would like it so that when the space is full you get a scroll bar rather than as now you just do not see the items – is this possible ?

Thanks again for all your help.

Alexandra · June 17, 2011, 3:32pm

On the first loading of the page I am still seeing the ‘footer’ – then being overwritten by the dhtmlxlayout

Try to set display: none for the “footer” div

Can I set it up so the user can close all the Accordion sections so it looks the same as when first loaded ?

Accordion in multimode allows t close all the items:

dhtmlxAccordion/samples/02_conf/03_multimode.html

In basic mode, you may close all the items by close method:

dhxAccord.forEachItem(function(item){
item.close()
})

On my real site I can get dhx_black to work for the Accordion but not blue or skyblue – on the example even black does not appear to work.

There is not imgs folder in your sample. Skins apply background images. Therefore, the imgs folder must be included.

How can I set the background colour of layout cell(’a’) only ?

You need to set background color for the html object that you place in layout cell.

I can have many items in an Accordion that is inside a layout cell – I would like it so that when the space is full you get a scroll bar rather than as now you just do not see the items – is this possible ?

It is impossible if you use attachAccordion method. Try to initialize accordion in a certain html container and then place this container in layout cell by attachObject method.

NigelW · June 17, 2011, 5:19pm

Thanks for this information I will have a look but I have tried the imgs solution and still have some problems with blue / skyblue.

I have added a file with the accordion set to dhtmlxaccordion_dhx_blue.css this does not work however ‘black’ does.

NigelW · June 17, 2011, 6:39pm

Also if I set header or footer to style=“display:none” unlike other

containers the header/footers disappear.

NigelW · June 17, 2011, 10:17pm

More information.

Still some issues but some solved - thanks.

Issues left.

When I set “header” and/or “footer” to style=“display:none” the “header” and/or “footer” disappear unlike other

containers which once placed inside dhtmlxlayout override “display:none” against the
.
I have tried the imgs solution and still have problems with blue / skyblue.

See attachment two posts above - with the accordion set to dhtmlxaccordion_dhx_blue.css this does not work however ‘black’ does.

For the problem of filling up the dhtmlxlayout cell with accordion items I tried “to initialize accordion in a certain html container and then place this container in layout cell by attachObject method” as suggested but it seemed to make no difference. Even setting “overflow: auto” in the
container did not work.
The accordion items end up being impossible to use as when open they have very small content.
Thanks again for any help.