Dynamically Adding Controls to Table
This example illustrates a technique for creating Controls and placing them in
a simple table dynamically, during the time each row is drawn.
The scenario is that you want to build a simple Employee Directory,
showing a grid of People. For each person, you want to show their picture
and an Edit button - with the edit button leading to the employee editing
Take a look at the example. You'll see exactly this type of
functionality. Then glance through the code; you'll be able to learn
something from each column, let's examine them one-by-one.
Full Name: We are using a callback to generate the html of the column.
Since we are generating HTML, we must turn of HtmlEntities for the column, or we will see
the HTML code appear in the column, and not the text formatted by the HTML.
Image: Inside the renderImage() method, we are creating ImageControl controls.
However, since we may be drawing the same row many times, we need to be careful to only create the control
once. To do this, we generate a unique control id using the data object's id and a constant string,
and then we check whether the QControl with the pre-formed ID has already
been created. If so, we don't try to re-create it — instead, we just ask it to render again.
This is good for situations when you have to re-render the datagrid (because of an Ajax
refresh, for example). If that control doesn't exist yet — and it won't the first time the datagrid is
rendered — we create the QImageControl, and give it the right Control ID.
The Edit Column: i.e. the column with a custom Edit Button — is quite
similar in its structure to the Image column. Note that we are using an
ActionParameter to help the click handler determine which row the user clicked on.