Checkbox in Listview

Question

User1228272764 posted

my goals is , user will be able to do update depends on wich row were checked in listview. Update will fire when the button clicked. 

here is my code 

 <asp:ListView ID="ListViewHRDFormIzin" runat="server" DataSourceID="SqlDataStaffHRDFormIzin" DataKeyNames ="STAFF_NIK" enableviewstate="false">
					        <LayoutTemplate>
						        <table id="dataTable" class="table table-bordered striped data" align="left">
							        <thead style="background-color:#4877CF">
                                        <!-- add checkbox -->
                                        <th style="text-align:center; color:white; width:100px">Pilih Data</th>
								        <th style="text-align:center; color:white">NIK</th>
								        <th style="text-align:center; color:white">Nama</th>
                                        <th style="text-align:center; color:white">Jabatan</th>
                                        <th style="text-align:center; color:white">Departemen</th>
                                        <th style="text-align:center; color:white">Lokasi</th>
                                        <th style="text-align:center; color:white">Saldo Izin</th>
								        <th style="text-align:center; color:white">Aksi</th>
							        </thead>
							        <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
						        </table>
					        </LayoutTemplate>
					        <ItemTemplate>
						        <tr>               
                                    <td>
                                        <asp:CheckBox ID="CheckBox1" runat="server" value="<%# Eval("STAFF_NIK") %>" />
                                    </td>
							        <td style="text-align:center"><%# Eval("STAFF_NIK") %></td>
							        <td><%#Eval("STAFF_NAMA")%></td>
                                    <td><%#Eval("STAFF_STATUSKERJAJABATAN")%></td>
                                    <td><%#Eval("STAFF_STATUSKERJADEPT")%></td>
                                    <td><%#Eval("STAFF_STATUSKERJALOKASI")%></td> 
                                    <td><%#Eval("IZIN_SALDO_CUTI")%></td>              
							        <td style="text-align:center"><asp:LinkButton ID="lnkSelect" Text='DETAIL' CommandName="Select" runat="server" ><img src="img/detail.png" width="50px" height="50px" /></asp:LinkButton></td>
						        </tr>
					        </ItemTemplate>
					        <EmptyDataTemplate>Data Izin Karyawan Tidak diketemukan</EmptyDataTemplate> 
					        <EmptyItemTemplate>Data Izin Karyawan Tidak diketemukan</EmptyItemTemplate>              
				        </asp:ListView>

here is the button 

<asp:Button ID="BtnGetChkValue"  visible="True" runat="server" Text="Get Checked Value" class="btn btn-success" />

well when user click the button then the array will store a value of every checked checkbox. All i need is an array contain those value to do multiple update on database record. any suggestion and little help will appreciate ) 

Answer 1

User2103319870 posted

 <td style="text-align:center"><%# Eval("STAFF_NIK") %></td>
							        <td><%#Eval("STAFF_NAMA")%></td>
                                    <td><%#Eval("STAFF_STATUSKERJAJABATAN")%></td>
                                    <td><%#Eval("STAFF_STATUSKERJADEPT")%></td>
                                    <td><%#Eval("STAFF_STATUSKERJALOKASI")%></td> 
                                    <td><%#Eval("IZIN_SALDO_CUTI")%></td>

Instead of assigning value in table td, add a label control and then assign the value to label control. By this way you should be able to access the value for each row in Code behind. Now  we can loop thorough each items in Repeater and then check if checkbox control is checked or not. If its checked then save the data to database

Code to loop through each items in listbox

