asp.net method to implement fixed GridView title bar (Frozen column function) _ Practical Tips

The example in this article describes how asp.net implements a fixed GridView title bar. Share to everyone for your reference, specific as follows:

<%@ Page language= "C #"%> <%@ Import namespace= "System.Data"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <script runat=" Server "> protected void Page_Load (object sender, EventArgs e) {DataTable t = new Datat
    Able ();
    T.columns.add ("Serial number", typeof (int));
    T.columns.add ("Material", typeof (String));
    T.columns.add ("Unit Price", typeof (decimal));
    for (int i = 1; I <= i++) t.columns.add ("stock" + I, typeof (int));
    Random rnd = new Random ();
      for (int i = 0; i < i++) {DataRow row = T.newrow ();
      row["serial number"] = i + 1; row["material"] = Guid.NewGuid (). ToString (). Substring (0, 13).
      ToUpper (); row["Unit Price"] = rnd.
      Nextdouble () * 100; for (int j = 1; J <= J + +) row["inventory" + j] = rnd.
      Next (10000);
    T.rows.add (row);
    } Gridview1.autogeneratecolumns = false; foreach (DataColumn c in t.columns) {BoundField BF = new BOundfield (); Bf.
      DataField = C.columnname; Bf.
      HeaderText = C.columnname; if (C.datatype = = typeof (decimal)) BF.
      DataFormatString = "{0:#,0.00}"; else if (C.datatype = = typeof (int)) BF.
      DataFormatString = "{0:#,0}"; Bf. Itemstyle.horizontalalign = (!string. IsNullOrEmpty (BF.
        dataformatstring))?
      HorizontalAlign.Right:HorizontalAlign.Center;
    GRIDVIEW1.COLUMNS.ADD (BF);
    } Gridview1.datasource = t;
  Gridview1.databind (); } </script>  

Super Tables Plugin for jquery-mit Style License//Copyright (c) 2009 Jeffrey Lee---blog.darkthread.net////A W  Rapper for Matt Murphy's Super Tables http://www.matts411.com/post/super_tables/////Contributors:////////to call:// $ ("..."). Tosupertable (options)////////options: (Order does not matter)//cssskin:string (eg.) Sdefault "," Ssky "," Sorange "," Sdark ")//Headerrows:integer (default is 1)//Fixedcols:integer (default is 0)/ /colwidths:integer Array (use-1 for auto sizing)//onstart:function (any this.variablenamehere variables Ate here can is used later (eg. onfinish function))//Onfinish:function (all This.variablenamehere variables Create 
D in this script can is used in this function)//margin, padding, width, height, overflow ...: Styles for "Fakecontainer" Example://$ ("#GridView1"). Tosupertable (//{width: "640px", Height: "480px", fixedcols:2,//O
Nfinish:function () {alert (' done! ');}})Jquery.superTable.js (function ($) {$.fn.extend ({tosupertable:function (options) {var sett
            ing = $.extend ({width: "640px", Height: "320px", margin: "10px", padding: "0px", Overflow: "Hidden", colwidths:undefined, fixedcols:0, Headerrows:1, Onstart:function ()
          {}, Onfinish:function () {}, Cssskin: "Ssky"}, Options);
            Return This.each (function () {var q = $ (this);
            var id = q.attr ("id");
            Q.removeattr ("style"). Wrap ("<div id= '" + ID + "_box ' ></div>");
            var noncssprops = ["Fixedcols", "Headerrows", "OnStart", "OnFinish", "Cssskin", "colwidths"];
            var container = $ ("#" + ID + "_box"); For (var p in setting) {if ($.inarray (p, noncssprops) = = 1) {container.css (P, setting[p])
                ;
              Delete Setting[p];
      }      var Myst = new supertable (ID, setting);
        });
}
      });

 }) (JQuery);

Super Tables v0.30-mit Style License//Copyright (c) 2008 Matt Murphy---www.matts411.com///Contributors://J
OE Gallo//////to call://New Supertable ([string] tableId, [object] options); OPTIONS: (Order does not matter)//cssskin:string (eg.
"Sdefault", "Ssky", "Sorange", "Sdark")//Headerrows:integer (default is 1)//Fixedcols:integer (default is 0) Colwidths:integer Array (use-1 for auto sizing)//onstart:function (any this.variablenamehere variables your CR Eate can be used later (eg. onfinish function))//Onfinish:function (all This.variablenamehere variables
Ed in this script can is used in the This function)////////Examples://var Myst = new Supertable ("Mytableid"); var Myst = new Supertable ("Mytableid", {//Cssskin: "Sdefault",//Headerrows:1,//Fixedcols:2,//CO   Lwidths: [1, 230, 1,-1,],///Onstart:function () {//This.start = new Date ();//},// OnfinIsh:function () {//Alert ("Finished ...)
"+ ((new Date ())-This.start) +" Ms. ");
//   }
// }); Issues/notes://1. No Quirksmode Support (officially, but still should work)//2. Element ID ' May is duplicated when Fixedcols > 0, causing getElementById () issues//3.   Safari would render the header row incorrectly if the fixed header row count is 1 and there be a colspan > 1 in one// 
Or more of the cells (fix available)////////////supertables.js///////////var supertable = function (tableId, options) { * Initialize * options = Options | |
  {}; This.cssskin = Options.cssskin | |
  ""; This.headerrows = parseint (Options.headerrows | |
  "1"); This.fixedcols = parseint (Options.fixedcols | |
  "0"); this.colwidths = Options.colwidths | |
  []; This.initfunc = Options.onstart | |
  Null This.callbackfunc = Options.onfinish | |
  Null
