Checkbox in Datagrid

Question

1.00/5 (1 vote)

See more:

I have a slight problem here...so I have a datagrid..and the values are retrieved into this datagrid by passing a query to the database.I have a header checkbox in the datagrid to select or deselect all the rows using javascript..and for each row there is a checkbox to check the indiviual row..Now what i want to do is..when i check the checkbox of the particular row and hit submit..the selected row must be invisible..how do i do this using C#.Please help me...Below is the ASP.NET code

JavaScript

script type="text/javascript" language="javascript">
       function select_deselectAll(chkVal, idVal, AllName, ThisName) {
           var frm = document.forms[0];
           // Loop through all elements
           for (i = 0; i < frm.length; i++) {

               if (idVal.indexOf(AllName) != -1) {

                   if (chkVal == true) {
                       if (frm.elements[i].id.indexOf(ThisName) != -1) {
                           frm.elements[i].checked = true;

                       }
                   }
                   else {
                       if (frm.elements[i].type == "checkbox") {
                           if (frm.elements[i].id.indexOf(ThisName) != -1) {
                               frm.elements[i].checked = false;
                           }
                       }
                   }

               }
               else if (idVal.indexOf(ThisName) != -1) {

                   if (frm.elements[i].type == "checkbox") {
                       if (frm.elements[i].id.indexOf(AllName) != -1) {
                           frm.elements[i].checked = false; break;
                       }
                   }
               }
           }
       }

   </script>

C#

<asp:DataGrid ID="dgEmpLeaveDetails" runat="server" DataKeyField="reqID"
                       AutoGenerateColumns="False" CssClass="vutblrow" BorderWidth="1px" PagerStyle-Mode="NumericPages"
                       Width="100%" TabIndex="6" AllowSorting="false" Visible="True">
                       <pagerstyle cssclass="pgr" mode="NumericPages" height="25px" borderstyle="Solid" />
                       <alternatingitemstyle cssclass="vutblaltrow" />
                       <HeaderStyle CssClass="vutblhdr" />
                       <itemstyle cssclass="vutblitemrow" />
                       <columns>
                           <asp:TemplateColumn>
                               <HeaderStyle HorizontalAlign="Center" />
                               <HeaderTemplate>
                                   <asp:CheckBox ID="chkView" runat="server" Text="" onclick="javascript:select_deselectAll (this.checked, this.id, 'chkView', 'cbSelect');" />
                               </HeaderTemplate>
                               <itemstyle horizontalalign="Center" />
                               <itemtemplate>
                                   <asp:CheckBox ID="cbSelect" runat="server" onclick="javascript:select_deselectAll (this.checked, this.id, 'chkView', 'cbSelect');" />
                               </itemtemplate>

                           <asp:TemplateColumn HeaderText="Sl No" ItemStyle-CssClass="ing-padding_Right" HeaderStyle-BorderColor="#718bad"
                               SortExpression="SLNum">
                               <itemtemplate>
                                   <asp:Label ID="lblSLnum" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SLNum") %>'>
                               </itemtemplate>



                           <asp:TemplateColumn HeaderText="Employee Name" ItemStyle-CssClass="ing-padding_Right"
                               HeaderStyle-BorderColor="#718bad" SortExpression="EmpName">
                               <itemtemplate>
                                   <asp:Label ID="lblEmpName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "empName") %>'>
                               </itemtemplate>

                           <asp:TemplateColumn HeaderText="Designation" ItemStyle-CssClass="ing-padding_Right"
                               HeaderStyle-BorderColor="#718bad" SortExpression="Designation">
                               <itemtemplate>
                                   <asp:Label ID="lbldesign" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "DesigShort") %>'>
                               </itemtemplate>

                           <asp:TemplateColumn HeaderText="Date of Move" ItemStyle-CssClass="ing-padding_Right" HeaderStyle-BorderColor="#718bad"
                               SortExpression="Date of Move">
                               <itemtemplate>
                                  <asp:Label ID="lblmovedate" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "moveDate","{0:dd/MM/yyyy}") %>'>
                               </itemtemplate>

                            <asp:TemplateColumn HeaderText="Establishment to be Visited" ItemStyle-CssClass="ing-padding_Right" HeaderStyle-BorderColor="#718bad">
                               <itemtemplate>
                                  <asp:Label ID="lblestvisited" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "esttVisited") %>'>
                               </itemtemplate>

                             <asp:TemplateColumn HeaderText="Purpose of Move" ItemStyle-CssClass="ing-padding_Right" HeaderStyle-BorderColor="#718bad">
                               <itemtemplate>
                                  <asp:Label ID="lblpurposemove" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "purpose") %>'>
                               </itemtemplate>

                                  <asp:TemplateColumn HeaderText="reqID" ItemStyle-CssClass="ing-padding_Right"
                               HeaderStyle-BorderColor="#718bad" SortExpression="IsActive" Visible="false">
                               <itemtemplate>
                                   <asp:Label ID="lblreqid" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "reqID") %>'>
                               </itemtemplate>


                           <asp:TemplateColumn HeaderText="Is Active" ItemStyle-CssClass="ing-padding_Right"
                               HeaderStyle-BorderColor="#718bad" SortExpression="IsActive" Visible="false">
                               <itemtemplate>
                                   <asp:Label ID="lblIsActive" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "IsActive") %>'>
                               </itemtemplate>

                       </columns>

