question

david237-9695 avatar image
0 Votes"
david237-9695 asked LanHuang-MSFT commented

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

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

 }

}

dotnet-csharpdotnet-aspnet-generaldotnet-aspnet-webpages
· 1
5 |1600 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.

Hi @david237-9695,
May I know if your issue is resolved? Please feel free to let me know if there is anything that I can help here.
Best regards,
Lan Huang

0 Votes 0 ·
AlbertKallal-4360 avatar image
0 Votes"
AlbertKallal-4360 answered

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:

262317-image.png

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:

262248-gcheckbox.gif



image.png (57.5 KiB)
gcheckbox.gif (265.3 KiB)
5 |1600 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.

LanHuang-MSFT avatar image
0 Votes"
LanHuang-MSFT answered

Hi @david237-9695,
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
262409-image.png

  <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" />  

262423-11.gif
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.



2.txt (1.2 KiB)
image.png (100.3 KiB)
11.gif (79.9 KiB)
5 |1600 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.