This.initfunc && This.initfunc ();
  * Create the Framework dom * * * this.sbase = document.createelement ("DIV"); ThiS.sfheader = This.sBase.cloneNode (false);
  This.sheader = This.sBase.cloneNode (false);
  This.sheaderinner = This.sBase.cloneNode (false);
  This.sfdata = This.sBase.cloneNode (false);
  This.sfdatainner = This.sBase.cloneNode (false);
  This.sdata = This.sBase.cloneNode (false);
  This.scolgroup = document.createelement ("Colgroup");
  this.sdatatable = document.getElementById (tableId); This.sDataTable.style.margin = "0px";
  /* Otherwise looks bad/if (This.cssskin!== "") {This.sDataTable.className = "" + This.cssskin; } if (This.sDataTable.getElementsByTagName ("Colgroup"). Length > 0) {this.sDataTable.removeChild (this.sdatatable. getElementsByTagName ("Colgroup") [0]);
  * * Making our own * * this.sparent = This.sDataTable.parentNode;
  This.sparentheight = This.sParent.offsetHeight;
This.sparentwidth = This.sParent.offsetWidth;
  * Attach the required classnames * * this.sBase.className = "sbase";
  This.sFHeader.className = "Sfheader"; This.sHeader.className = "Sheader";
  This.sHeaderInner.className = "Sheaderinner";
  This.sFData.className = "Sfdata";
  This.sFDataInner.className = "Sfdatainner";
This.sData.className = "SData"; * Clone parts of the data table for the new Header table */var alpha, beta, touched, clean, cleanrow, I, J, K, M,
  N, p;
  This.sheadertable = This.sDataTable.cloneNode (false);
    if (this.sDataTable.tHead) {alpha = This.sDataTable.tHead;
    This.sHeaderTable.appendChild (Alpha.clonenode (false));
  beta = this.sHeaderTable.tHead;
    else {alpha = this.sdatatable.tbodies[0];
    This.sHeaderTable.appendChild (Alpha.clonenode (false));
  beta = this.sheadertable.tbodies[0];
  Alpha = alpha.rows;
  For (i=0 i<this.headerrows; i++) {Beta.appendchild (Alpha[i].clonenode (true));
  } this.sHeaderInner.appendChild (this.sheadertable);
    if (This.fixedcols > 0) {this.sfheadertable = This.sHeaderTable.cloneNode (true);
    This.sFHeader.appendChild (this.sfheadertable); This.Sfdatatable = This.sDataTable.cloneNode (true);
  This.sFDataInner.appendChild (this.sfdatatable);
  /////* Set up the colgroup * * alpha = this.sdatatable.tbodies[0].rows;
    For (i=0, j=alpha.length; i<j; i++) {clean = true; For (k=0, m=alpha[i].cells.length k<m; k++) {if (Alpha[i].cells[k].colspan!== 1 | | Alpha[i].cells[k].rowspan!)
        = = 1) {i + = alpha[i].cells[k].rowspan-1;
        Clean = false;
      Break } if (clean = = true) break; /* A row with no cells of ColSpan > 1 | | RowSpan > 1 has been found */} Cleanrow = (clean = = True)? i:0; /* Use this row index to calculate the column widths * * for (i=0, j=alpha[cleanrow].cells.length; i<j; i++) {if (i = = = This.colWidths.length | | this.colwidths[i] = = 1)
    {This.colwidths[i] = alpha[cleanrow].cells[i].offsetwidth;
    For (i=0, j=this.colwidths.length i<j; i++) {this.sColGroup.appendChild (document.createelement ("COL")); This.scOlGroup.lastChild.setAttribute ("width", this.colwidths[i]);
  } this.sDataTable.insertBefore (This.sColGroup.cloneNode (True), this.sDataTable.firstChild);
  This.sHeaderTable.insertBefore (This.sColGroup.cloneNode (True), this.sHeaderTable.firstChild); if (This.fixedcols > 0) {this.sFDataTable.insertBefore (This.sColGroup.cloneNode (True),
    This.sFDataTable.firstChild);
  This.sFHeaderTable.insertBefore (This.sColGroup.cloneNode (True), this.sFHeaderTable.firstChild); }/////* Style The tables individually if applicable/if (This.cssskin!== "") {This.sDataTable.className = ""
    + This.cssskin + "-main";
    This.sHeaderTable.className + = "" + This.cssskin + "-headers";
      if (This.fixedcols > 0) {this.sFDataTable.className + = "" + This.cssskin + "-fixed";
    This.sFHeaderTable.className + = "" + This.cssskin + "-fixedheaders";
  }/////* Throw everything into sbase */if (This.fixedcols > 0) {this.sBase.appendChild (This.sfheader);
 } This.sHeader.appendChild (This.sheaderinner);
  This.sBase.appendChild (This.sheader);
    if (This.fixedcols > 0) {this.sFData.appendChild (This.sfdatainner);
  This.sBase.appendChild (This.sfdata);
  } this.sBase.appendChild (This.sdata);
  This.sParent.insertBefore (This.sbase, this.sdatatable);
This.sData.appendChild (this.sdatatable);
  * Align the tables/var sdatastyles, Sdatatablestyles;
  This.sheaderheight = this.sdatatable.tbodies[0].rows[(this.sDataTable.tHead)? 0:this.headerrows].offsettop;
  Sdatatablestyles = "Margin-top:" + (This.sheaderheight *-1) + "PX;";
  Sdatastyles = "Margin-top:" + this.sheaderheight + "px;";
  Sdatastyles + = "Height:" + (This.sparentheight-this.sheaderheight) + "PX;"; if (This.fixedcols > 0) {/* A collapsed table ' s cell ' s offsetleft is calculated differently (w/or w/out border in cluded) across Broswers-adjust: * * this.sfheaderwidth = This.sdatatable.tbodies[0].rows[cleanrow].cells[this.fixedco Ls].offsetleft;
      if (window.getcomputedstyle) {alpha = Document.defaultview;
      beta = this.sdatatable.tbodies[0].rows[0].cells[0]; if (navigator.taintenabled) {/* If not Safari/this.sfheaderwidth + + = Math.ceil (parseint alpha.getcomputedstyle (
      Beta, NULL). GetPropertyValue ("Border-right-width"))/2); else {this.sfheaderwidth + = parseint (Alpha.getcomputedstyle (beta, null). GetPropertyValue ("Border-right-width")
      ;
      } else if (/* @cc_on!@*/0) {/* Internet Explorer */alpha = this.sdatatable.tbodies[0].rows[0].cells[0];
      beta = [alpha.currentstyle["borderRightWidth"], alpha.currentstyle["borderLeftWidth"]];
        if (/px/i.test (beta[0]) &&/px/i.test (beta[1)) {beta = [parseint (beta[0]), parseint (beta[1])].sort ();
      This.sfheaderwidth + + Math.ceil (parseint (beta[1))/2);  }/* Opera 9.5 issue-a sizeable data table may cause the document scrollbars to appear without this: */IF
 (Window.opera) {     This.sFData.style.height = this.sparentheight + "px";
    } this.sFHeader.style.width = This.sfheaderwidth + "px";
    Sdatatablestyles + = "Margin-left:" + (This.sfheaderwidth *-1) + "PX;";
    Sdatastyles + = "Margin-left:" + this.sfheaderwidth + "px;"; Sdatastyles + = "width:" + (This.sparentwidth-this.sfheaderwidth) + "PX;";}
  else {sdatastyles + = "width:" + this.sparentwidth + "px;";}
  This.sData.style.cssText = Sdatastyles;
This.sDataTable.style.cssText = Sdatatablestyles; * Set up table scrolling and IE's OnUnload event for garbage collection * * (function (ST) {if (St.fixedcols &G T
        0 {st.sData.onscroll = function () {st.sHeaderInner.style.right = St.sData.scrollLeft + "px";
      St.sFDataInner.style.top = (ST.SDATA.SCROLLTOP *-1) + "px";
    };
      else {st.sData.onscroll = function () {st.sHeaderInner.style.right = St.sData.scrollLeft + "px";
    }; } if (/* @cc_on!@*/0) {/* Internet EXplorer */window.attachevent ("OnUnload", function () {st.sData.onscroll = null;
      st = NULL;
    });
  }) (this);
This.callbackfunc && This.callbackfunc ();

 };

/*//Super Tables v0.30-mit Style License//Copyright (c) 2008 Matt Murphy---www.matts411.com///Contributors:/
  /Joe Gallo////////////supertables.css////////////////* * Sbase {position:relative;
  width:100%;
  height:100%;
Overflow:hidden;
  }/* HEADERS/* Sheader {position:absolute;
  Z-index:3;
Background-color: #ffffff;
  }. Sheaderinner {position:relative}. sheaderinner Table {border-spacing:0px 0px!important;
  Border-collapse:collapse!important;
  WIDTH:1PX!important;
  Table-layout:fixed!important; Background-color: #ffffff;
  * Here b/c of Opera 9.25:(* * * headers-fixed/* Sfheader {position:absolute;
  Z-index:4;
Overflow:hidden;
  }. sfheader Table {border-spacing:0px 0px!important;
  Border-collapse:collapse!important;
  WIDTH:1PX!important;
  Table-layout:fixed!important; Background-color: #ffffff;
  * Here b/c of Opera 9.25:(* * * * * Body//sData {position:absolute;
  Z-index:2; Overflow:autO
Background-color: #ffffff;
  }. sData Table {border-spacing:0px 0px!important;
  Border-collapse:collapse!important;
  WIDTH:1PX!important;
Table-layout:fixed!important;
  }/* body-fixed/* Sfdata {position:absolute;
  Z-index:1;
Background-color: #ffffff;
  }. Sfdatainner {position:relative}. sfdata Table {border-spacing:0px 0px!important;
  Border-collapse:collapse!important;
  WIDTH:1PX!important;
Table-layout:fixed!important;
  }///Super Tables-skin Classes//Remove if not needed *//* Sdefault///. Sdefault {margin:0px;
  padding:0px;
  Border:none;
  Font-family:verdana, Arial, sans serif;
Font-size:0.8em;
  }. Sdefault th,. sdefault td {BORDER:1PX solid #cccccc;
  padding:3px 6px 3px 4px;
White-space:nowrap;
  }. sdefault th {background-color: #e5e5e5;
Border-color: #c5c5c5;
  }. sdefault-fixed {background-color: #eeeeee;
Border-color: #c5c5c5;
  }/* Ssky/* Ssky {margin:0px;
  padding:0px;
Border:none;  Font-family:verdana, Arial, sans serif;
Font-size:0.8em;
  }. Ssky th,. Ssky td {BORDER:1PX solid #9eb6ce;
  padding:3px 6px 3px 4px;
White-space:nowrap; }. Ssky th {background-color: #CFDCEE; ssky-fixed {background-color: #e4ecf7;}//* Sorange/. Sorange {margin
  : 0px;
  padding:0px;
  Border:none;
  Font-family:verdana, Arial, sans serif;
Font-size:0.8em;
  }. sorange th,. sorange td {BORDER:1PX solid #cebb9e;
  padding:3px 6px 3px 4px;
White-space:nowrap; }. sorange th {background-color: #ECD8C7; sorange-fixed {background-color: #f7ede4;}//* Sdark/. Sdark {Marg
  in:0px;
  padding:0px;
  Border:none;
  Font-family:verdana, Arial, sans serif;
  Font-size:0.8em;
Color: #ffffff;
  }. Sdark th,. sdark td {BORDER:1PX solid #555555;
  padding:3px 6px 3px 4px;
White-space:nowrap; }. Sdark th {background-color: #000000; sdark-fixed {background-color: #222222;} sdark-main {Background-colo
R: #333333;

 }

More interested readers of asp.net related content can view the site topics: "asp.net operation JSON tips summary", "asp.net string operation tips Summary", "ASP.net Operation XML Skills summary", "asp.net file Operation skills Summary", " asp.net Ajax Skills Summary topic and the "ASP.net cache operation skills Summary."

I hope this article will help you to ASP.net program design.