) How to generate a scroll bar in the DataGrid

When developing a DataGrid, we certainly encounter a scroll bar in the DataGrid because we do not want to pagination (there is not so much data) but it is not displayed on one page, you can scroll up or down the data in the DataGrid instead of scrolling up or down the page. Because the purpose of this article is to explain how to implement it, you can think about it yourself (for example: paging and scrolling ). In order to scroll the DataGrid, we need a Javascript script that allows the client table to scroll (the JSCodeI downloaded it from codeproject), but I cannot scroll the table header (that is, the first line ). We all know that the DataGrid will generate a table after being interpreted to the client, but this table is composed of <tr> <TD>, in our scripts, we need to use thead and tbody of table (this function is used in most client applications, such as sorting the client and dragging the column ), therefore, the next task is how to add <thead> <tbody> to the DataGrid of our client. If you have customized the User-Defined controls and ASP. NET page, we know that the control is always rendered on the page, so we can rewrite this method to complete the custom rendering of the DataGrid. It's really scary to hear it. How are complicated controls displayed? Do not worry. First, create a custom control as follows: public class powerdatagrid: system. Web. UI. webcontrols. DataGrid
We can see that our control inherits from the DataGrid, so our current control has all the functions of the DataGrid without having to write a line of code. Next, we will embed the JS Code we have prepared into our control so that the page where the control is placed will eventually have this JS Code on the client to complete our rolling task. To do this, we need to rewrite the pre-rendering method:

Protected override void onprerender (system. eventargs E)
{
Base. onprerender (E );
ResourceManager manager = new ResourceManager (this. GetType ());
Resourceset resources = manager. getresourceset (system. Globalization. cultureinfo. currentculture, true, true );
If (! Page. isclientscriptblockregistered ("skysword. webcontrol. powerdatagrid library ")){
String script = resources. getstring ("scrolltable ");
This. Page. registerclientscriptblock ("skysword. webcontrol. powerdatagrid library", script );
This. page. registerstartupscript ("skysword. webcontrols. powerdatagrid init "," <SCRIPT> makescrollabletable "+ this. ID + "', true, 'auto'); </SCRIPT> ");
}
}

In this method, we access the resource file. Oh! I forgot to say that we need to create a resource file to save our JS Code. We will firstSource codeThe corresponding scrolltable data (a JS script) is registered in the script block of the client. Finally, in order to be initialized, set <SCRIPT> makescrollabletable ('"+ this. ID + "', true, 'auto'); </SCRIPT> the script starts execution when it is registered to the page for loading (I think it should be the same as the onload method in the body ). This method is a good choice when you need to load client scripts. Now, the client script is available, and the rest is to process our client DataGrid (that is, the client table presented by the DataGrid ). To render our own DataGrid, We need to rewrite the rendering method as follows: protected override void render (htmltextwriter output)
{
Output. Write (this. parsemarkup ());
}

A parsemarkup function is called to generate an output script (string). The script is a table containing thead and tbody. Because this method is only used by the control, we set it to private Code as follows:
Private string parsemarkup (){
// Insert the thead tag and tbody tag
Stringwriter writer = new stringwriter ();
Htmltextwriter buffer = new htmltextwriter (writer );
Base. Render (buffer );
String pmarkup = writer. tostring ();

 

// Find the end of the first table label, that is, the first> character.
Pmarkup = pmarkup. insert (pmarkup. indexof (">") + ">". length, "<thead> ");
// Wrap the first tr with thead in the closed interval. Now the first <thead> has been drawn and needs to be drawn.
// Its end </thead> and </tbody> are also found to insert the first </tr> and </thead> and </tdoby>
Pmarkup = pmarkup. insert (pmarkup. indexof ("</tr>") + "</tr>". length, "</thead> <tbody> ");
// Insert a </tbody> before the last </table>.
Pmarkup = pmarkup. Replace ("</table>", "</tbody> </table> ");
Return pmarkup;
}
In this method, we first instantiate a stringwriter object writer, and use this object as the parameter to instance a htmltextwriter Object Buffer, the most important thing is that we call the basic class render to fill the buffer with the content to be output (a bunch of scripts are table, you can view the content in the monitor ). All right, the rest is to analyze this script, then, replace <tr> with <thead> in the first place where <tr> appears in the script with a method similar to that after <tr>. Finally, we output the table we replaced and modified to the client. Everything is OK!

Note: The reason why stringwriter is used is that it can save the original characters such as/T/N from the buffer. Resource file configuration method: First add a resource file to your project, with the same name as your control, and then add the following section to the file.

