GridView and Sorting
GridView Control
Please reference this: http://tablesorter.com/docs/ for the actual source.
Step 1: Add the following to the ASP code:
(Note, you will want to copy the js and css files to a local network server, I am just using the source)
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://autobahn.tablesorter.com/jquery.tablesorter.js"></script>
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />
Step 2: Add the following JavaScript/JQuery code to your ASP code
(This will go after the code above, however the first $(document).ready command is fired for the first time the page is rendered. The second one is for if you are using AJAX Update Refresh Panels) If you are not populating the GridView on load, omit the first $(document.ready)
<script type="text/javascript">
try{
Sys.Application.add_init(appl_init);
$(document).ready(function () { $(<%= grdCaseInfo.ClientID %>).tablesorter(); });
}
catch(err){
}
function appl_init() {
try{
var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
pgRegMgr.add_endRequest(EndHandler); }
catch(err){
}
}
function EndHandler() {
try{
$(document).ready(function () { $(<%= grdCaseInfo.ClientID %>).tablesorter(); });
}
catch(err){
}
}
</script>
Step 3: Add your GridView
(Please note, the CSS Class "tablesorter" must be used)
<asp:GridView ID="grdCaseInfo" runat="server" EnableModelValidation="True"
class="tablesorter" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="ID" HeaderText="Case" />
<asp:BoundField DataField="CaseTitle" HeaderText="Title" />
</Columns>
</asp:GridView>
Step 4: Add Code
(Use what ever code you need)
private string ConnectionString = "Data Source=.;Initial Catalog=CMS_InfoDept;Persist Security Info=True;User ID=cmsuser;Password=pass@word1";
protected void Page_Load(object sender, EventArgs e)
{
BindGridView();
}
private void BindGridView()
{
List<Case> cases = new List<Case>();
using (CMSDataContext db = new CMSDataContext(ConnectionString))
{
var dbResults = from q in db.tblCases
where q.caseOwnerID == 2
select q;
foreach (var dbItem in dbResults)
{
Case caseItem = new Case();
caseItem.ID = dbItem.ID;
caseItem.CaseTitle = dbItem.caseTitle;
cases.Add(caseItem);
}
this.grdCaseInfo.DataSource = cases;
this.grdCaseInfo.DataBind();
}
}
}
Step 5: Ensure the GridView has a HR row
(Adding the following code after you perofrm a DataBind() will ensure that your table will have hr that is required by the jQuery)
// This is required for all sorting on this gridview
if (grdCaseInfo.Rows.Count > 0)
{
// This replaces <td> with <th> and adds the scope attribute
grdCaseInfo.UseAccessibleHeader = true;
// This will add the <thead> and <tbody> elements
grdCaseInfo.HeaderRow.TableSection = TableRowSection.TableHeader;
}
![clip_image002[1]](http://myspexp.files.wordpress.com/2010/06/clip_image00211.jpg "clip_image002[1]")
