Display (Show) hidden ASP.Net GridView rows with Button Click using jQuery

Question

<asp:GridView ID="Gridview1" class="mx-auto" runat="server" AutoGenerateColumns="False" OnRowDataBound="Gridview1_RowDataBound"
KeyNames="Id_Task" AllowPaging="True" PageSize="6" DataSourceID="SqlDataSource1" CellPadding="6" ForeColor="#333333" GridLines="Vertical">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Id_Task" HeaderText="Id_Task" SortExpression="Id_Task" Visible="false" />
<asp:BoundField DataField="Taches a faire" HeaderText="Taches a faire" SortExpression="Taches a faire" />
<asp:BoundField DataField="Username" HeaderText="Username" SortExpression="Username" />
<asp:BoundField DataField="date de requete" HeaderText="date de requete" SortExpression="date de requete" />
<asp:BoundField DataField="deadline" HeaderText="deadline" SortExpression="deadline" />
<asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
<asp:HyperLinkField Text="Details" DataNavigateUrlFields="Id_Task,Taches a faire,Username,date de requete" DataNavigateUrlFormatString="~/Admin/NewPage.aspx?Id_Task={0}&Taches a faire={1}&Username={2}&date de requete={3}" />

            </Columns>  
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />  
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />  
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />  
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />  
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />  
            <SortedAscendingCellStyle BackColor="#FDF5AC" />  
            <SortedAscendingHeaderStyle BackColor="#4D0000" />  
            <SortedDescendingCellStyle BackColor="#FCF6C0" />  
            <SortedDescendingHeaderStyle BackColor="#820000" />  
        </asp:GridView>  

code.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Task_ListTask : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}  
protected void Gridview1_RowDataBound(object sender, GridViewRowEventArgs e)  
{  
    if (e.Row.RowType == DataControlRowType.DataRow)  
    {  
        DataTable dt = new DataTable();  
        dt = (DataTable)Gridview1.DataSource;  
        int rowindex = e.Row.RowIndex;  
        e.Row.Attributes.Add("class", "customerRow");  
          
    }  
    if (e.Row.RowType == DataControlRowType.DataRow)  
    {  
        if (e.Row.Cells[5].Text.Equals("Finished"))  
        {  
            e.Row.BackColor = System.Drawing.Color.DarkGreen;  
            e.Row.ForeColor = System.Drawing.Color.White;  
            e.Row.Visible = false;  
        }  


    }  

}  



protected void Button1_Click(object sender, EventArgs e)  
{  

}  

}

Answer 1

Hi @david 237 ,
Through your code, I think you want to use jQuery to hide the rows whose Status is Finished and click the button to display all the rows.
You need to override Status with a TemplateField in order to find the Status row.
You can refer to the code below:
jQuery Code:262398-2.txt

 <asp:GridView ID="Gridview1" class="mx-auto" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"  
KeyNames="Id_Task" AllowPaging="True" PageSize="6" CellPadding="6" ForeColor="#333333" GridLines="Vertical">  
<AlternatingRowStyle BackColor="White" />  
<Columns>  
<asp:BoundField DataField="Id_Task" HeaderText="Id_Task" SortExpression="Id_Task" Visible="false" />  
<asp:BoundField DataField="Taches a faire" HeaderText="Taches a faire" SortExpression="Taches a faire" />  
<asp:BoundField DataField="Username" HeaderText="Username" SortExpression="Username" />  
<asp:BoundField DataField="date de requete" HeaderText="date de requete" SortExpression="date de requete" />  
<asp:BoundField DataField="deadline" HeaderText="deadline" SortExpression="deadline" />  
    <asp:TemplateField HeaderText="Status">  
                <ItemTemplate>  
                    <asp:Label ID="lblStatus" Text='< % # E val("Status") %>' runat="server" />  
                </ItemTemplate>  
            </asp:TemplateField>  
 <asp:HyperLinkField Text="Details" DataNavigateUrlFields="Id_Task,Taches a faire,Username,date de requete" DataNavigateUrlFormatString="~/Admin/NewPage.aspx?Id_Task={0}&Taches a faire={1}&Username={2}&date de requete={3}" />  
  
  
             </Columns>  
             <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />  
             <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />  
             <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />  
             <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />  
             <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />  
             <SortedAscendingCellStyle BackColor="#FDF5AC" />  
             <SortedAscendingHeaderStyle BackColor="#4D0000" />  
             <SortedDescendingCellStyle BackColor="#FCF6C0" />  
             <SortedDescendingHeaderStyle BackColor="#820000" />  
         </asp:GridView>  
            <asp:Button ID="btnHide" Text="Hide Finished " runat="server" />  
             <asp:Button ID="btnShow" Text="Show All" runat="server" />    

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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.

Answer 2

Since you have a data pager, then using client side (jQuery and JavaScript) probably is not worth the efforts.

And you really to hide such rows, are better to "filter" or limit the data base criteria.

and with a data pager, if you are using formatting to hide/show the rows, then that will mess up the page somewhat.

I suggest filter against the data, not some formatting/hide show on the GV.

What this means/suggests is we "remove" the DataSource from the markup, to code behind.

So, remove the sqldatasource in markup, and from the GV, remove the DataSource= "datasource1" from the gv

So, say this simple markup:

And code behind to load gv, and filter

        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!IsPostBack)  
                LoadGrid();  
        }  
  
        void LoadGrid()  
        {  
            using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))  
            {  
                string strSQL = @"SELECT * FROM tblHotelsA ";  
                if (chkActive.Checked)  
                {  
                    strSQL += "WHERE Active = 1 ";  
                }  
                strSQL += " ORDER BY HotelName";  
  
                using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))  
                {  
                    conn.Open();  
                    DataTable rstData = new DataTable();  
                    rstData.Load(cmdSQL.ExecuteReader());  
                    GridView1.DataSource = rstData;  
                    GridView1.DataBind();  
                }  
            }  
        }  
  
        protected void chkActive_CheckedChanged(object sender, EventArgs e)  
        {  
            LoadGrid();  
        }  

So, the result is now this: