DataGrid application (2) -- Design of the scroll bar

You can add a scroll bar to the DataGrid by embedding it in <div> </div>. I will summarize these methods first:

1.Using the overflow feature of Div, we can design the scroll bar of the table. However, we usually need a fixed table header, because the entire DataGrid is placed in the DIV, and the table header cannot be fixed. (Method 2: CSS can be fixed). We need another <Table> as the header. At the same time, we need to align the lines indicated by the DataGrid contained by the DIV with the header, form a complete table. The format is as follows:

<Table>
<Tr>
<TD>
<Table>
<! -- Header part -->
</Table>
<Div style = "overflow: auto; Height: 300px">
<! -- DataGrid (line details) -->
</Div>
</TD>
</Tr>
</Table>

How can we ensure that the width of the cell in the table header is aligned with that in the DataGrid. As you can see, placing the "Header" and "line details" in one <TD> ensures that their edges are aligned. Now, how can we ensure that their median is aligned?

After the DataGrid does not use the table header, the style of the table header cannot be used to control the cell width in the DataGrid. To ensure the cell alignment in the middle, we set the width for each cell in itemdatabound.

 

Private void maid (Object sender, maid E)

{

E. Item. cells [0]. style. Add ("width", "30% ");

E. Item. cells [1]. style. Add ("width", "30% ");

E. Item. cells [2]. style. Add ("width", "30% ");

}

Similarly, the cell in the header is set to the same width. The effect is as follows:

2. The above method is relatively simple. HTML needs to be added, and there is no control over the horizontal scroll bar. Here we will explain another method, from the perspective of codeproject. It is mainly controlled through CSS. Original post address: http://www.codeproject.com/aspnet/FreezePaneDatagrid.asp

The key is:

Th {border-Right: Silver 1px solid; font-weight: bold; font-size: 14px; Z-INDEX: 10; cursor: default; color: White; position: relative; top: expression (document. getelementbyid ("div-DataGrid "). scrollTop-2); background-color: Navy; text-align: Center}

We know that the DataGrid is converted to a standard HTML Tag displayed on the client, and the header is converted to a <TH> tag. First, the position is relative, rather than absolute position display. The top position is 2px under the top position of the scroll bar.

CSS:

<Style> <br/> TD {font-size: 12px} <br/> Div # div-DataGrid {border-Right: Gray thin solid; border-top: gray thin solid; overflow: auto; border-left: Gray thin solid; width: 520px; border-bottom: Gray thin solid; SCROLLBAR-BASE-COLOR: # ffeaee; height: 200px} <br/> TD. locked {border-Right: Silver 1px solid; font-weight: bold; font-size: 14px; left: expression (document. getelementbyid ("div-DataGrid "). scrollLeft-2); cursor: default; color: White; position: relative; Background-color: Navy; text-align: Center} <br/> th. locked {border-Right: Silver 1px solid; font-weight: bold; font-size: 14px; left: expression (document. getelementbyid ("div-DataGrid "). scrollLeft-2); cursor: default; color: White; position: relative; Background-color: Navy; text-align: Center} <br/> Th {border-right: silver 1px solid; font-weight: bold; font-size: 14px; Z-INDEX: 10; cursor: default; color: White; position: relative; top: expression (document. getelementbyid ("div-DataGrid "). scrollTop-2); background-color: Navy; text-align: Center} <br/> th. locked {Z-INDEX: 99} <br/>. gridrow {font-size: 10pt; color: black; font-family: Arial; Height: 35px; Background-color: # ffffff} <br/>. gridaltrow {font-size: 10pt; color: black; font-family: Arial; Height: 35px; Background-color: # eeeeee} <br/> body {Background: buttonface; color: windowtext} <br/> </style>

The effect is as follows:

This CSS and javascript can also be used to freeze columns.

Function lockcol (tblid) {<br/> var table = document. getelementbyid (tblid); <br/> var button = document. getelementbyid ('toggle '); <br/> var CTR = table. getelementsbytagname ('tr'); // collection of rows <br/> If (table. rows [0]. cells [0]. classname = '') {<br/> for (I = 0; I <Ctr. length; I ++) <br/>{< br/> var TR = Ctr. item (I); <br/> tr. cells [0]. classname = 'locked' <br/>}< br/> button. innertext = "unlock first column"; <br/>}else {<br/> for (I = 0; I <Ctr. length; I ++) <br/>{< br/> var TR = Ctr. item (I); <br/> tr. cells [0]. classname = ''<br/>}< br/> button. innertext = "lock first column"; <br/>}< br/>}

Design an <asp: textbox> and <asp: button>, enter the sequence number of the columns to be frozen, and click the button to freeze the columns. You need to set the cell css in the itemdatabound event:

Private void button#click (Object sender, system. eventargs E)

{

Binddata ();

}

 

Private void maid (Object sender, maid E)

{

If (this. textbox1.text! = "")

{

Try

{

 

Int Col = convert. toint32 (this. textbox1.text );

If (COL <E. Item. cells. Count-1)

{

For (INT I = 0; I <Col; I ++)

{

E. Item. cells [I]. cssclass = "locked ";

}

}

}

Catch

{

// Ignore

}

}

}