Posted 19-Mar-14 5:59am

Member 10066916

Updated 19-Mar-14 18:57pm

VICK

v3

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**VICK** · Answer 1 · 2014-03-19T19:06:00

Solution 2

To make the selected DataGrid's rows visible = false.

You can try the following code in your Submit Button click event.

C#

foreach (DataGridItem itm in YourDataGrid.Items)
      {
          CheckBox cb = (CheckBox)itm.FindControl("yourchildcheckboxID");
          if (cb.Checked)
          {
              itm.Visible = false;
          }
      }

Please Keep in mind that DataGrid's entertain the rows as Items, while GridView entertain them as Rows.

Hope it will help. :)

Posted 19-Mar-14 19:06pm

VICK

Comments

Member 10066916 20-Mar-14 2:57am

yes vick! this does work thank you very much...but when i reload my page the contents are seen again..I dont want them to be seen again..any idea how do i do this?

VICK 20-Mar-14 4:21am

So you want to permanently make some rows visible= false???

If YES!, Dn do add a column(Flag: you can name it visible and put true as default) in DB table from which you are binding the data to the Grid. and on selection inside the above code run a query to make the relative row's flag False. and than rebind the Grid with the data only having Flag= true and not false.

VICK 20-Mar-14 4:23am

Further if this helps you solve your problem! or leads you to the way of solution. DO UpVote and Accept as Solution. :)

Kishor Khatri · Answer 2 · 2014-03-19T08:24:00

I didn't get your code...
but i think if i got your question...
Here is an Example...

XML

<script type="text/javascript">
        function CheckAll(obj) {
            var list = document.getElementById("<%=DataGrid1.ClientID%>");
            var chklist = list.getElementsByTagName("input");
            for (var i = 0; i < chklist.length; i++) {
                if (chklist[i].type == "checkbox" && chklist[i] != obj) {
                    chklist[i].checked = obj.checked;
                }
            }
        }
</script>

For Header Template

ASP.NET

<HeaderTemplate>
<asp:checkbox id="CheckBox1" onclick="CheckAll(this);" runat="server" xmlns:asp="#unknown" />
</HeaderTemplate>

for Item Template

ASP.NET

<itemtemplate>
<asp:checkbox id="CheckBox2" runat="server" xmlns:asp="#unknown" />
</itemtemplate>

on Submit Button Check - if checkbox of that row is checked then perform your action

Checkbox in Datagrid

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Checkbox in Datagrid

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us