foreach (ListViewItem row in this.ListView1.Items)
            {
                try
                {
                    //Check if current row is dataitem or not
                    if (row.ItemType == ListViewItemType.DataItem)
                    {
                        //Get the checkbox control
                        CheckBox checkBox = (CheckBox)row.FindControl("CheckBox1");
                        //Check if its selected or not
                        if (checkBox.Checked)
                        {
                           //Add the code to update values to database
                        }
                    }
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }

Answer 2

User1228272764 posted

thank you for the suggestion , but this value that i am assign in table td just for the information to show to user. i think the main focus is 'DatakeyNames' of listview. its represent each uniqe value of my rows. so i just tested the block code you suggest but i am not able to get the 'DataKeyNames' value of each row was checked by user. its show nothing, the value is not stored at all. any other suggestion ?

Answer 3

User839733648 posted

Hi tandasanyu,

According to your description and code, I suggest that you could define a list to store the checked line.

And the key point of getting the value is to use x.Attributes["value"] .

I've made a sample on my side based on my database, and for more details, you could refer to the code below.

.Aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="Eid" EnableViewState="false" >
            <LayoutTemplate>
                <table id="dataTable" class="table table-bordered striped data" >
                    <thead style="background-color: #4877CF">
                        <!-- add checkbox -->
                        <th style="text-align: center; color: white; width: 100px">CheckBox</th>
                        <th style="text-align: center; color: white">Eid</th>
                        <th style="text-align: center; color: white">Ename</th>
                        <th style="text-align: center; color: white">age</th>
                        <th style="text-align: center; color: white">sex</th>
                        <th style="text-align: center; color: white">Details</th>
                    </thead>
                    <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox1" runat="server" value='<%# Eval("Eid") %>'/>
                    </td>
                    <td style="text-align: center"><%# Eval("Eid") %></td>
                    <td style="text-align: center"><%# Eval("Ename") %></td>
                    <td style="text-align: center"><%# Eval("age") %></td>
                    <td style="text-align: center"><%# Eval("sex") %></td>
                    <td style="text-align: center">
                        <asp:LinkButton ID="lnkSelect" CommandName="Select" Text='DETAIL' runat="server"></asp:LinkButton>
                    </td>
                </tr>
            </ItemTemplate>
            <EmptyDataTemplate>Data Izin Karyawan Tidak diketemukan</EmptyDataTemplate>
            <EmptyItemTemplate>Data Izin Karyawan Tidak diketemukan</EmptyItemTemplate>
        </asp:ListView>
        <asp:Button ID="BtnGetChkValue"  visible="True" runat="server" Text="Get Checked Value" class="btn btn-success" OnClick="BtnGetChkValue_Click" />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmployeeManagementConnectionString %>" SelectCommand="SELECT * FROM [tb_info]"></asp:SqlDataSource>
    </form>
</body>
</html>

Code-behind.

       private List<int> IDs
        {
            get
            {
                if (this.ViewState["IDs"] == null)
                {
                    this.ViewState["IDs"] = new List<int>();
                }
                return (List<int>)this.ViewState["IDs"];
            }
        }
        protected void BtnGetChkValue_Click(object sender, EventArgs e)
        {
            foreach (ListViewDataItem item in ListView1.Items)
            {
                CheckBox chkSelect = (CheckBox)item.FindControl("CheckBox1");                
                if (chkSelect != null)
                {
                    int ID = Convert.ToInt32(chkSelect.Attributes["value"]);
                    if (chkSelect.Checked && !this.IDs.Contains(ID))
                    {
                        this.IDs.Add(ID);
                    }
                    else if (!chkSelect.Checked && this.IDs.Contains(ID))
                    {
                        this.IDs.Remove(ID);
                    }
                }                
            }
        }

result: you could see that when I select the line 2,3,4 the list of IDs will include.

Best Regards,

Jenifer

Answer 4

User1228272764 posted

thank you jenifer, but honestly i test the code in vb. with help of code converter online and little change of mine here is my code. its not showing a value in IDs array. do you have any clue ?

        For Each item As ListViewDataItem In ListView1.Items
            Dim chkSelect As CheckBox = CType(item.FindControl("CheckBox1"), CheckBox)

            If chkSelect IsNot Nothing Then
                Dim ID As Integer = Convert.ToInt32(chkSelect.Attributes("value"))

                If chkSelect.Checked AndAlso Not Me.IDs.Contains(ID) Then
                    Me.IDs.Add(ID)

                ElseIf Not chkSelect.Checked AndAlso Me.IDs.Contains(ID) Then
                    Me.IDs.Remove(ID)
                End If
            End If
        Next

and this is my checkbox code: 

Note : i change the "" with single one '' because when the debugger run it say wrong format 

<td><asp:CheckBox ID="CheckBox1" runat="server" value='<%# Eval("STAFF_NIK") %>' /></td>

and i would be happy if you wanna tell me how this is block of code working. its drive me insane :

    Private ReadOnly Property IDs As List(Of Integer)
        Get

            If Me.ViewState("IDs") Is Nothing Then
                Me.ViewState("IDs") = New List(Of Integer)()
            End If

            Return CType(Me.ViewState("IDs"), List(Of Integer))
        End Get
    End Property

Answer 5

User839733648 posted

Hi tandasanyu,

I've tested the code in VB and the code works well on my side. I could see the value of IDs array.

I suggest that you could use debugging tool to check row by row to find the issue.

And the aspx code is as before.

Code-behind is as below. Maybe you could refer to and check it.

Imports System
Imports System.Collections.Generic
Imports System.Web.UI.WebControls

Public Class CheckboxListview
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Private ReadOnly Property IDs() As List(Of Integer)
        Get
            If Me.ViewState("IDs") Is Nothing Then
                Me.ViewState("IDs") = New List(Of Integer)()
            End If
            Return CType(Me.ViewState("IDs"), List(Of Integer))
        End Get
    End Property

    Protected Sub BtnGetChkValue_Click(sender As Object, e As EventArgs) Handles BtnGetChkValue.Click
        For Each item As ListViewDataItem In ListView1.Items
            Dim chkSelect As CheckBox = CType(item.FindControl("CheckBox1"), CheckBox)
            If chkSelect IsNot Nothing Then
                Dim ID As Integer = Convert.ToInt32(chkSelect.Attributes("value"))
                If chkSelect.Checked AndAlso Not Me.IDs.Contains(ID) Then
                    Me.IDs.Add(ID)
                ElseIf Not chkSelect.Checked AndAlso Me.IDs.Contains(ID) Then
                    Me.IDs.Remove(ID)
                End If
            End If

        Next item
    End Sub
End Class

the watching result:

Best Regards,

Jenifer

Answer 6

User1228272764 posted

Hi Jen, i just test the code. new error found like : 

Input string was not in a correct format.

in this line :

Dim ID As Integer = Convert.ToInt32(chkSelect.Attributes("value"))

and this how i accessthe value , just for simple way : 

sorry i still try to figure it out to use QuickWatch in VS2015 -_- that's why i try to access the value like that

txtGetChkValue.Text = IDs(0).ToString()

but why? it suppose to be variabel with integer data type 

Answer 7

User839733648 posted

Hi tandasanyu,

The error means that the string you're trying to parse an integer from doesn't actually contain a valid integer.

I still suggest that you should debug in vs. If you do not find QuickWatch, you also could watch the variable in the Watch Tab. 

For more about debugging, you could refer to: https://docs.microsoft.com/en-us/visualstudio/debugger/debugger-feature-tour?view=vs-2017&viewFallbackFrom=vs-2015 

Best Regards,

Jenifer

Answer 8

User1228272764 posted

Jenifer Jiang

Hi tandasanyu,

I've tested the code in VB and the code works well on my side. I could see the value of IDs array.

I suggest that you could use debugging tool to check row by row to find the issue.

And the aspx code is as before.

Code-behind is as below. Maybe you could refer to and check it.

Imports System
Imports System.Collections.Generic
Imports System.Web.UI.WebControls

Public Class CheckboxListview
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Private ReadOnly Property IDs() As List(Of Integer)
        Get
            If Me.ViewState("IDs") Is Nothing Then
                Me.ViewState("IDs") = New List(Of Integer)()
            End If
            Return CType(Me.ViewState("IDs"), List(Of Integer))
        End Get
    End Property

    Protected Sub BtnGetChkValue_Click(sender As Object, e As EventArgs) Handles BtnGetChkValue.Click
        For Each item As ListViewDataItem In ListView1.Items
            Dim chkSelect As CheckBox = CType(item.FindControl("CheckBox1"), CheckBox)
            If chkSelect IsNot Nothing Then
                Dim ID As Integer = Convert.ToInt32(chkSelect.Attributes("value"))
                If chkSelect.Checked AndAlso Not Me.IDs.Contains(ID) Then
                    Me.IDs.Add(ID)
                ElseIf Not chkSelect.Checked AndAlso Me.IDs.Contains(ID) Then
                    Me.IDs.Remove(ID)
                End If
            End If

        Next item
    End Sub
End Class

the watching result:

Best Regards,

Jenifer

after long journey i found the issue why its not working. but actualy i dont have any clue why its not working at all. when i remove the datatable plugins id on my listview table template, its work like charms. but when its have datatable plugin id suddenly its not work. any idea why? i think datatable only work on client side. 

PS. iam using JQueryDataTable

Answer 9

User1228272764 posted

here is somee incomplete solution of mine. Well i change from pagination to scroll so we can avoid cons of datatable about checkbox pagination but. some how on my wok pc, it cant throw a value when post back if i still use any plugins of data table. below is the evidence:

https://i.imgur.com/UErwmSq.gif

and this when use no plugins data table : 

https://i.imgur.com/kC7VA68.gif

do  u have any idea why? on debugging, i see nothing on value please have a look