I'm trying to build a dynamic nested collapsable gridview for a project in college.
I read this article which helped me a bit, but I'm still stuck.
the two relevant tables in my sql server are: member which contains info including id (primary key), and history table that is used to store history details about calls made with foreign key id that points to the member table. (each history row gets an int by identity-history_num).
I'd like that by a given id the grid will list all the history records which will be expendable to show the content field of the history table.
I did some tests and managed to get it to work, but not dynamic. I guess I need to create the gridview dynamically as well.
here is my aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<script type="text/javascript">
function showNestedGridView(obj) {
var nestedGridView = document.getElementById(obj);
var imageID = document.getElementById('image' + obj);
if (nestedGridView.style.display == "none") {
nestedGridView.style.display = "inline";
imageID.src = "minus.png";
} else {
nestedGridView.style.display = "none";
imageID.src = "plus.png";
}
}
</script>
<body>
<form id="form1" runat="server">
<div id='div1' runat="server">
<asp:GridView ID="gridViewMaster" runat="server" AllowPaging="True"
AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" DataKeyNames="id"
ForeColor="Black" GridLines="None"
onrowdatabound="gridViewMaster_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:showNestedGridView('customerID-<%# Eval("id") %>');">
<img id="imagecustomerID-<%# Eval("history_num") %>" alt="Click to show/hide orders" border="0" src="plus.png" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="history_num" HeaderText="history_id" ReadOnly="True"
SortExpression="Member-ID" />
<asp:BoundField DataField="h_date" HeaderText="History-Date"
SortExpression="Member-Name" />
<asp:BoundField DataField="topic" HeaderText="History-topic"
SortExpression="Member-Name" />
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div id="customerID-<%# Eval("history_num") %>" style="display:none;position:relative;left:25px;" >
<asp:GridView ID="nestedGridView" runat="server" AutoGenerateColumns="False"
DataKeyNames="id">
<RowStyle VerticalAlign="Top" BackColor="White" ForeColor="#330099" />
<Columns>
<asp:BoundField DataField="content" HeaderText="content"
SortExpression="OrderDate" />
</Columns>
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<AlternatingRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<%-- <asp:sqldatasource ID="Sqldatasource1" runat="server"
ConnectionString="<%$ ConnectionStrings:igroup20_test2ConnectionString %>"
SelectCommand="select id, h_date, topic from history where id='038191904'"></asp:sqldatasource>--%>
</div>
</form>
</body>
</html>
and this is the code behind for now:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlDataSource sqlDS = new SqlDataSource();
sqlDS.ID = "sqlDS";
sqlDS.ConnectionString = "igroup20_test2ConnectionString";
sqlDS.SelectCommand = "select history_num, h_date, topic from history where id='038191904'";
div1.Controls.Add(sqlDS);
gridViewMaster.DataSource = sqlDS;
gridViewMaster.DataBind();
}
protected void gridViewMaster_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string his_num = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "history_num"));
GridView gridViewNested = (GridView)e.Row.FindControl("nestedGridView");
SqlDataSource sqlDataSourceNestedGrid = new SqlDataSource();
sqlDataSourceNestedGrid.ConnectionString = ConfigurationManager.ConnectionStrings["igroup20_test2ConnectionString"].ConnectionString;
sqlDataSourceNestedGrid.SelectCommand = "SELECT content from history where history_num='" + his_num + "'";
gridViewNested.DataSource = sqlDataSourceNestedGrid;
gridViewNested.DataBind();
}
}
}
history table fields are:
history_num
id
h_date
topic
content
Related
I am trying to create a simple gridview that displays one table from my Oracle DB and allows me to delete a row. I am currently getting the error 'SQL Command Not Properly Ended' and after looking around on here it seems that Oracle doesn't allow joins on update statements. But I am not joining or doing an update statement. Can anyone see where the issue is coming from? Thanks in advance.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.OracleClient;
namespace DatabaseTest
{
public partial class AvatarView : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void Gridview1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
string avatarID = GridView1.DataKeys[e.RowIndex].Value.ToString();
string deleteSql = "DELETE FROM Avatar WHERE AvatarID = :AvatarID; ";
using (var con = new OracleConnection(ConfigurationManager.ConnectionStrings["ConnectionString3"].ConnectionString))
using (var cmd = new OracleCommand(deleteSql, con))
{
cmd.Parameters.Add(":AvatarID", OracleType.VarChar).Value = avatarID;
con.Open();
int deleted = cmd.ExecuteNonQuery();
}
GridView1.DataSource = SqlDataSource1;
GridView1.DataBind();
}
}
}
Source code -
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="AvatarView.aspx.cs" Inherits="DatabaseTest.AvatarView" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" OnRowDeleting="Gridview1_RowDeleting" AllowSorting="True" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataKeyNames="AVATARID" DataSourceID="SqlDataSource1" ForeColor="Black" GridLines="None" AllowPaging="True" Height="422px" Width="1020px">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="AVATARID" HeaderText="AVATARID" SortExpression="AVATARID" ReadOnly="True" />
<asp:BoundField DataField="AVATARNAME" HeaderText="AVATARNAME" SortExpression="AVATARNAME" />
<asp:BoundField DataField="DOB" HeaderText="DOB" SortExpression="DOB" />
<asp:BoundField DataField="STRENGTH_CURR" HeaderText="STRENGTH_CURR" SortExpression="STRENGTH_CURR" />
<asp:BoundField DataField="GENDER" HeaderText="GENDER" SortExpression="GENDER" />
<asp:BoundField DataField="HOARD" HeaderText="HOARD" SortExpression="HOARD" />
<asp:BoundField DataField="SPECIESID" HeaderText="SPECIESID" SortExpression="SPECIESID" />
<asp:BoundField DataField="USERID" HeaderText="USERID" SortExpression="USERID" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<SortedAscendingCellStyle BackColor="#FAFAE7" />
<SortedAscendingHeaderStyle BackColor="#DAC09E" />
<SortedDescendingCellStyle BackColor="#E1DB9C" />
<SortedDescendingHeaderStyle BackColor="#C2A47B" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString3 %>" ProviderName="<%$ ConnectionStrings:ConnectionString3.ProviderName %>" SelectCommand="SELECT * FROM "AVATAR""></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Remove the semicolon from the SQL statement on this line:
string deleteSql = "DELETE FROM Avatar WHERE AvatarID = :AvatarID; ";
I created a GridView and a DetailsView of Contacs. I want that if user select a contact in GridView, it will show full details in GridView.
this is the aspx source code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Contacs.aspx.cs" Inherits="Atid4.Contacs" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID"
DataSourceID="SqlDataSourceMain"
ShowSelectButton="true"
EnableViewState="true"
EnablePersistedSelection="true"
OnSelectedIndexChanged="GridViewMain_SelectedIndexChanged">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="first_name" HeaderText="first_name" SortExpression="first_name" />
<asp:BoundField DataField="last_name" HeaderText="last_name" SortExpression="last_name" />
</Columns>
</asp:GridView>
<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="SqlDataSourceMain" Height="50px" Width="125px">
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSourceMain" runat="server" ConnectionString="<%$ ConnectionStrings:AtidConnectionString %>" SelectCommand="SELECT * FROM [Contacs]"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
I added a function GridViewMain_SelectedIndexChanged that is called when user selects a row in Gridview. the function is called when user selects one of the contacts, but the contact doesn't change in the GridView. it continues to show the first Contact.
this is the code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Atid4
{
public partial class Contacs : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DetailsView1.DataBind();
}
}
protected void GridViewMain_SelectedIndexChanged(object sender, EventArgs e)
{
DetailsView1.SetPageIndex(GridView1.SelectedIndex);
}
}
}
thanks.
I solved it by EnablePaging in DetialsView.
I gave my "LabelButtons" a value which would be the "ID" for them and it outputs the text name so people see "product1", "product2" etc... but its really defined by the "ID" I need to take that "ID" when the button is clicked and output on my GridView the data that corresponds with the ID Value. How do I make it that when I click on button it will populate the gridview to give me the information I am looking for? I am sorry if this is not clear enough I will give more detail if needed. Also, I have my hiddenfield trying to hold the value for the data of the button click and it always stays null instead of taking the value of the button click id.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using TropicalServer.BAL;
namespace TropicalServer.UI
{
public partial class Products : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
protected void BindData()
{
DataSet dsID = new BALGetItems().GetItemTypeData();
rptrProductCategories.DataSource = dsID;
rptrProductCategories.DataBind();
}
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
HiddenField hf = (HiddenField)e.Item.FindControl("hf");
LinkButton cat = (LinkButton)e.Item.FindControl("lbPC");
hf.Value = Convert.ToString(e.CommandArgument);
PopulateGrid(new BALGetItems().GetItemData(Convert.ToInt32(hf.Value)));
}
private void PopulateGrid(DataSet ds)
{
int value = 0;
if (Cache["Data"] == null)
{
DataSet dsID = new BALGetItems().GetItemData(value);
Cache["Data"] = dsID;
gvPC.DataSource = dsID;
gvPC.DataBind();
}
else
{
gvPC.DataSource = (DataSet)Cache["Data"];
gvPC.DataBind();
}
}
}
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage/TropicalServer.Master" AutoEventWireup="true" CodeBehind="Products.aspx.cs" Inherits="TropicalServer.UI.Products" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<! DOCTYPE html>`enter code here`
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2">
<link type="text/css" rel="stylesheet" href="~/AppThemes/TropicalStyles/Products.css" />
<title>ServerLogin</title>
</head>
<body>
<table>
<tr>
<td>
<div>
<asp:Label ID="lblPC" class="productCategories" runat="server" Text="Product Categories"></asp:Label>
</div>
<div >
<asp:Repeater ID="rptrProductCategories" runat="server" OnItemCommand="Repeater1_ItemCommand">
<ItemTemplate>
<asp:LinkButton ID="lbPC" runat="server" CommandArgument='<%#DataBinder.Eval(Container,"DataItem.ItemTypeID") %>' Text='<%#DataBinder.Eval(Container,"DataItem.ItemTypeDescription")%>'/><br />
</ItemTemplate>
</asp:Repeater>
</div>
</td>
<td>
<div class="dataGrid">
<asp:GridView ID="gvPC" runat="server" PagerSettings-PageButtonCount="5" AutoGenerateColumns="False" PageSize="5" AllowPaging="True" EnableSortingAndPagingCallbacks="True" BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4" GridLines="Horizontal">
<Columns>
<asp:BoundField HeaderText="ItemNumber" DataField="ItemNumber"/>
<asp:BoundField HeaderText="ItemDescription" DataField="ItemDescription" />
<asp:BoundField HeaderText="Pre-Price" DataField="PrePrice" />
<asp:BoundField HeaderText="Size" DataField="ItemUnits" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#333333" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
<PagerSettings PageButtonCount="5"></PagerSettings>
<PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="White" ForeColor="#333333" />
<SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F7F7F7" />
<SortedAscendingHeaderStyle BackColor="#487575" />
<SortedDescendingCellStyle BackColor="#E5E5E5" />
<SortedDescendingHeaderStyle BackColor="#275353" />
</asp:GridView>
<asp:HiddenField ID="hf" runat="server"/>
</div>
</td>
</tr>
</table>
</body>
</html>
</asp:Content>
First, your LinkButton needs an OnClick event.
<asp:LinkButton ID="lbPC" runat="server"
CommandArgument='<%#DataBinder.Eval(Container,"DataItem.ItemTypeID") %>'
Text='<%#DataBinder.Eval(Container,"DataItem.ItemTypeDescription")%>'
OnClick="lbPC_Click"></asp:LinkButton>
Then in your click event, grab the ID, retrieve the data for your GridView, then bind the GridView.
protected void lbPC_Click(object sender, EventArgs e)
{
LinkButton lbPC = (LinkButton)sender;
int id = int.Parse(lbPC.CommandArgument)
//If for some reason you do need to hold the ID value in your hiddenfield,
//just call it as is. There is no need for FindControl() since it is
//outside of both your Repeater and your GridView.
hf.Value = id.ToString();
gvPC.DataSource = YourDataRetrievalMethod(id);
gvPC.DataBind();
}
In asp.net web application I get this error when populating datalist from database.
In design page I have some labels inside an item-template tag, when I try to access these labels by FindControl it gives the error:
Object reference not set to an instance of object
here is my code:
Products.aspx.cs:
public partial class Products : System.Web.UI.Page
{
Product product;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
DataList1.DataBind();
product = this.getProducts();
Label TitleLabel = (Label)DataList1.FindControl("TitleLabel");
TitleLabel.Text = product.Name;
Label DescLabel = (Label)DataList1.FindControl("DescLabel");
DescLabel.Text = product.LongDescription;
Label PriceLabel = (Label)DataList1.FindControl("PriceLabel");
PriceLabel.Text = product.UnitPrice.ToString();
ImageButton PImage = (ImageButton)DataList1.FindControl("ImageButton1");
PImage.ImageUrl = "images/"+product.ImageFile;
}
private Product getProducts()
{
Product p = new Product();
DataView productsTable = (DataView)
SqlDataSource1.Select(DataSourceSelectArguments.Empty);
foreach (DataRowView row in productsTable)
{
p.ProductID = row["P_Id"].ToString();
p.Name = row["Title"].ToString();
p.ShortDescription = row["Desc"].ToString();
p.LongDescription = row["Desc_full"].ToString();
p.UnitPrice = Convert.ToDecimal(row["Price"]);
p.ImageFile = row["imageurl"].ToString();
}
return p;
}
}
Products.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Products.aspx.cs" Inherits="ECProject.Products" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" DataKeyField="P_Id"
DataSourceID="SqlDataSource1" RepeatColumns="4"
RepeatDirection="Horizontal" CellPadding="4" ForeColor="#333333" >
<AlternatingItemStyle BackColor="White" ForeColor="#284775" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
<ItemTemplate >
<asp:ImageButton ID="ImageButton1" runat="server" Height = "200px"/>
<br />
Title:
<asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
<br />
Brand:
<asp:Label ID="DescLabel" runat="server" Text='<%# Eval("Desc") %>' />
<br />
Available:
<asp:Label ID="Is_ActiveLabel" runat="server" Text='<%# Eval("Is_Active") %>' />
<br />
Price:
<asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("Price") %>' />
<br />
</ItemTemplate>
<SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\ECDB.mdf;Integrated Security=True;User Instance=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Product]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Error:
Line 25:
Line 26: Label TitleLabel = (Label)DataList1.FindControl("TitleLabel");
Line 27: TitleLabel.Text = product.Name;
Line 28:
Line 29:
Please help, how to get rid of this error ?
The list usually contains more than one item, so your logic is flawed. What you can do it handle the ItemDataBound event of the list by adding such line in your Page_Load:
DataList1.ItemDataBound += new DataListItemEventHandler(DataList1_ItemDataBound);
And have such method:
void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Label TitleLabel = (Label)e.Item.FindControl("TitleLabel");
TitleLabel.Text = "changed by code";
}
}
To customize your individual DataList items, you need to do it in the ItemDataBound event. Check out this tutorial for more details.
However, it looks like you are approaching your task in an incorrect manner. Bottom line is that you need to bind your DataSource to a collection of items, and you are trying to feed it items one-by-one. Let me know if I misunderstood you and you do need to bind an individual Product to your DataList customizing its appearance at bind time.
I think your lable put in other object same as panel. you should find the real name of your lable in html code, so the best way is putting a mistake error in you script code as a result when your solution is runnig it will stop and you can find the real name of your lable control. Then use below code :
Label TitleLabel = (Label)DataList1.FindControl("REAL NAME OF LABEL CONTROL");
I hope it can help you.
I am trying to define the tfoot section and table rows for during the pre-render. Is there a way to define text input using DataTables Column Filter Add-on but i can not generate the tfoot table rows. What am i missing ?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Home
{
public partial class Glossary : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GridView1.PreRender += new EventHandler(GridView1_PreRender);
}
protected void GridView1_PreRender(object sender, EventArgs e)
{
if (GridView1.Rows.Count > 0)
{
//forces grid to render thead/th elements
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
}
}
}
This is the code for the form currently. I am wondering if there is anything wrong.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Glossary.aspx.cs" Inherits="Home.Glossary" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title spellcheck="true">Glossary</title>
<style type="text/css" media="all">
#import "DataTables-1.9.4/DataTables-1.9.4/media/css/jquery.dataTables_themeroller.css";
#form1 {
width: 100%;
}
</style>
<script src="JQuery-DataTables-ColumnFilter/media/js/jquery.dataTables.columnFilter.js"></script>
<script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.js"></script>
<script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function () {
$('#<%=GridView1.ClientID%>').dataTable()
.columnFilter();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="background: #A0A0A0">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:Login ID="Login1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="None" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" Height="111px" Width="213px" style="margin-left: 0px; margin-right: 4px;">
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
<TextBoxStyle Font-Size="0.8em" />
<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
</asp:Login>
</AnonymousTemplate>
</asp:LoginView>
</div>
<asp:SqlDataSource ID="TedGlossary" runat="server" ConnectionString="<%$ ConnectionStrings:Glsry_Taylor %>" SelectCommand="SELECT * FROM [Glossary] ORDER BY [TermText]"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" DataKeyNames="TermText,DefNbr,DefVerNbr" DataSourceID="TedGlossary"
EnableSortingAndPagingCallbacks="True" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
AutoGenerateColumns="False" AutoGenerateEditButton="False" style="margin-right: 0px" Width="100%" Height="332px">
<Columns>
<asp:BoundField DataField="TermText" HeaderText="Term" ReadOnly="True" SortExpression="Term" />
<asp:BoundField DataField="DefNbr" HeaderText="Number" ReadOnly="True" SortExpression="DefinitionNumber" />
<asp:BoundField DataField="DefVerNbr" HeaderText="Version" ReadOnly="True" SortExpression="DefinitinonVersionNumber" />
<asp:BoundField DataField="DefText" HeaderText="Definition" SortExpression="Definition" />
<asp:BoundField DataField="AmplifyingExplanationText" HeaderText="Amplifying Explanation" SortExpression="AmplifyingExplanationText" />
<asp:BoundField DataField="SeeAlsoText" HeaderText="See Also" SortExpression="See Also" />
<asp:BoundField DataField="AuthoritativeSrcText" HeaderText="Authoritative Source" SortExpression="AuthoritativeSrcText" />
<asp:BoundField DataField="ScopeName" HeaderText="Scope" SortExpression="Scope" />
<asp:BoundField DataField="DomnName" HeaderText="Domain" SortExpression="Domain" />
<asp:BoundField DataField="GovernanceStateName" HeaderText="Governance State" SortExpression="GovernanceStateName" />
<asp:BoundField DataField="LastUpdtTimestamp" HeaderText="Last Updated" SortExpression="LastUpdtTimestamp" />
</Columns>
<FooterStyle BackColor="Silver" />
</asp:GridView>
</form>
</body>
</html>
You need to set Gridview's attribute "ShowFooter" to True. It is set to False by default
<asp:GridView ID="GridView1" runat="server" ShowFooter="True" />