Force asp.net list controls to generate html when empty

Question

I have a pair of checkbox lists that I want to switch items between. The switching of these items is done using javascript. Basically, the page is generated, the tables for the checkbox lists are generated, and then by clicking buttons, you can swap items between the two.

    <tr>
        <th>Report Columns</th>
        <td>
            <div id="allFieldsContainer" style="overflow-y: scroll; height: 200px; width: auto; border: 1px solid #DDDBDB;">
                <a href="#" class="list-group-item active">All Columns 
                    <input title="toggle all" type="checkbox" class="all pull-right" /></a>

                <asp:CheckBoxList ID="allFields" CssClass="list-group" runat="server">
                </asp:CheckBoxList>
            </div>
        </td>
        <td>
            <div id="transferButtons">
                <button class="add" onclick="return false;" style="width: 100%;">--></button>
                <button class="remove" onclick="return false;" style="width: 100%;"><--</button>
            </div>
        </td>
        <td>
            <div id="selectedFieldsContainer" style="overflow-y: scroll; height: 200px; width: auto; border: 1px solid #DDDBDB;">
                <a href="#" class="list-group-item active">Selected Columns 
                    <input title="toggle all" type="checkbox" class="all pull-right" /></a>

                <asp:CheckBoxList ID="selectedFields" CssClass="list-group" runat="server" >
                </asp:CheckBoxList>

            </div>
        </td>
    </tr>

Naturally, one of the checkbox lists should start empty, and the other is full. So 'allFields' will contain all the fields they want to select, and then 'selectedFields' will start empty. The issue is, empty checkbox lists don't generate any html for themseleves. See the generated page below.

        <th>Report Columns</th>
        <td>
            <div id="allFieldsContainer" style="overflow-y: scroll; height: 200px; width: auto; border: 1px solid #DDDBDB;">
                <a href="#" class="list-group-item active">All Columns 
                    <input title="toggle all" type="checkbox" class="all pull-right"></a>

                <table id="ContentPlaceHolder1_allFields" class="list-group">
                    <tbody>
                        <!–– Data in here is generated fine, along with the table -->
                    </tbody>
                </table>
            </div>
        </td>
        <td>
            <div id="transferButtons">
                <button class="add" onclick="return false;" style="width: 100%;">--&gt;</button>
                <button class="remove" onclick="return false;" style="width: 100%;">&lt;--</button>
            </div>
        </td>
        <td>
            <div id="selectedFieldsContainer" style="overflow-y: scroll; height: 200px; width: auto; border: 1px solid #DDDBDB;">
                <a href="#" class="list-group-item active">Selected Columns 
                <input title="toggle all" type="checkbox" class="all pull-right"></a>

                <!-- There should be a table here, there isn't one -->
                <!-- This causes javascript to fail as it references a missing table -->
            </div>
        </td>

I've tried a few things, such as adding a dummy item with display:none; but that leaves awkward spacing in the table. I've been thinking about writing some javascript to remove it as soon as the page is loaded but I was wondering if there is something easier I'm missing.

Answer 1

I would recommend to use asp.net controls with Update Panel, as it will make it easy to write code and manage this. Unless you are not good in JS you will have problem working with in webform. i recently faced similar using when i had to choose & move items from Listbox so easy solution for me was to use asp.net listbox as i faced lot of problem with js

Brief example of waht i did with listbox you can do same for listcheckbo

Example

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="row-auto">
            <div class="c1">
                <asp:ListBox ID="lstAllPlayers" CssClass="all-player-list" SelectionMode="Multiple" DataTextField="Name" DataValueField="ID" runat="server"></asp:ListBox></div>
            <div class="c2">
                <div class="btn-wrapper">
                    <asp:Button ID="btnAddTeamZA" CssClass="btn-square" runat="server" Text=">" OnClick="btnAddTeamZA_Click" />
                    <asp:Button ID="btnRemoveTeamZA"  CssClass="btn-square" runat="server" Text="<" OnClick="btnRemoveTeamZA_Click" />

                </div>
                <asp:ListBox ID="lstTournamentPlayers" CssClass="all-player-zone" SelectionMode="Multiple" runat="server"></asp:ListBox>

            </div>

        </div>
    </ContentTemplate>
</asp:UpdatePanel>



//ZONE A
protected void btnAddTeamZA_Click(object sender, EventArgs e)
{
    lstTournamentPlayers.Items.Add(new ListItem(lstAllPlayers.SelectedItem.Text, lstAllPlayers.SelectedItem.Value));
    lstAllPlayers.Items.Remove(lstAllPlayers.SelectedItem);
}

protected void btnRemoveTeamZA_Click(object sender, EventArgs e)
{
    lstAllPlayers.Items.Add(new ListItem(lstTournamentPlayers.SelectedItem.Text, lstTournamentPlayers.SelectedItem.Value));
    lstTournamentPlayers.Items.Remove(lstTournamentPlayers.SelectedItem);
}

protected void getPlayers()
{
    String strSql = " SELECT * FROM  Players Order by Name ASC";
    DataSet ds = new DataSet();
    ds = DataProvider.Connect_Select(strSql);
    lstAllPlayers.DataSource = ds;
    lstAllPlayers.DataBind();
    //  lstAllTeams.Items.Insert(0, new ListItem("Select Tournament", "0"));
}