c# - Fixed header sort columns -
i have gridview need have headers fixed , each column sortable. using asp.net , c#.
i found code can't columns sort @ all. have stepped thru code , calling sort functions in aspx file. when clicked sort buttons on column headings, display in grid not change (ascending/descending) sort order. thinking has binding of gridview data.
here original code.
my version below: default.aspx is: header copied original code.
<head runat="server"> <title>create xml files</title> <script src="/scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="/scripts/jquery.tablesorter.min.js" type="text/javascript"></script> <script type = "text/javascript"> $(document).ready(function() { $("#<%=gridview1.clientid%>").tablesorter(); setdefaultsortorder(); }); function sort(cell, sortorder) { var sorting = [[cell.cellindex, sortorder]]; $("#<%=gridview1.clientid%>").trigger("sorton", [sorting]); if (sortorder == 0) { sortorder = 1; cell.classname = "sortdesc"; } else { sortorder = 0; cell.classname = "sortasc"; } cell.setattribute("onclick", "sort(this, " + sortorder + ")"); cell.onclick = function() { sort(this, sortorder); }; document.getelementbyid("container").scrolltop = 0; } function setdefaultsortorder() { var gvheader = document.getelementbyid("dummyheader"); var headers = gvheader.getelementsbytagname("th"); (var = 0; < headers.length; i++) { headers[i].setattribute("onclick", "sort(this, 1)"); headers[i].onclick = function() { sort(this, 1); }; headers[i].classname = "sortdesc"; } } </script> <style type = "text/css"> .sortasc { background-image: url(images/asc.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; width:200px; } .sortdesc { background-image: url(images/desc.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; width:200px; } .grid thead { background-color:purple; color:white; } .style1 { width: 113px; } .style2 { width: 152px; } </style> this gridview part...
<div style =" background-color:purple; height:30px;width:417px; margin:0;padding:0"> <table cellspacing="0" cellpadding = "0" rules="all" border="1" id="dummyheader" style="font-family:arial;font-size:10pt;width:417px;color:white; border-collapse:collapse;height:100%;"> <tr> <th scope="col" style ="width:48px;text-align:center">number</th> <th scope="col" style ="width:50px;text-align:center">district</th> </tr> </table> </div> <div id = "container" style ="height:186px; width:435px; overflow:auto;"> <asp:gridview id="gridview1" runat="server" showheader="false" allowsorting="true" autogeneratecolumns="false" cssclass = "grid" cellpadding="3" forecolor="white" gridlines="none" height="69px" width="417px" backcolor="white" bordercolor="white" borderstyle="ridge" borderwidth="2px" cellspacing="1" style="margin-bottom: 0px"> <rowstyle backcolor="#dedfde" forecolor="black" /> <columns> <asp:boundfield datafield="number" headertext = "number" > <itemstyle width="50px" /> </asp:boundfield> <asp:boundfield datafield="district" headertext = "district" > <itemstyle width="50px" /> </asp:boundfield> </columns> <footerstyle backcolor="#c6c3c6" forecolor="black" /> <pagerstyle backcolor="#c6c3c6" forecolor="black" horizontalalign="right" /> <selectedrowstyle backcolor="#9471de" font-bold="true" forecolor="white" /> <headerstyle backcolor="#4a3c8c" font-bold="true" forecolor="#e7e7ff" /> </asp:gridview> </div> i create datatable , bind gridview:
//create data table stationtable = new datatable(); stationtable.columns.add(new datacolumn("number", typeof(int))); stationtable.columns.add(new datacolumn("district", typeof(string))); var query = stations in xml.elements("config").elements("distributedhost").elements("station") select new { number = stations.element("number").value, district = stations.element("district").value } ; foreach (var row in query) { datarow datarow = stationtable.newrow(); datarow[stationtable.columns["number"]] = row.number; datarow[stationtable.columns["district"]] = row.district; stationtable.rows.add(datarow); } gridview1.datasource = stationtable; gridview1.databind();
it may use new static client id´s controls (seems default in visual studio 2012). try
$(document).ready(function() { $("#gridview1").tablesorter(); setdefaultsortorder(); });
Comments
Post a Comment