Extending DataGrid
https://stackoverflow.com/questions/1227211
-
22-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I would like to extend the ASP.NET DataGrid web control to add lots of additional features but most important of all, I would like to make the body of the grid scrollable.
I have the HTML worked out but overriding the rendering of the control is confusing. The basic structure of final control should look like so:
<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>
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.
Solution 2
Because I only wanted to modify the output of the control, 'extending' the control actually meant that I only had to override the rendering.
I found articles on control adapters that one can use to alter the output. A project exists on CodePlex named 'CSS Control Adapters'. It has been very helpful on more controls than just the DataGrid.
OTHER TIPS
You can try this approach. Works good for me.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
