Protoshare Lesson #3 (V6) Adjust Data Grid column widths

The data grid that comes in the stencil library of Protoshare is a basic grid with limited capability to be edited.   I have learned to accept it’s limitations in order to get prototypes out the door quickly.  I have experimented to see how far you could push the grid to do what I wanted.  I will post a few lessons learned about grids in this blog.

Often I will start a grid control and when it displays I have a Column with Yes/No in it that is too wide and I’d like to shrink the width.

Start with getting the grid from the stencil library in the bottom of the stencil library named RIA for Rich Internet Applications.


Then Click-and-Drag the grid view at the top of the window onto your project page.


This will result in a bare data grid being placed on your page.


By double-clicking within the grid you will be able the edit the contents of the grid.


So go into the Grid and change the headings and the data elements.  The last column is a hyperlink column that I wanted and when it is clicked it would go to the Editing window for this grid.  Notice the (Enrolled) column has ( X) in it.


Now when you test your page by pressing ( T) or the (Test) button you will see the grid then you stretch the grid  to fit into the space you wanted.


Now you can use the Inspector to change the property of your grid and stretch all the columns so they are more equal and get rid of the large width first column, just check the (Column Stretch) property.


Now the grid look a little better but it still needs some work.  The (Beneficiary ID), (Enrolled) and (Enrolled Date) columns are way too wide.


So return to the grid in edit mode by (esc) out of test mode.

  1. Place mouse in the header of the column you want to adjust
  2. Right click the mouse (in this example it is the Beneficiary ID column)
  3. Scroll down to (Cell)
  4. Scroll to (Table Cell Properties)
  5. Left click the mouse


This will open an editing window for changing the properties of the Cell, we will need to tell it that we want to change all the cells in this column (Scope) , in this example it is the first column (Beneficiary ID)


We need to set the some of the properties of the cell

  1. Set Scope to (Column) this indicates all columns
  2. Set the width to (100) you may need to play with this value as it is in pixels which is hard to visualize but I found a 10 digit number and 100 px is a good match.
  3. Set the drill down on the bottom to (Update all cells in column)


Which results in the grid adjusting itself to look like.  Nice.


However the (Enrolled) column is still way too wide, I’ll go back to edit the grid, place my mouse over the (Enrolled) Heading in the grid and left-click, this time I’ll try 50 for a width.


Much nicer, now I’ll adjust the (Enrolled Date) this time I will try 70 for a width and I’m hoping to get the Heading to wrap and take up 2 lines.


Looking good.  You could do the same to the (Action) column by why bother it’s the last column and changing it width won’t make it look much different.  But I’m picky I want the ( X)  in the (Enrolled) column to be centered in the column.

So we go back to edit the Alignment of the Cell


And look at it in Grid Edit mode, doesn’t that look nice?


And now when we look at it in test mode…. what happened?   Good question. 


If you try the other alignment option in the Grid Table Cell edit, you will find it behaves the same.  The Enrolled column does not center.


What is the solution?  Well it seems that Rich Internet Application can be written to ignore some HTML markups including (Alignment center) and more including color.

There are some limits to what you can do with the Protoshare RIA components. Do like I do and learn to accept the limits and work within them.  Remember this is a prototype, keep telling yourself that.  Perfect is the enemy of “Good enough”.

If some Protoshare user out there figures out a way to do this send me a message  and I will publish it.