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

Question

KeyNames="Id_Task" AllowPaging="True" PageSize="6" DataSourceID="SqlDataSource1" CellPadding="6" ForeColor="#333333" GridLines="Vertical">

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

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:

Answer

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

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.

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

2 answers