Enhancing the Sample Application

It's time to add some code to the sample application, specifically the ability to store a two-dimensional array of cells . Once we've added support for the cell array, we can also draw the grid control.

To add support for the cell array:

1. Add the definition of the two-dimensional cell array from Figure 9.30 inside the CodeGridWeb class.

   Figure 9.30 _cells is a two-dimensional array of the Cell class. We're going to create the array in a later function.

    Cell[,] _cells 

2. Next add a function to create the grid cells ( Figure 9.31 ). The CreateGrid function allocates the two-dimensional array based on the number of rows and number of columns .

   Figure 9.31 CreateGrid actually allocates the array based on the number of rows and columns. The Cell class's constructor has three parameters, the first is a pointer to the creator of the object, the second is the row number, and the third is the column number.

    public void CreateGrid() {    //allocate cells    _cells = new Cell[_rows,_cols];    for (int r = 0; r < _rows; r++)       for(int c = 0; c < _cols; c++)          _cells[r,c] = new Cell(this,r,c); } 

3. With this function in place we can modify the Rows and Columns properties so that every time the dimensions change, we recreate the grid ( Figure 9.32 ).

   Figure 9.32 Whenever the Row or the Column changes, we need to recreate the cell array. Right now, recreating the array doesn't preserve the old data. It would be great if it did, but it would also be difficult to implement.

    [Category("Appearance"), DefaultValue(10)] public int Rows {    get    {       return _rows;    }    set    {       _rows = value;  CreateGrid();  } } [Category("Appearance"), DefaultValue(5)] public int Columns {    get    {       return _cols;    }    set    {       _cols = value;  CreateGrid();  } } 

4. We also have to add a constructor, for two reasons. First, because some information, such as the dimensions and the size of our grid, can be drawn by the base class. So we need to call the base constructor and tell it what kind of control we are. Second, because we need to call CreateGrid with the default dimensions as soon as the CodeGridWeb is created ( Figure 9.33 ).

   Figure 9.33 The base class WebControl takes care of some of the rendering of our control in HTML, specifically the part of maintaining the position and size of instances of our control. However, for the base class to do its job, it needs to know what type of object we are. We pass that information through the constructor.

    public CodeGridWeb() :  base(HtmlTextWriterTag.Table)  {  CreateGrid();  } 

5. The next step is to draw the grid, which we do in two stages. First of all, grid controls are tables in HTML. As you saw in the Introduction, tables in HTML are represented as <table> <tr><td></td></tr> <tr><td></td></tr> </table> Where <tr> represents a row and <td> represents a column. The outer part of the grid, the tags that have <table> and </table>, is going to be drawn by our base class (Microsoft takes care of that). The inner part is up to us. So first you add the code in Figure 9.34 to draw the inner part of the grid.

   Figure 9.34 DrawGrid optimizes the string concatenations by using a StringBuilder object instead of plain strings. The function builds the HTML for the table using <tr> for row indicators and <td> for column indicators. It also uses the Text that's stored in each Cell object.

    public string DrawGrid() {    System.Text.StringBuilder sb = new    System.Text.StringBuilder(1024);    for (int r = 0; r < _rows; r++)    {       sb.Append("<tr>");       for(int c = 0; c < _cols; c++)       {          sb.Append(@"<td STYLE=""border: 'thin black solid' "" WIDTH=50 HEIGHT=50>");          sb.Append(_cells[r,c].Text);          sb.Append("</td>");       }       sb.Append("</tr>");    }    return sb.ToString(); } 

6. Then modify the Render function so that it draws the outer part of the grid ( Figure 9.35 ).

   Figure 9.35 The Render function gets triggered whenever ASP.NET needs to redraw your control. The base takes care of drawing the <table> </table> portion of our grid, and we then provide the HTML for the inner portion.

    protected override void Render (HtmlTextWriter output) {    output.AddStyleAttribute(       HtmlTextWriterStyle.BorderCollapse,       "collapse");    base.RenderBeginTag(output);    output.Write(DrawGrid());    base.RenderEndTag(output); } 

Tip

• Except for a few extra features we're going to add to the grid, the grid is now fully functional. In the later sections we'll enhance it, and then at the end of the chapter we'll create a test project to view the end result.