CODEWITHSUNDEEP
asp.netxmlvb.netcheckboxlist
Laurence
Laurence

Reputation: 7823

How to hide unselected items on a checkboxlist?

I have a checkboxlist which gets the data from XML file. If a user selects an item on checkboxlist, i just want to show that item and hide everything else. And beneath that, I want to add clickable text to let the use to choose something else. So if the use click on that text, the user will see the checkboxlist again with the first item selected.

Basically look like this. exampe So how do we achieve this?

Thanks so much.

require to use vb.net/and checkboxlist control as we will be databinding dynamically from database.

Upvotes: 4

Views: 2997

Answers (2)

Chase Florell
Chase Florell

Reputation: 47387

I would definitely recommend doing this entirely with jQuery. It's slick and quick.

HTML
this wil be generated by your <asp:CheckboxList />, you don't have to worry about using it, it's just here for reference.

<table id="checkboxWrapper">
    <tr>
        <td><input id="check1" type="checkbox" name="check1" value="Item 1" /></td>
        <td><label for="check1">2010/2009</label></td>
    </tr>
    <tr>
        <td><input id="check2" type="checkbox" name="check2" value="Item 2" /></td>
        <td><label for="check2">2009/2008</label><td>
            </tr>
    <tr>
        <td><input id="check3" type="checkbox" name="check3" value="Item 3" /></td>
        <td><label for="check3">2008/2007</label></td>
    </tr>
    <tr>
        <td><input id="check4" type="checkbox" name="check4" value="Item 4" /></td>
        <td><label for="check4">2007/2006</label></td>
    </tr>
</table>

    <div id="CheckboxListInscructionPlaceholder" style="display:none;">
        <a id="ChangeSelection" href="#">Change Selection</a>
    </div>
</div>

Javascript
this is what you'll add to your scripts in order to enable what you need.

$('#checkboxWrapper  td > :checkbox').change(function() {
    // hide the checkboxes that are not Checked
    $('#checkboxWrapper td >  input:not(:checked)').hide()

    // hide the labels that correspond to the unchecked checkboxes
    $('#checkboxWrapper td >  label[for!="' + $(this).attr('id') + '"]').hide();

    // show the "Change Selection" link
    $('#CheckboxListInscructionPlaceholder').attr({
        style: 'display:block;'
    });

});

$('#ChangeSelection').click(function() {
    // uncheck all of the checkboxes
    $("#checkboxWrapper td > input").prop("checked", false);

    // show all of the checkboxes
    $('#checkboxWrapper td > input').show();

    // show all of the labels
    $('#checkboxWrapper td > label').show();

    // hide the "Change Selection" link
    $('#CheckboxListInscructionPlaceholder').attr({
        style: 'display:none;'
    });
});

Here's a working jsfiddle.

I haven't tested it on an asp:Checkboxlist, but this should work since I'm not using any hardcoded id's.

Upvotes: 1

Tim Schmelter
Tim Schmelter

Reputation: 460138

Here is one way. Use two Panels as container for two different CheckBoxLists. The first displays your "FROM"-Items and the latter your "TO"-Items.

The second panel is initially invisivle. Apart from the CheckBoxList it contains a LinkButton to trigger the deselection.

On BtnSelect-Click you'll add the selected items from the first to the second CheckBoxList and show it's Panel. On BtnChangeSelection-Click you only need to switch visibiliy of both Panels and select first item.

This already works with multiple selection.

ASPX (CSS is up to you):

<div>
    <asp:Panel ID="PnlChkListAcademicYear" runat="server">
        <asp:CheckBoxList ID="ChkListAcademicYear" runat="server" /><br />
        <asp:LinkButton ID="BtnSelect" Text="Select" runat= "server" ></asp:LinkButton>
    </asp:Panel>
    <asp:panel ID="PnlChkListAcademicYearActive" Visible="false" runat="server">
        <asp:CheckBoxList ID="ChkListAcademicYearActive" Enabled="false" runat="server" /><br />
        <asp:LinkButton ID="BtnChangeSelection" Text="Change selection" runat= "server" ></asp:LinkButton>
    </asp:panel>
</div>

Codebehind:

Private Sub BtnSelect_Click(sender As Object, e As System.EventArgs) Handles BtnSelect.Click
    If Me.ChkListAcademicYear.SelectedIndex <> -1 Then
        Dim selectedItems = (From item In Me.ChkListAcademicYear.Items.Cast(Of ListItem)() Where item.Selected).ToArray
        Me.ChkListAcademicYearActive.Items.Clear()
        Me.ChkListAcademicYearActive.Items.AddRange(selectedItems)
        Me.PnlChkListAcademicYearActive.Visible = True
        Me.PnlChkListAcademicYear.Visible = False
    End If
End Sub

Private Sub BtnChangeSelection_Click(sender As Object, e As System.EventArgs) Handles BtnChangeSelection.Click
    Me.ChkListAcademicYear.SelectedIndex = 0
    Me.PnlChkListAcademicYearActive.Visible = False
    Me.PnlChkListAcademicYear.Visible = True
End Sub

This is the rest of my sample-code, for the sake of completeness:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        BindCheckboxList()
    End If
End Sub

Private Sub BindCheckboxList()
    Me.ChkListAcademicYear.DataSource = GetData()
    Me.ChkListAcademicYear.DataTextField = "Year"
    Me.ChkListAcademicYear.DataBind()
End Sub

Private Function GetData() As DataTable
    Dim years = {"2010/2009", "2009/2008", "2008/2007", "2007/2006", "2006/2005", "2005/2004", "2004/2003"}
    Dim tbl = New DataTable
    tbl.Columns.Add(New DataColumn("Year"))
    For Each y In years
        tbl.Rows.Add(y)
    Next
    Return tbl
End Function

Upvotes: 2

Related Questions