Question

I’m trying to use Dojo (1.3) checkBoxes to make columns appear/hide in a Dojo Grid that’s displayed below the checkBoxes. I got that functionality to work fine, but I wanted to organize my checkBoxes a little better. So I tried putting them in a table. My dojo.addOnLoad function looks like this:

dojo.addOnLoad(function(){
    var checkBoxes = [];
    var container = dojo.byId('checkBoxContainer');
    var table = dojo.doc.createElement("table");
    var row1= dojo.doc.createElement("tr");
    var row2= dojo.doc.createElement("tr");
    var row3= dojo.doc.createElement("tr");

    dojo.forEach(grid.layout.cells, function(cell, index){
        //Add a new "td" element to one of the three rows
    });

    dojo.place(addRow, table);
    dojo.place(removeRow, table);
    dojo.place(findReplaceRow, table);

    dojo.place(table, container);
});

What’s frustrating is:

1. Using the Dojo debugger I can see that the HTML is being properly generated for the table.
2. I can take that HTML and put just the table in an empty HTML file and it renders the checkBoxes in the table just fine.
3. The page renders correctly in Firefox, just not IE6.

The HTML that is being generated looks like so:

<div id="checkBoxContainer">
    <table>
        <tr>
            <td>
                <div class="dijitReset dijitInline dijitCheckBox"
                    role="presentation" widgetid="dijit_form_CheckBox_0"
                    wairole="presentation">
                    <input class="dijitReset dijitCheckBoxInput"
                        id="dijit_form_CheckBox_0"
                        tabindex="0" type="checkbox"
                        name="" dojoattachevent=
                        "onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
                        dojoattachpoint="focusNode" unselectable="on"
                        aria-pressed="false"/>
                </div>
                <label for="dijit_form_CheckBox_0">
                    Column 1
                </label>
            </td>
            <td>
                <div class="dijitReset dijitInline dijitCheckBox"
                    role="presentation" widgetid="dijit_form_CheckBox_1"
                    wairole="presentation">
                    <input class="dijitReset dijitCheckBoxInput"
                        id="dijit_form_CheckBox_1"
                        tabindex="0" type="checkbox"
                        name="" dojoattachevent=
                        "onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
                        dojoattachpoint="focusNode" unselectable="on"
                        aria-pressed="false"/>
                </div>
            </td>
        </tr>
        <tr>
            ...
        </tr>
    </table>
</div>

I would have posted to the official DOJO forums, but it says they’re deprecated and they’re using a mailing list now. They said if a mailing list doesn’t work for you, use StackOverflow.com. So, here I am!

Answer 1

It looks like you forgot to create a <tbody> element.