question

AbdulBabaSyed-3708 avatar image
0 Votes"
AbdulBabaSyed-3708 asked ·

listview Checkbox click in a Row asp.net forms

Hi I have a listview we have 3 checkbox and total label in the each row


<asp:ListView ID="ComboMain" runat="server" GroupItemCount="1">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</LayoutTemplate>
<GroupTemplate>

                                     <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
                                   
                             </GroupTemplate>
                             <ItemTemplate>

<td class="py-3"><%# Eval("Name") %> </td>
<td class="py-3"><asp:CheckBox ID="CheckBox1" runat="server" Visible="true" Checked="True" Text='<%# String.Format("{0:C}", Eval("Price1")) %>' AutoPostBack="True" /> </td>

<td class="py-3"><asp:CheckBox ID="CheckBox2" runat="server" Visible="true" Checked="True" Text='<%# String.Format("{0:C}", Eval("Price2")) %>' AutoPostBack="True" /> </td>
<td class="py-3"> <asp:CheckBox ID="CheckBox1" runat="server" Visible="true" Checked="True" Text='<%# String.Format("{0:C}", Eval("Price3")) %>' AutoPostBack="True" /> </td>


<td class="py-3">Total:
<asp:Label ID="total" runat="server" Text=""></asp:Label> </td>

   </ItemTemplate>
                         </asp:ListView>


if i click checkbox1, checkbox2, checkbox3, the total should come in the total label,
If I uncheck, it should total up the remaining checked one in the total label
how can i achieve this and this listview has multiple rows..
we need each row total in the total label for other rows as well.. appreciate your help

dotnet-aspnet-general
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

SeanFang-MSFT avatar image
0 Votes"
SeanFang-MSFT answered ·

Hi @AbdulBabaSyed-3708 ,


You should use "OnCheckedChanged" event so that the total value will be changed whenever the check box is checked/unchecked.

The key is to use "NamingContainer" to fetch the ListViewItem from the changed checkbox.

More details, you could refer to below codes.

aspx (based on your codes):

Add below event handler in the ListView for DataBind:

  • [OnItemDataBound="ComboMain_ItemDataBound"]


Add OnCheckedChanged event handler on each control of the ListViewItem.
For example,
<asp:CheckBox ID="CheckBox1"...... OnCheckedChanged="CheckBox_CheckedChanged" />
<asp:CheckBox ID="CheckBox2"...... OnCheckedChanged="CheckBox_CheckedChanged" />
<asp:CheckBox ID="CheckBox3"...... OnCheckedChanged="CheckBox_CheckedChanged" />


Code behind with simulation data:

 // Simulation of the data
         private static DataTable _listviewDT;
         public static DataTable ListviewDT
         {
             get
             {
                 if (_listviewDT is null)
                 {
                     _listviewDT = new DataTable();
    
                     _listviewDT.Columns.Add("Name", typeof(string));
                     _listviewDT.Columns.Add("Price1", typeof(int));
                     _listviewDT.Columns.Add("Price2", typeof(int));
                     _listviewDT.Columns.Add("Price3", typeof(int));
    
                     _listviewDT.Rows.Add("name1",1000,2000,3000);
    
                 }
    
                 return _listviewDT;
             }
             set
             {
                 _listviewDT = value;
             }
         }
    
         protected void Page_Load(object sender, EventArgs e)
         {
             if (!IsPostBack)
             {
                 BindListView();
             }
         }
    
         protected void BindListView()
         {
             ComboMain.DataSource = ListviewDT;
             ComboMain.DataBind();
         }
    
         // Bind Item and Sum up for the total value
         protected void ComboMain_ItemDataBound(object sender, ListViewItemEventArgs e)
         {
             if(e.Item.ItemType == ListViewItemType.DataItem)
             {
                 CheckBox CheckBox1  = (CheckBox) e.Item.FindControl("CheckBox1");
                 CheckBox CheckBox2 = (CheckBox)e.Item.FindControl("CheckBox2");
                 CheckBox CheckBox3 = (CheckBox)e.Item.FindControl("CheckBox3");
                 Label total = (Label)e.Item.FindControl("total");
    
                 int price1 = CheckBox1.Checked ? int.Parse(CheckBox1.Text,NumberStyles.Currency) : 0;
                 int price2 = CheckBox2.Checked ? int.Parse(CheckBox2.Text, NumberStyles.Currency) : 0;
                 int price3 = CheckBox3.Checked ? int.Parse(CheckBox3.Text, NumberStyles.Currency) : 0;
    
                 total.Text = String.Format("{0:C}", price1 + price2 + price3);
             }
         }
    
         // Change the total value when the check box is checked/unchecked
         protected void CheckBox_CheckedChanged(object sender, EventArgs e)
         {
             CheckBox cb = (CheckBox)sender;
             ListViewItem item = (ListViewItem) cb.NamingContainer;
    
             CheckBox CheckBox1 = (CheckBox)item.FindControl("CheckBox1");
             CheckBox CheckBox2 = (CheckBox)item.FindControl("CheckBox2");
             CheckBox CheckBox3 = (CheckBox)item.FindControl("CheckBox3");
             Label total = (Label)item.FindControl("total");
    
             int price1 = CheckBox1.Checked ? int.Parse(CheckBox1.Text, NumberStyles.Currency) : 0;
             int price2 = CheckBox2.Checked ? int.Parse(CheckBox2.Text, NumberStyles.Currency) : 0;
             int price3 = CheckBox3.Checked ? int.Parse(CheckBox3.Text, NumberStyles.Currency) : 0;
    
             total.Text = String.Format("{0:C}", price1 + price2 + price3);
         }


Demo:
hVZI3.gif


Hope helps.
Best regards,
Sean


If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.





· 11 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.



Thanks a lot,

Is there any way we can avoid post back on each CheckBox_CheckedChanged. so that whole page will not refresh it
Appreciate your help.. Thanks a lot

0 Votes 0 ·
SeanFang-MSFT avatar image SeanFang-MSFT AbdulBabaSyed-3708 ·

Hi @AbdulBabaSyed-3708 ,

Yes, of course you can. Have you tried to use 'UpdatePanel'?
Please refer to this documentation: system.web.ui.updatepanel
It enables sections of a page to be partially rendered without a postback.
The key is to use the controls to cause an asynchronous postback.

Best regards,
Sean



0 Votes 0 ·

Thanks.. look at the below code attached in the img, updatepanel, still it refresh all the webpage,

0 Votes 0 ·

67622-code.png



Thanks sean
updatepanel, still it refresh all the webpage, appreciate your help. Thanks

0 Votes 0 ·
code.png (54.6 KiB)
Show more comments
AbdulBabaSyed-3708 avatar image
0 Votes"
AbdulBabaSyed-3708 answered ·

Thanks a lot,

Is there any way we can avoid post back on each CheckBox_CheckedChanged. so that whole page will not refresh it
Appreciate your help.. Thanks a lot

· 2 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

66806-code.png



appreciate your help

0 Votes 0 ·
code.png (54.6 KiB)
surferonwww avatar image surferonwww AbdulBabaSyed-3708 ·

Is there any way we can avoid post back on each CheckBox_CheckedChanged.

There is no way to avoid the postback as long as you use the ASP.NET AJAX (i.e., ScriptManager and UpdayePanel).

Why don't use JavaScript / jQuery to complete all the work you need only at the client side?

0 Votes 0 ·