Hi,
First of all - love the concept. Next; it's not quite right yet ;)
The CSS friendly control adapter is causing two problems with DetailsView
1) Fields that should not be rendered (as they are marked as InsertVisible="False") are being rendered
2) The markup for the CSS version is bigger than the table version!
For the following details view (bound to an ObjectDataSource) note that three of the fields should not be visible (only Name and Description should be rendered along with the Insert/Cancel command buttons)
<asp:DetailsView ID="ctrlAddProject" runat="server" CssClass="addProject" GridLines="None" DefaultMode="Insert" DataSourceID="dsProjects" AutoGenerateRows="False">
<Fields>
<asp:BoundField InsertVisible="False" DataField="ProjectID" ReadOnly="True" />
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:BoundField InsertVisible="False" DataField="CreateDate" ReadOnly="True" />
<asp:BoundField HeaderText="Description" DataField="Description" />
<asp:BoundField InsertVisible="False" DataField="SecurityActionID" ReadOnly="True" />
<asp:CommandField ShowInsertButton="True" />
</Fields>
</asp:DetailsView>
The original unaltered ASP.NET control produced the following html (Note, there are only two data rows; Name and Description; and one row for the Insert/Cancel buttons)
<table class="addProject" cellspacing="0" border="0" id="ctl00_ContentPlaceHolder1_AnalysisPlan1_ctrlAddProject" style="border-collapse:collapse;">
<tr>
<td>Name</td>
<td><input name="ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject$ctl02" type="text" title="Name" /></td>
</tr>
<tr>
<td>Description</td>
<td><input name="ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject$ctl04" type="text" title="Description" /></td>
</tr>
<tr>
<td colspan="2"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject$ctl06','')">Insert</a> <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject','Cancel$-1')">Cancel</a></td>
</tr>
</table>
After configuring the CSS friendly control adapter...(Note the hidden rows are generating markup in this version - the effect of which is to have a bunch of unwanted text input boxes littered around)
<div class="AspNet-DetailsView">
<div class="AspNet-DetailsView-Header">
</div>
<div class="AspNet-DetailsView-Data">
<ul>
<li>
<span class="AspNet-DetailsView-Name"> </span><span class="AspNet-DetailsView-Value"><input name="ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject$ctl01" type="text" /></span>
</li>
<li class="AspNet-DetailsView-Even">
<span class="AspNet-DetailsView-Name">Name</span><span class="AspNet-DetailsView-Value"><input name="ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject$ctl02" type="text" title="Name" /></span>
</li>
<li>
<span class="AspNet-DetailsView-Name"> </span><span class="AspNet-DetailsView-Value"><input name="ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject$ctl03" type="text" /></span>
</li>
<li class="AspNet-DetailsView-Even">
<span class="AspNet-DetailsView-Name">Description</span><span class="AspNet-DetailsView-Value"><input name="ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject$ctl04" type="text" title="Description" /></span>
</li>
<li>
<span class="AspNet-DetailsView-Name"> </span><span class="AspNet-DetailsView-Value"><input name="ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject$ctl05" type="text" /></span>
</li>
<li class="AspNet-DetailsView-Even">
<span class="AspNet-DetailsView-Name"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject$ctl06','')">Insert</a> <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AnalysisPlan1$ctrlAddProject','Cancel$-1')">Cancel</a></span>
</li>
</ul>
</div>
<div class="AspNet-DetailsView-Footer">
</div>
</div>
On my second point; the CSS version is bigger than the table version because;
1) The unwanted rows are being rendered (hopefully this will be fixed in the next release)
2) A Header and a Footer div are being rendered. There's nothing in them so this needs to be optimised away.
3) Overuse of span's and class attributes. A better version of a row above might look like
<li>
<label for="name">Name:</label>
<input type="text" id="name" />
</li>
Better because it uses tags with semantic meaning (label instead of span), and less markup because it should be possible to write a CSS rule that selects the label and the textbox by position rather than having to litter the whole markup with class attributes. Something akin to this might do the job:
.AspNet-DetailsView li label
{
*/ label styling here */
}
.AspNet-DetailsView li input.text
{
*/ text box styling here */
}
The beauty of the new extenders is that individuals can fix their own markup....but it would be nice if the out-of-the-box versions rendered:
a) semantic markup where possible rather than the more generic divs and spans
b) the minimum markup needed to do the job and use css rules as they are supposed to be used
as a good example to all.
Great idea guys and it will be sweet when the examples are 'tight'
Brian.