locked
CSS-friendly scrollable GridView RRS feed

  • 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 }
    535

     

    Friday, 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