ASP.NET DATAGRID Control with fixed header and scrollbar

xiaoxiao2021-03-06 58

Received the above, the DataGrid was rewritten into a header fixed, and the scroll bar rolled record. Look at the Felix brother's article fixed header scrollable datagridhttp://blog.joy.com/felix/Articles/32789.aspx seems It is a bit less suitable for yourself. He cut HEADER, made a div, then cover the original DataGrid header, forming a description, just like the head is really fixed, and the position of the two seems to be Quasi, newly-generated header is a bit left (I don't know if I have a problem with my machine). Later, according to my contest, because DataGrid finally output a table, so split this table into three, header, Items, Pager. Then add a DIV outside Items, control the height of this divitter with JavaScript to decide whether Scroll Bar. Btw: Because DataGrid we have reproduced. Some code is only suitable for this Grid, but Wan variable leave wherein enjoy it ///

/// Author:.. Kenneth Lee /// Create Date: 2004-11-8 /// Description: override Render method, when the output of the grid, modify the style of the site . /// The entire DataGrid is divided into Headers, items, and Pager three tables. Use the DIV properties to control whether scroll bar. // / and ensure that the client adjusts the control of the control, its style remains unchanged. /// /// protected override void render (HTMLTEXTWRITER WRITER) {// Determines what status is to be running, is it running or design //control.site attribute is Get the information of the current site of the control Bool GridDesignMode = ((Site! = Null) && (site.designMode);

// Only the following contents of the following contents if (! Griddesignmode) {// convert HTML to StringBuilder StringWriter SW = New StringWriter ();

HTMLTextWriter HTW = New HtmlTextWriter (SW);

/ / Ensure the width of each column Style ["Table-Layout"] = "Fixed";

// Output to SW. Base.Render (HTW);

Stringbuilder sbrenderedtable = sw.getstringbuilder ();

HTW.CLOSE ();

SW.CLOSE ();

String Temp = sbrenderedtable.toString ();

IF (SBRENDEREDTABLE.LENGTH> 0) {if (this.Headertext == String.empty) {// Replace DataGrid ID with Header ID SBRENDEREDTABLE.REPLACE (ID, ID "_Headers ", 0, (Temp.indexof (ID) ID.LENGTH)); / / To keep the head and the height of the table, remove the height attribute. SbrenderedTable.remove (sbrendedtable.tostring (). TOLOWER (). Indexof ("Height:"), THIS .Height.tostring (). Length 8); temp = sbrenderedTable.toString (); // to find out the length of the header. In order to split Int start = Temp.tolower (). Indexof (@ "<"); int End = Temp.tolower (). INDEXOF (@ ">") 1;

String strablestyle = Temp.substring (start, end-start); // Because you want to divide the DataGrid into three tables, use a large DIV to secure their width. And ensure that Scroll Bar does not appear. // To ensure Scroll Bar No, use overflow-y: hidden is enough if (this.height.tostring () == String.empty || this.height.tostring () == "100%) {sbrenderedTable.insert (0, @ "

");} else {sbrenderedTable.Insert (0, @ "

"; Temp = sbrenderedtable.toString ();

StrtablesTyle = start (this.id "_ headers", ID "_Items");

// Remove the head with the content. Add a div to the content to display scroll bar sbrenderedtable.insert ((Temp.tolower ()). Indexof (@ "<<<<") 5, @ / Table> " @"

" strablestyle); string strablepager = stratablestyle.replace (this.id " _Items ", this.id " _pager ");

Int IntheightIndex = strablepager.tolower (). INDEXOF ("Height:");

IF (INTHEIGHTINDEX> 0) {strablepager = strappager.remove (Intheight ", this.height.tostring (). Length 8);}

// Disconnect the content with the pagination. SbrenderedTable.Insert (sbrenderedtable.tostring (). TOLOWER (). Indexof (@ " " strablepager);

// Use Javascript to match the width of the column and the column contents header StringBuilder adjustStyleScript = new StringBuilder ();. AdjustStyleScript.Append (@ "