hi dharmendr sir,
sir i have a gridview i just want to apply filter under the header not in the header as shown in picture.
2. i want to expend the gridview rows as shown in picture to put detail that comes from database.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="PositionKPI.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<div class="container mt-4" style="margin-top: 111px;">
<!-- Header -->
<div class="d-flex justify-content-between align-items-center " style="margin-bottom: 0.2rem;">
<h3 class="fw-bold " >Position KPI</h3>
<div class="d-flex align-items-center">
<!-- Show Dropdown -->
<!-- Add New Button -->
<div class="d-flex align-items-center" style="margin-left: 50px;">
<label class="me-2" style="font-size:14px;">Add New:</label>
<a href="template.aspx" class="btn btn-warning text-white fw-bold" style="width: 43px; height: 43px; gap: 0px;background-color:#EDAF26;">
<img src="img/Vector.png" alt="Delete" style="width: 22.75px; height: 22.75px; margin-left: -1.5px; margin-right: 2px" />
</a>
</div>
</div>
</div>
<asp:GridView ID="gvKPI" runat="server" AutoGenerateColumns="False" CssClass="styled-grid"
ShowHeader="true">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckBoxSelectAll" runat="server" CssClass="checkbox" AutoPostBack="true" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBoxSelect" runat="server" CssClass="checkbox" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnExpand" runat="server" ImageUrl="img/expend.png" CssClass="expand-btn"
OnClientClick="toggleRow(this); return false;" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Id" HeaderText="ID" />
<asp:BoundField DataField="PA" HeaderText="PA #" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:TemplateField HeaderText="Department">
<HeaderTemplate>
Department
<input type="text" class="filter-input" onkeyup="filterGrid(this, 4)" />
<asp:ImageButton ID="btnAction" runat="server" ImageUrl="img/filter.png" CssClass="action-btn" />
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Department") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Position" HeaderText="Position" />
<asp:TemplateField HeaderText="Location">
<HeaderTemplate>
Location
<input type="text" class="filter-input" onkeyup="filterGrid(this, 5)" />
<asp:ImageButton ID="btnAction" runat="server" ImageUrl="img/filter.png" CssClass="action-btn" />
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Location") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Year">
<HeaderTemplate>
Year
<input type="text" class="filter-input" placeholder="mm/dd/yyyy" onkeyup="filterGrid(this, 6)" />
<asp:ImageButton ID="btnAction" runat="server" ImageUrl="img/filter.png" CssClass="action-btn" />
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Year") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Score (%)">
<ItemTemplate>
<div class="score-box <%# GetScoreClass(Eval("Score")) %>">
<%# Eval("Score") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnAction" runat="server" ImageUrl="img/detail.png" CssClass="action-btn" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<table class="expandable-table">
<asp:Repeater ID="rptDetails" runat="server">
<ItemTemplate>
<tr class="expandable-content" style="display: none;">
<td colspan="9">
<div class="details-box">
<strong>Details:</strong>
<p>More information about <%# Eval("Name") %> in the <%# Eval("Department") %> department.</p>
</div>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<script>
function toggleRow(btn) {
var row = btn.closest('tr').nextElementSibling;
if (row.style.display === "none") {
row.style.display = "table-row";
btn.src = "img/arrowdown.png";
} else {
row.style.display = "none";
btn.src = "img/expend.png";
}
}
function filterGrid(input, columnIndex) {
var filter = input.value.toUpperCase();
var table = document.getElementById('<%= gvKPI.ClientID %>');
var rows = table.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
var cell = rows[i].getElementsByTagName("td")[columnIndex];
if (cell) {
if (cell.textContent.toUpperCase().indexOf(filter) > -1) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
}
</script>
</asp:Content>
namespace PositionKPI
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridView();
LoadFilters();
}
}
protected void ddlDepartmentFilter_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
string selectedDepartment = ddl.SelectedValue;
BindGridView(selectedDepartment, null, null);
}
protected void txtYearFilter_TextChanged(object sender, EventArgs e)
{
TextBox txt = (TextBox)sender;
string selectedYear = txt.Text.Trim();
BindGridView(null, null, selectedYear);
}
protected void ddlLocationFilter_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
string selectedLocation = ddl.SelectedValue;
BindGridView(null, selectedLocation, null);
}
private void LoadFilters()
{
// Sample data, replace with actual database values
List<string> departments = new List<string> { "All", "IT", "Traffic", "Airside", "MIS" };
List<string> locations = new List<string> { "All", "Isb", "Lhe", "Khi" };
}
private void BindGridView(string department = null, string location = null, string year = null)
{
// Simulate data source (Replace with actual DB query)
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("PA");
dt.Columns.Add("Name");
dt.Columns.Add("Department");
dt.Columns.Add("Position");
dt.Columns.Add("Location");
dt.Columns.Add("Year");
dt.Columns.Add("Score");
dt.Rows.Add("344", "21582", "Hammad Maqsood", "IT", "Software Engineer", "Isb", "12/02/2023", "60");
dt.Rows.Add("345", "21783", "Amna Qureshi", "Traffic", "Sr UI/UX Designer", "Isb", "20/02/2023", "30");
dt.Rows.Add("346", "21783", "Sofia Asalam", "MIS", "Software Engineer", "Khi", "11/02/2023", "80");
// Apply Filters
IEnumerable<DataRow> filteredData = dt.AsEnumerable();
if (!string.IsNullOrEmpty(department) && department != "All")
filteredData = filteredData.Where(row => row["Department"].ToString() == department);
if (!string.IsNullOrEmpty(location) && location != "All")
filteredData = filteredData.Where(row => row["Location"].ToString() == location);
if (!string.IsNullOrEmpty(year))
filteredData = filteredData.Where(row => row["Year"].ToString().Contains(year));
gvKPI.DataSource = filteredData.CopyToDataTable();
gvKPI.DataBind();
}
protected string GetScoreClass(object score)
{
int scoreValue = Convert.ToInt32(score);
if (scoreValue < 40) return "score-badge score-low";
if (scoreValue < 80) return "score-badge score-medium";
return "score-badge score-high";
}
protected void gvKPI_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "ExpandRow")
{
int rowIndex = Convert.ToInt32(e.CommandArgument);
GridViewRow row = gvKPI.Rows[rowIndex];
Panel pnlDetails = (Panel)row.FindControl("pnlRowDetails");
pnlDetails.Visible = !pnlDetails.Visible;
}
}
}
}
