ASP.NET DataGrid Webコントロールを拡張して多くの機能を追加したいのですが、何よりも重要なのは、グリッドの本体をスクロール可能にしたいと思います。
HTMLを作成しましたが、コントロールのレンダリングをオーバーライドすると混乱します。最終制御の基本構造は次のようになります。
<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="javascript:;" 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="javascript:;" 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="javascript:;" 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>
誰もが最善のアプローチがどうあるべきか知っていますか？誰かが私にいくつかのチュートリアルを教えてもらえますか？応答ストリームに送信されて変更される前に、作成者がレンダリングされたhtmlをキャプチャしたものに気づきました。しかし、私はそのアプローチを使用するのは好きではありません。