HEXAGONAL PANEL?

What if, we need a panel, that would hold two controls in the following manner:

(the panel is the red container, and it has to be hexagonal, holding two input fields, the way it is drawn)

Well, hexagonal panels do not exist, but we can simulate them by changing two style attributes of the second control.

Let

ctrl2.Style.Add("POSITION","absolute");

ctrl2.Style.Add("RIGHT","20px");

and so, we will obtain the following:

The panel still holds both controls, even if it is not so obvious any more.

GOOD TO KNOW!

All controls, that require their state to be maintained in ViewState should be initialized (created) before the LoadViewstate event.

Thanks, Attila!

WHEN IT DOESN'T WORK - element.setAttribute(...) - javascript

Examples for using element.setAttribute("att_name","att_value") in javascript:
element.setAttribute("src","../Pictures/x.jpg"); // OK, it works.
element.setAttribute("style","cursor: hand;"); // NOT OK, it doesn't work.

So, when trying to add style attributes to elements in javascript, instead of the previous line use:
element.style.setAttribute("cursor","hand",0); // OK, it works.

MANIPULATING DATAGRIDS IN JAVASCRIPT

Manipulating DropDownLists for example, in javascript, is similar to manipulating ListBoxes. However, if we want to add/remove items to/from a DataGrid, we have to act somewhat else. A DataGrid control is rendered as a Table with several TableRows, and TableColumns.

Adding a row to a grid with 2 columns:

var lastRow = grid.rows.length;
var row = grid.insertRow(lastRow);

var cellLeft = row.insertCell(0);
var textNode = document.createTextNode("col1/rowx");
cellLeft.appendChild(textNode);

var cellRight = row.insertCell(0);
var textNode2 = document.createTextNode("col2/rowx");
cellRight.appendChild(textNode2);

Deleting a row from the same grid:

grid.deleteRow(index); // 1<= index < grid.rows.length - if the grid has a header.

MANIPULATING LISTBOXES IN JAVASCRIPT

Ever occured the problem of moving elements from one ListBox to another? It can be done easily on server side, but what if you could get rid of those annoying postbacks? Here's a tip:

An asp ListBox renders as follows:

<select ...>
<option value="aaaaa">aaaaa</option>
<option value="bbbb">bbbb</option>
<option value="ccc">ccc</option>
...
</select>

The following code snippets might be useful in such case:

1. you need to have an array with all elements of the first ListBox
var myListbox = document.getElementById(lb1Id); // lb1Id is the ClientId of the control
var myListboxOptions = myListbox.getElementsByTagName("option");

2. need a clone of the original ListBox and a clone of all options
var cloneOfMyListbox = myListbox.cloneNode(true);
var cloneOfMyListboxOptions = cloneOfMyListbox.getElementsByTagName("option");

3. you need the other ListBox
var otherListbox = document.getElementById(lb2Id); //lb2Id is the ClientId of the second control

4. and the mechanisms for moving certain elements from the first ListBox to the second one
otherListbox.appendChild(cloneOfMyListboxOptions[index].cloneNode(true)); // add element to the second control
myListbox.remove(index); // remove the element on the specific index from the first control