Asked by:
CSS-friendly scrollable GridView

Question
-
User744840694 posted
Hi!I modified the CSSFriendly GridView to inject in tbody a div with overflow attribute set. The grid style is configured in a skin file. What I noticed is that it does not use the styles defined in the skin file (FooterStyle, RowStyle, SelectedRowStyle, HeaderStyle, PagerStyle, EditRowStyle and AlternatingRowStyle ), especially the Width and Height attributes. The Empty data row is also not generated, even if it's set in the skin file. I looked with the debugger in the GridViewAdapter file, where is the fix for EmptyDataTemplate and GridView.HasControls() is false. I also noticed that on some pages, the inner HTML table does not extend to maximum.
I'm open to suggestions on how to fix this and even improve my scrollable grid.
Thanks.
- my skin file:
1 <asp:GridView AutoGenerateColumns="False" AllowSorting="False" 2 runat="server" CellPadding="4" PageSize="25" ForeColor="#333333" GridLines="None"> 3 <FooterStyle HorizontalAlign="Center" BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> 4 <RowStyle HorizontalAlign="Center" CssClass="row1" BackColor="#E3EAEB" /> 5 <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /> 6 <HeaderStyle HorizontalAlign="Center" BackColor="#336699" Font-Bold="True" ForeColor="White" /> 7 <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" /> 8 <EmptyDataTemplate> 9 <asp:Label ID="lblEmptyData" runat="server" Text="Label">No items were found...</asp:Label> 10 </EmptyDataTemplate> 11 <PagerSettings Visible="False" /> 12 <EditRowStyle BackColor="#7C6F57" /> 13 <AlternatingRowStyle BackColor="White" HorizontalAlign="Center" /> 14 </asp:GridView>
- modified GridViewAdapter:
1 using System;
2 using System.Data;
3 using System.Collections;
4 using System.Configuration;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11 using System.Drawing;
12
13 namespace CSSFriendly
14 {
15 public class GridViewAdapter : System.Web.UI.WebControls.Adapters.WebControlAdapter
16 {
17 private WebControlAdapterExtender _extender = null;
18
19 private WebControlAdapterExtender Extender
20 {
21 get
22 {
23 if (((_extender == null) && (Control != null)) ||
24 ((_extender != null) && (Control != _extender.AdaptedControl)))
25 {
26 _extender = new WebControlAdapterExtender(Control);
27 }
28
29 System.Diagnostics.Debug.Assert(_extender != null, "CSS Friendly adapters internal error", "Null extender instance");
30 return _extender;
31 }
32 }
33
34 /// ///////////////////////////////////////////////////////////////////////////////
35 /// PROTECTED
36
37 protected override void OnInit(EventArgs e)
38 {
39 base.OnInit(e);
40
41 if (Extender.AdapterEnabled)
42 {
43 RegisterScripts();
44 }
45 }
46
47 protected override void RenderBeginTag(HtmlTextWriter writer)
48 {
49 //if (Extender.AdapterEnabled)
50 //{
51 // Extender.RenderBeginTag(writer, "AspNet-GridView");
52 //}
53 //else
54 //{
55 base.RenderBeginTag(writer);
56 //}
57 }
58
59 protected override void RenderEndTag(HtmlTextWriter writer)
60 {
61 if (Extender.AdapterEnabled)
62 {
63 Extender.RenderEndTag(writer);
64 }
65 else
66 {
67 base.RenderEndTag(writer);
68 }
69 }
70
71 protected override void RenderContents(HtmlTextWriter writer)
72 {
73 if (Extender.AdapterEnabled)
74 {
75 GridView gridView = Control as GridView;
76 if (gridView != null)
77 {
78 writer.Indent++;
79 WritePagerSection(writer, PagerPosition.Top);
80
81 if (!gridView.BorderColor.IsEmpty)
82 writer.WriteAttribute("bgcolor", System.Drawing.ColorTranslator.ToHtml(gridView.BorderColor));
83 if (gridView.BorderWidth == Unit.Empty)
84 writer.AddAttribute("border", "0");
85 else
86 writer.WriteAttribute("border", gridView.BorderWidth.ToString());
87 writer.AddStyleAttribute("color", System.Drawing.ColorTranslator.ToHtml(gridView.ForeColor));
88 if (gridView.GridLines.ToString() == "None")
89 writer.AddStyleAttribute("border-collapse", "collapse");
90
91 if (!String.IsNullOrEmpty(gridView.CssClass))
92 {
93 writer.WriteAttribute("class", gridView.CssClass);
94 }
95
96
97 ///////////////////// CAPTION /////////////////////////////
98 if (!String.IsNullOrEmpty(gridView.Caption))
99 {
100 writer.WriteLine();
101 writer.WriteBeginTag("caption");
102 writer.Write(HtmlTextWriter.TagRightChar);
103 writer.WriteEncodedText(gridView.Caption);
104 writer.WriteEndTag("caption");
105 }
106
107 ArrayList rows = new ArrayList();
108
109 /* ADDED ON 3/7/07, source: http://forums.asp.net/thread/1518559.aspx */
110 /////////////// EmptyDataTemplate ///////////////////////
111 if (gridView.Rows.Count == 0)
112 {
113 //Control[0].Control[0] s/b the EmptyDataTemplate.
114 //if (gridView.HasControls())
115 //{
116 // if (gridView.EmptyDataTemplate.InstantiateIn().Controls[0].HasControls())
117 // {
118 // Control c = gridView.Controls[0].Controls[0];
119 // if (c is GridViewRow)
120 // {
121 // rows.Clear();
122 // rows.Add(c);
123 // WriteRows(writer,
124 // gridView,
125 // new GridViewRowCollection(rows),
126 // "tfoot" );
127 // }
128 // }
129 //}
130 if (this.GetEmptyDataRow(gridView) != null)
131 {
132 rows.Clear();
133 rows.Add(this.GetEmptyDataRow(gridView));
134 WriteRows(writer,
135 gridView,
136 new GridViewRowCollection(rows),
137 "tfoot");
138 }
139 }
140 /* END ADD */
141 else
142 {
143
144 ///////////////////// HEAD /////////////////////////////
145 rows.Clear();
146 if (gridView.ShowHeader && (gridView.HeaderRow != null))
147 {
148 rows.Add(gridView.HeaderRow);
149 WriteRows(writer,
150 gridView,
151 new GridViewRowCollection(rows),
152 "thead" );
153 }
154
155 ///////////////////// FOOT /////////////////////////////
156 rows.Clear();
157 if (gridView.ShowFooter && (gridView.FooterRow != null))
158 {
159 rows.Add(gridView.FooterRow);
160 WriteRows(writer,
161 gridView,
162 new GridViewRowCollection(rows),
163 "tfoot" );
164 }
165
166 ///////////////////// BODY /////////////////////////////
167
168 writer.WriteLine();
169 writer.WriteBeginTag("tbody");
170 writer.Write(HtmlTextWriter.TagRightChar);
171
172 writer.Indent++;
173 writer.WriteLine();
174 writer.WriteBeginTag("tr");
175 writer.Write(HtmlTextWriter.TagRightChar);
176
177 writer.Indent++;
178 writer.WriteLine();
179 writer.WriteBeginTag("td");
180 writer.WriteAttribute("colspan",gridView .Columns.Count.ToString());
181 writer.Write(HtmlTextWriter.TagRightChar);
182
183 writer.Indent++;
184 writer.WriteLine();
185 writer.WriteBeginTag("div");
186 //set attributes to the inner div
187 //writer.AddStyleAttribute(HtmlTextWriterStyle.Overflow, "auto");
188 //if (gridView.Height.Type == UnitType.Percentage)
189 // writer.AddStyleAttribute(HtmlTextWriterStyle.Height, gridView.Height.Value + "%");
190 //else
191 // writer.AddStyleAttribute(HtmlTextWriterStyle.Height, gridView.Height.Value + "px");
192
193 //if (gridView.Width.Type == UnitType.Percentage)
194 // writer.AddStyleAttribute(HtmlTextWriterStyle.Width, gridView.Width.Value + "%");
195 //else
196 // writer.AddStyleAttribute(HtmlTextWriterStyle.Width, gridView.Width.Value + "px");
197 if (gridView.Height.Type == UnitType.Percentage)
198 writer.WriteAttribute("style", "overflow:auto; " +
199 "height:" + gridView.Height.Value + "%;" );
200 else
201 writer.WriteAttribute("style", "overflow:auto; " +
202 "height:" + gridView.Height.Value + "px;" );
203
204 if (gridView.Width.Type == UnitType.Percentage)
205 writer.WriteAttribute("style", "overflow:auto; " +
206 "width:" + gridView.Height.Value + "%;");
207 else
208 writer.WriteAttribute("style", "overflow:auto; " +
209 "width:" + gridView.Height.Value + "px;");
210
211
212 writer.Write(HtmlTextWriter.TagRightChar);
213
214 writer.Indent++;
215
216 WriteRows(writer, gridView, gridView.Rows, "table");
217
218
219 writer.Indent--;
220 writer.WriteLine();
221 writer.WriteEndTag("div");
222
223 writer.Indent--;
224 writer.WriteLine();
225 writer.WriteEndTag("td");
226
227 writer.Indent--;
228 writer.WriteLine();
229 writer.WriteEndTag("tr");
230
231 writer.Indent--;
232 writer.WriteLine();
233 writer.WriteEndTag("tbody");
234
235
236 ////////////////////////////////////////////////////////
237 }
238
239
240 writer.Indent--;
241 writer.WriteLine();
242 writer.WriteEndTag("table");
243
244 WritePagerSection(writer, PagerPosition.Bottom);
245
246 writer.Indent--;
247 writer.WriteLine();
248 }
249 }
250 else
251 {
252 base.RenderContents(writer);
253 }
254 }
255
256 protected GridViewRow GetEmptyDataRow(GridView gridview)
257 {
258 if (gridview.HasControls())
259 if (gridview.Controls[0].HasControls())
260 {
261 foreach (GridViewRow gvr in gridview.Controls[0].Controls)
262 {
263 if (gvr.RowType == DataControlRowType.EmptyDataRow)
264 return gvr;
265 }
266 }
267
268 return null;
269 }
270
271 /// ///////////////////////////////////////////////////////////////////////////////
272 /// PRIVATE
273
274 private void RegisterScripts()
275 {
276 }
277
278 private void WriteRows(HtmlTextWriter writer,
279 GridView gridView,
280 GridViewRowCollection rows,
281 string tableSection)
282 {
283 if (rows.Count > 0)
284 {
285 writer.WriteLine();
286 writer.WriteBeginTag(tableSection);
287
288 writer.Write(HtmlTextWriter.TagRightChar);
289 writer.Indent++;
290
291 foreach (GridViewRow row in rows)
292 {
293 if (!row.Visible)
294 continue;
295
296 writer.WriteLine();
297 writer.WriteBeginTag("tr");
298
299 string className = GetRowClass(gridView, row);
300 if (!String.IsNullOrEmpty(className))
301 {
302 writer.WriteAttribute("class", className);
303 }
304
305 // Uncomment the following block of code if you want to add arbitrary attributes.
306 //switch (row.RowType)
307 //{
308 // case DataControlRowType.Header:
309 // gridView.HeaderStyle.AddAttributesToRender(writer);
310 // break;
311 // case DataControlRowType.Footer:
312 // gridView.FooterStyle.AddAttributesToRender(writer);
313 // break;
314 // default:
315 // break;
316 //}
317
318 writer.Write(HtmlTextWriter.TagRightChar);
319 writer.Indent++;
320
321 foreach (TableCell cell in row.Cells)
322 {
323 DataControlFieldCell fieldCell = cell as DataControlFieldCell;
324 if ((fieldCell != null) && (fieldCell.ContainingField != null))
325 {
326 DataControlField field = fieldCell.ContainingField;
327 if (!field.Visible)
328 {
329 cell.Visible = false;
330 }
331
332 // Apply item style CSS class
333 TableItemStyle itemStyle;
334 switch (row.RowType)
335 {
336 case DataControlRowType.Header:
337 itemStyle = field.HeaderStyle;
338 gridView.HeaderStyle.AddAttributesToRender(writer);
339 break;
340 case DataControlRowType.Footer:
341 itemStyle = field.FooterStyle;
342 gridView.FooterStyle.AddAttributesToRender(writer);
343 break;
344 default:
345 itemStyle = field.ItemStyle;
346 if( row.RowState == DataControlRowState .Alternate )
347 gridView.AlternatingRowStyle.AddAttributesToRender(writer);
348 else
349 gridView.RowStyle.AddAttributesToRender(writer);
350 break;
351 }
352 if (itemStyle != null)
353 {
354 if (!String.IsNullOrEmpty(cell.CssClass))
355 cell.CssClass += " ";
356
357 if(!String.IsNullOrEmpty(itemStyle.CssClass))
358 cell.CssClass += itemStyle.CssClass;
359
360 cell.Width = itemStyle.Width;
361 //cell.HorizontalAlign = itemStyle.HorizontalAlign;
362 }
363 }
364
365 writer.WriteLine();
366 cell.RenderControl(writer);
367 }
368
369 writer.Indent--;
370 writer.WriteLine();
371 writer.WriteEndTag("tr");
372 }
373
374 writer.Indent--;
375 writer.WriteLine();
376 writer.WriteEndTag(tableSection);
377 }
378 }
379
380 /// <summary>
381 /// Gets the row's CSS class.
382 /// </summary>
383 /// <param name="gridView">The grid view.</param>
384 /// <param name="row">The row.</param>
385 /// <returns>The CSS class.</returns>
386 /// <remarks>
387 /// Modified 10/31/2007 by SelArom to create CSS classes for all different row types and states.
388 /// </remarks>
389 private string GetRowClass(GridView gridView, GridViewRow row)
390 {
391 string className = row.CssClass;
392
393 switch (row.RowType)
394 {
395 case DataControlRowType.Header:
396 className = gridView.HeaderRow.CssClass;
397 break;
398 case DataControlRowType.Footer:
399 className = gridView.FooterRow.CssClass;
400 break;
401 case DataControlRowType.EmptyDataRow:
402 className = gridView.EmptyDataRowStyle.CssClass;
403 break;
404 case DataControlRowType.Separator:
405 className = "";
406 break;
407 case DataControlRowType.Pager:
408 className = gridView.PagerStyle.CssClass;
409 break;
410 case DataControlRowType.DataRow:
411 switch (row.RowState)
412 {
413 case DataControlRowState.Normal:
414 className = gridView.RowStyle.CssClass;
415 break;
416 case DataControlRowState.Alternate:
417 className = gridView.AlternatingRowStyle.CssClass;
418 break;
419 case DataControlRowState.Selected | DataControlRowState.Normal:
420 case DataControlRowState.Selected | DataControlRowState.Alternate:
421 className = gridView.AlternatingRowStyle.CssClass;
422 break;
423 case DataControlRowState.Edit | DataControlRowState.Normal:
424 case DataControlRowState.Edit | DataControlRowState.Alternate:
425 className = gridView.EditRowStyle.CssClass;
426 break;
427 case DataControlRowState.Insert:
428 className = gridView.EditRowStyle.CssClass;
429 break;
430 }
431 break;
432 }
433
434 return className.Trim();
435 }
436
437 /// <remarks>
438 /// Patch provided by Wizzard to support PagerTemplate (CodePlex issue #3368).
439 /// </remarks>
440 private void WritePagerSection(HtmlTextWriter writer, PagerPosition pos)
441 {
442 GridView gridView = Control as GridView;
443 if ((gridView != null) &&
444 gridView.AllowPaging &&
445 gridView.PagerSettings.Visible &&
446 (gridView.PageCount > 1) &&
447 ((gridView.PagerSettings.Position == pos) || (gridView.PagerSettings.Position == PagerPosition.TopAndBottom)))
448 {
449 GridViewRow pagerRow = (pos == PagerPosition.Top) ? gridView.TopPagerRow : gridView.BottomPagerRow;
450 string className = GetRowClass(gridView, pagerRow);
451 //className += " AspNet-GridView-" + (pos == PagerPosition.Top ? "Top " : "Bottom ");
452
453 //check for PagerTemplate
454 if (gridView.PagerTemplate != null)
455 {
456 if (gridView.PagerStyle != null)
457 {
458 className += gridView.PagerStyle.CssClass;
459 }
460 className = className.Trim();
461
462 writer.WriteLine();
463 writer.WriteBeginTag("div");
464 writer.WriteAttribute("class", className);
465 writer.Write(HtmlTextWriter.TagRightChar);
466 writer.Indent++;
467
468 if (pagerRow != null)
469 {
470 foreach (TableCell cell in pagerRow.Cells)
471 {
472 foreach (Control ctrl in cell.Controls)
473 {
474 ctrl.RenderControl(writer);
475 }
476 }
477 }
478
479 writer.Indent--;
480 writer.WriteEndTag("div");
481 }
482 else //if not a PagerTemplate
483 {
484 Table innerTable = null;
485 if ((pos == PagerPosition.Top) &&
486 (gridView.TopPagerRow != null) &&
487 (gridView.TopPagerRow.Cells.Count == 1) &&
488 (gridView.TopPagerRow.Cells[0].Controls.Count == 1) &&
489 typeof(Table).IsAssignableFrom(gridView.TopPagerRow.Cells[0].Controls[0].GetType()))
490 {
491 innerTable = gridView.TopPagerRow.Cells[0].Controls[0] as Table;
492 }
493 else if ((pos == PagerPosition.Bottom) &&
494 (gridView.BottomPagerRow != null) &&
495 (gridView.BottomPagerRow.Cells.Count == 1) &&
496 (gridView.BottomPagerRow.Cells[0].Controls.Count == 1) &&
497 typeof(Table).IsAssignableFrom(gridView.BottomPagerRow.Cells[0].Controls[0].GetType()))
498 {
499 innerTable = gridView.BottomPagerRow.Cells[0].Controls[0] as Table;
500 }
501
502 if ((innerTable != null) && (innerTable.Rows.Count == 1))
503 {
504 if (gridView.PagerStyle != null)
505 {
506 className += gridView.PagerStyle.CssClass;
507 }
508 className = className.Trim();
509
510 writer.WriteLine();
511 writer.WriteBeginTag("div");
512 writer.WriteAttribute("class", className);
513 writer.Write(HtmlTextWriter.TagRightChar);
514 writer.Indent++;
515
516 TableRow row = innerTable.Rows[0];
517 foreach (TableCell cell in row.Cells)
518 {
519 foreach (Control ctrl in cell.Controls)
520 {
521 writer.WriteLine();
522 ctrl.RenderControl(writer);
523 }
524 }
525
526 writer.Indent--;
527 writer.WriteLine();
528 writer.WriteEndTag("div");
529 }
530 }
531 }
532 }
533 }
534 }
535Friday, July 25, 2008 4:10 PM
All replies
-
User744840694 posted
Just a dumb question: What's the usage of private void RegisterScripts() method in GridViewAdapter?
Wednesday, August 6, 2008 6:19 PM