Saya ingin memperluas kontrol web ASP.NET DataGrid untuk menambahkan banyak fitur tambahan tetapi yang paling penting, saya ingin membuat badan grid dapat digulir.
Saya sudah mengerjakan HTML tetapi mengesampingkan rendering kontrol membingungkan. Struktur dasar kendali akhir akan terlihat seperti ini:
<div id="grid1" class="grid">
<div class="grid-header">
<div class="grid-header-l"></div>
<div class="grid-header-c">
<div class="grid-header-wrapper">
<div class="wrapper">Grid Header</div>
</div>
</div>
<div class="grid-header-r"></div>
</div>
<div class="grid-body">
<div class="grid-column-headers">
<div class="grid-column-headers-l"></div>
<div class="grid-column-headers-c">
<div class="grid-column-headers-wrapper">
<table class="grid-column-header-table" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<div class="grid-column-header-cell asc">
<div class="grid-column-header-cell-wrapper">
<div class="grid-column-header-text" title="Column Header Name">Column Header Name</div>
<a href="/idjavascript:;" class="grid-column-header-button" title="Hide/Show Columns"><span></span></a>
<div class="grid-column-header-divider"></div>
</div>
</div>
</td>
<td>
<div class="grid-column-header-cell">
<div class="grid-column-header-cell-wrapper">
<div class="grid-column-header-text" title="Column Header Name">Column Header Name</div>
<a href="/idjavascript:;" class="grid-column-header-button" title="Hide/Show Columns"><span></span></a>
<div class="grid-column-header-divider"></div>
</div>
</div>
</td>
<td class="last">
<div class="grid-column-header-cell">
<div class="grid-column-header-cell-wrapper">
<div class="grid-column-header-text" title="Column Header Name">Column Header Name</div>
<a href="/idjavascript:;" class="grid-column-header-button" title="Hide/Show Columns"><span></span></a>
<div class="grid-column-header-divider"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid-column-headers-r"></div>
</div>
<div class="grid-body-content">
<div class="grid-body-content-t">
<div class="grid-body-content-t-l"></div>
<div class="grid-body-content-t-c"></div>
<div class="grid-body-content-t-r"></div>
</div>
<div class="grid-body-content-m">
<div class="grid-body-content-m-l"></div>
<div class="grid-body-content-m-c">
<div class="grid-body-content-wrapper">
<div class="scroll-wrapper">
<table class="grid-content-table" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
<tr>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
<td>
<div class="grid-content-cell">Cell Text/Value</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="grid-body-content-m-r"></div>
</div>
<div class="grid-body-content-b">
<div class="grid-body-content-b-l"></div>
<div class="grid-body-content-b-c"></div>
<div class="grid-body-content-b-r"></div>
</div>
</div>
</div>
Anyone know what the best approach should be? Can anyone point me to some tutorial? I have noticed one where the author captured the rendered html before it is sent to the response stream and altered it. I do not like to use that approach however.
