locked
Checkbox in Listview RRS feed

  • 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 ) 

    Thursday, October 11, 2018 2:46 AM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 23, 2018 8:37 AM

All replies

  • 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;
                    }
                }

    Thursday, October 11, 2018 3:23 AM
  • 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 ?

    Thursday, October 11, 2018 3:43 AM
  • 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

    Monday, October 15, 2018 7:13 AM
  • 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

    Monday, October 22, 2018 8:58 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 23, 2018 8:37 AM
  • 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 

    Thursday, October 25, 2018 6:26 AM
  • 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

    Friday, October 26, 2018 3:25 AM
  • 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

    Thursday, December 6, 2018 6:56 AM
  • 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 

    Friday, December 7, 2018 7:35 AM