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&gt;

<script type="text/javascript" src="http://autobahn.tablesorter.com/jquery.tablesorter.js"></script&gt;

<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css&quot; 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;

}

Categories: SharePoint or Custom Development | Leave a comment

Post navigation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: