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 checkbox
es.
<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 checkbox
es 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 checkbox
es, 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