pp108 : modeProperty

modeProperty

  


Sets the mode of the Dropdown.

There are two possibilities "default" and "performance". In the performance setting, the dropdown does not display at startup of the page. The registerHTML method links input or div nodes with the dropdown. As soon as the node receives focus, it changes itself to a dropdown.

An advantage is that a page with many dropdown components renders faster. Consider a case where a table has 1000 rows, each column has a dropdown, and the options for each row in the table are the same. So instead of adding 1000 drop-down lists it is sufficient to add one, and register the column fields to the dropdown.

A disadvantage is that the nodes, which are registered, are not dropdowns. So the properties and the methods can not be used on the nodes.

Syntax

HTML

id="dropdownID" mode="sMode"> <div value=" ">description</div> <div value=" ">description</div> </div>

 

Parameters

Parameter

Description

performance

Dropdown is hidden by default, but is shown on the field which gets the focus and is registered (registerHTML).

default

Dropdown is shown at the current location

 

Remarks

There are two types of fields which can be registered to an dropdown in the performance mode:

  1. Input:
    The design structure<input __xValue="myValue" value="myDesc"/>, where the __xValue property is not mandatory. Will be changed at runtime, when the input is registered and receives focus: 
    <input __xValue="myValue" value="myDesc" style="display:none"/>
 <div cordysType="wcp.library.ui.Dropdown" id="dropdownID" mode="sMode">
	<div value=" ">description</div>
	<div value=" ">description</div>
</div>


    In other words, the input will be hidden and the dropdown is displayed at the same location as the input (and becomes the temporary nextSibling of the input).

  2. Div:
    The design structure:<div value="myValue">myDescription</div>. Will be changed at runtime, when the input is registered and receives focus: 
    <div value="myValue">
    <div cordysType="wcp.library.ui.Dropdown" id="dropdownID" mode="sMode">
        <div value=" ">description</div>
        <div value=" ">description</div>
    </div>
</div>


    In other words, the innerText of the div is temporarily removed and the dropdown is appended to the div.

Example


Following is a sample code that demonstrates the usage of the above property:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Simple Select</title>
    <script src="/cordys/wcp/application.js"></script>    
    <style>
      .cl_div
      {
            width:100%;
            height:100%;
            background-color:lightBlue;
      }
      .cl_input
      {
            width: 100%;
            border: 0px;
      }
    </style>
<script type="text/javascript" language="JScript">
 //register the cells to the dropdown: myFruit
function register()
{  
     document.getElementById("myFruit").registerHTML( document.getElementById("cell1"));
     document.getElementById("myFruit").registerHTML( document.getElementById("cell2"));
     document.getElementById("myFruit").registerHTML( document.getElementById("cell3"));
     document.getElementById("myFruit").registerHTML( document.getElementById("cell4"));
}
 //unregister the cells to the dropdown
 function unregister()
 {
     document.getElementById("myFruit").unregisterHTML( document.getElementById("cell1"));
     document.getElementById("myFruit").unregisterHTML( document.getElementById("cell2"));
     document.getElementById("myFruit").unregisterHTML( document.getElementById("cell3"));
     document.getElementById("myFruit").unregisterHTML( document.getElementById("cell4"));
 }
    </script>
</head>
<body>
<h6>Invoke the registerHTML button to register the cells in the favorite fruit column.</h6>
<button onclick="register()">registerHTML</button>
<button onclick="unregister()">unregisterHTML</button>      
<div>
     <div cordysType="wcp.library.ui.Dropdown" id="myFruit" mode="performance">
          <div value="1">Apple</div>
          <div value="2">Peer</div>
          <div value="3">Banana</div>
          <div value="4">Dourian</div>
      </div>
</div>
<table width="300" border="1" cellspacing="0" cellpadding="1">
      <thead>
            <td style="width:100px"><b>Person</b></td>
            <td style="width:200px;"><b>Favorite fruit</b></td>
      </thead>
      <tbody>
            <tr>
                  <td>Jack</td>
                  <td>
                      <input id="cell1" __xValue="2" value="Peer" readonly=true class="cl_input"/>
                  </td>
            </tr>
            <tr>
                  <td>Lisa</td>
                  <td>
                      <input id="cell2" __xValue="1" value="Apple" readonly=true class="cl_input"/>
                  </td>
            </tr>
            <tr>
                  <td>Jill</td>
                  <td>
                      <div id="cell3" class="cl_div" value="1">Apple</div>
                  </td>
            </tr>
            <tr>
                  <td>Bob</td>
                  <td>
                      <div id="cell4" class="cl_div" value="4">Dourian</div>
                  </td>
            </tr>
      <tbody>
</table>
</body>
</html>

See Also


Dropdown