<Data name = "scrolltable">
<Value> <! [CDATA [
<Script language = 'javascript '>

VaR Container = new array ();
VaR onresizehandler;

Function scrollbarwidth (){
VaR W;

If (! Document. Body. currentstyle) document. Body. currentstyle = Document. Body. style;

If (document. Body. currentstyle. overflowy = 'visible 'Document. Body. currentstyle. overflowy = 'scroll '){
W = Document. Body. offsetwidth-document. Body. clientleft-document. Body. clientwidth;
} Else {
Win = Window. Open ("about: blank", "_ blank", "Top = 0, Left = 0, width = 100, Height = 100, scrollbars = yes ");
Win.doc ument. writeln ('scrollbar ');
W = win.doc ument. Body. offsetwidth-win.doc ument. Body. clientleft-win.doc ument. Body. clientwidth;
Win. Close ();
}

 

Return W;
}

Function getactualwidth (e ){
If (! E. currentstyle) E. currentstyle = E. style;

Return e. clientwidth-parseint (E. currentstyle. paddingleft)-parseint (E. currentstyle. paddingright );
}

Function findrowwidth (r ){
For (VAR I = 0; I <R. length; I ++ ){
R [I]. actualwidth = getactualwidth (R [I]);
}
}

Function setrowwidth (r ){
For (VAR I = 0; I <R. length; I ++ ){
R [I]. width = R [I]. actualwidth;
R [I]. innerhtml = '<span style = "width:' + R [I]. actualwidth + '; ">' + R [I]. innerhtml + '</span> ';
}
}

Function fixtablewidth (TBL ){
For (VAR I = 0; I <TBL. thead. Rows. length; I ++) findrowwidth (TBL. thead. Rows [I]. cells );
Findrowwidth (TBL. tbodies [0]. Rows [0]. cells );
If (TBL. tfoot) for (VAR I = 0; I <TBL. tfoot. rows. length; I ++) findrowwidth (TBL. tfoot. rows [I]. cells );

// TBL. width = '';

For (VAR I = 0; I <TBL. thead. Rows. length; I ++) setrowwidth (TBL. thead. Rows [I]. cells );
Setrowwidth (TBL. tbodies [0]. Rows [0]. cells );
If (TBL. tfoot) for (VAR I = 0; I <TBL. tfoot. rows. length; I ++) setrowwidth (TBL. tfoot. rows [I]. cells );
}

Function makescrollabletable (TBL, scrollfooter, height ){
VaR C, pnode, HDR, FTR, wrapper, rect;

If (typeof TBL = 'string') TBL = Document. getelementbyid (TBL );

Pnode = TBL. parentnode;
Fixtablewidth (TBL );

C = container. length;
Container [c] = Document. createelement ('<span style = "height: 100; overflow: auto;"> ');
Container [C]. ID = TBL. ID + "Container ";
Pnode. insertbefore (container [c], TBL );
Container [C]. appendchild (TBL );
Container [C]. style. width = TBL. clientwidth + 2 * TBL. clientleft + scrollbarwidth ();

 

HDR = TBL. clonenode (false );
HDR. ID + = 'header ';
HDR. appendchild (TBL. thead. clonenode (true ));
TBL. thead. style. Display = 'none ';

If (! Scrollfooter! TBL. tfoot ){
FTR = document. createelement ('<span style = "width: 1; Height: 1; clip: rect (0 1 0); background-color: transparent;"> ');
FTR. ID = TBL. ID + 'footer ';
FTR. style. Border = TBL. style. border;
FTR. style. width = getactualwidth (TBL) + 2 * TBL. clientleft;
FTR. style. borderbottom = FTR. style. borderleft = FTR. style. borderright = 'none ';
} Else {
FTR = TBL. clonenode (false );
FTR. ID + = 'footer ';
FTR. appendchild (TBL. tfoot. clonenode (true ));
FTR. style. bordertop = 'none ';
TBL. tfoot. style. Display = 'none ';
}

Wrapper = Document. createelement ('<Table border = 0 cellspacing = 0 cellpadding = 0> ');
Wrapper. ID = TBL. ID + 'wrapper ';
Pnode. insertbefore (wrapper, container [c]);

Wrapper. insertrow (0). insertcell (0). appendchild (HDR );
Wrapper. insertrow (1). insertcell (0). appendchild (container [c]);
Wrapper. insertrow (2). insertcell (0). appendchild (FTR );

Wrapper. align = TBL. Align;
TBL. align = HDR. align = FTR. align = 'left ';
HDR. style. borderbottom = 'none ';
TBL. style. bordertop = TBL. style. borderbottom = 'none ';

 

// Adjust page size
If (C = 0 & Height = 'auto '){
Onresizeadjusttable ();
Onresizehandler = Window. onresize;
Window. onresize = onresizeadjusttable;
} Else {
Container [C]. style. Height = height;
}
}

Function onresizeadjusttable (){
If (onresizehandler) onresizehandler ();

VaR rect = container [0]. getclientrects () (0 );
VaR H = Document. Body. clientheight-(rect. Top + (document. Body. scrollheight-rect. Bottom ));
Container [0]. style. Height = (h> 0 )? H: 1;
}

Function printpage (){
VaR TBS = Document. getelementsbytagname ('table ');
VaR E;

For (VAR I = 0; I <container. length; I ++) container [I]. style. Overflow = '';

Window. Print ();

For (VAR I = 0; I <container. length; I ++) container [I]. style. Overflow = 'auto ';
}

</SCRIPT>
]> </Value>
</Data>

Okay, you can do it now. This method can be used to sort and drag the client, as long as you find the corresponding JS Code (or write it yourself) and then use this method to analyze your client code, finally, locate the output of your DataGrid as the result you want, and everything will be OK! Due to the time relationship, the control page and scroll cannot be the same, and users who are interested can implement it. I am writing thisArticleThe purpose of this article is to help you improve your programming technology. Thank you for reading! If you have any questions or good suggestions, contact me.