Using Checkboxes in ASP.NET Listview

So recently on a project I was busy with, I needed to create a grid of items that could be paged through. My first thought was to use the Gridview control but I was hesitant as the client had very specific styling requirements. This led me to try the Listview control. I was able to get the control to look exactly as the client wanted and I was easily able to populate it with the data I needed, even adding paging functionality was a breeze.

The kicker came when I had to add a checkbox to each row that could allow the user to select that specific row and then on the following page edit the record associated with the row in question. Also if the user checked the first checkbox and then clicked another, the first record selected would have to be unselected. Thanks to an article on the www.asp.net site, I was able to achieve this using some JavaScript tied to the “onclick” event of the checkbox.

The Checkbox “onclick” Event.

<asp:checkbox ID="chk1" runat="server" 
onclick="SingleSelect('chk',this);">
</asp:checkbox>

The JavaScript that unchecks any other checked checkboxes.

<script type="text/javascript">
    function SingleSelect(regex, current) {
        re = new RegExp(regex);
        for (i = 0; i < document.forms[0].elements.length; i++) {
            elm = document.forms[0].elements[i];
            if (elm.type == 'checkbox') {
                if (re.test(elm.name)) {
                    elm.checked = false;
                }
            }
        }
        current.checked = true;
    }
 </script>

Now that the user could only select one checkbox at a time, I now needed to get the ID of the row that was being selected. This required creating a Sub that would fire on the “OnCheckedChanged” event. This I was able to achieve using the following (VB) code.

 Protected Sub chk_CheckedChanged(sender As Object, e As EventArgs)
        Dim cbSelected As CheckBox = DirectCast(sender, CheckBox)
        Dim lvItem As ListViewItem = DirectCast(cbSelected.NamingContainer, ListViewItem)
        Dim lbDataItem As ListViewDataItem = DirectCast(lvItem, ListViewDataItem)
        Dim PageID As String = lvPages.DataKeys(lbDataItem.DisplayIndex)("PageID")
        Session("PageID") = PageID
 End Sub

I then had the ID in a session which I would read and work with on the second page. There was a problem with this though. Somehow when the first checkbox was checked, it would put the correct ID into the session, if another checkbox was checked, the next checkbox would still fire the previous event and put the previous checkboxes ID into session. Thanks to this article on Stack Overflow, I discovered that the Viewstate might be an issue and as soon as I disabled it for the checkboxes, the problem immediately disappeared and the correct value was added to the session each time. Now the final checkbox tag looks like so.

<asp:CheckBox ID="chk1" runat="server" OnCheckedChanged="chk_CheckedChanged" 
AutoPostBack="True" onclick="SingleSelect('chk',this);" EnableViewState="false"/>

Happy coding!

CodeProject