Supposed your Pattern Template has a <td> tag enclosing the BLDDataField control
and that tag uses class='DetailsViewDataContainer" as its style sheet and you want
to customize its style.
<%@ Control Language="C#" Inherits="PeterBlum.DES.BLD.DataFieldsPatternTemplate" Usage="Data" %>
<tr class="DetailsViewDataFieldRow" >
<td class="DetailsViewLabelContainer">
<des:BLDLabel id="BLDLabel1" runat="server" AssociatedControlID="BLDDataField1" />
</td>
<td class="DetailsViewDataContainer">
<des:BLDDataField id="BLDDataField1" runat="server" />
</td>
</tr>
Named Styles allows
you to switch the class to something else from within the Web Form.
Before it can be used, your Pattern Templates need to changed to support Named Styles. Generally
this means replacing the HTML tags with the HtmlTag control.
The HtmlTag control is a universal HTML tag generator. Define a name in its NamedStyle
property. That name will be used by the Web Form developer as they override its settings.
Always specify the HTML tag in its Tag property.
Use its CssClass property for the default style sheet class and Style property of any additional styles.
For any web control, such as the BLDLabel, connect it to the NamedStylesExtender control.
Like with HtmlTag, when the NamedStyle property is matched, its style sheet class (the CssClass property)
and styles are applied to the web control.
<%@ Control Language="C#" Inherits="PeterBlum.DES.BLD.DataFieldsPatternTemplate" Usage="Data" %>
<des:HtmlTag runat="server" Tag="tr" CssClass="DetailsViewDataFieldRow" NamedStyle="DataRow" >
<des:HtmlTag runat="server" Tag="td" CssClass="DetailsViewLabelContainer" NamedStyle="LabelCell">
<des:BLDLabel id="BLDLabel1" runat="server" AssociatedControlID="BLDDataField1" />
<des:NamedStylesExtender ID="BLDLabel1Extender" runat="server"
ControlIDToExtend="BLDLabel1" NamedStyle="LabelControl" />
</des:HtmlTag>
<des:HtmlTag runat="server" Tag="td" CssClass="DetailsViewDataContainer" NamedStyle="DataCell">
<des:BLDDataField id="BLDDataField1" runat="server" />
</des:HtmlTag>
</des:HtmlTag>
Named Styles are also supported by Field Templates. Their primary control - the DataControl property -
always uses the Named Style 'FieldTemplateDataControl'. To support other controls in a Field Template,
HTML tags should be switched to HtmlTag controls
and web controls can have a NamedStylesExtender control.
Within the Web Form, these controls support Named Styles: BLDListView, BLDFormView,
BLDPatternForDataFields, BLDPatternForDataField, and BLDDataField.
Each has a NamedStyles property where you add NamedStyle objects,
which describe the styles that are overridden in an HtmlTag and NamedStylesExtender control.
Here's how to use NamedStyle objects.
- Always assign the NamedStyle property to the name associated with the NamedStyle property on the HtmlTag or
NamedStylesExtender control.
- Override the style sheet class with a name in the CssClass property.
- Merge additional styles with the existing element styles using the Styles property.
- Define a specific DataField that will be changed by specifying its name in its DataField property.
- Your business rules can assign the CategoryAttribute to related DataFields. You can assign
a common style by Category Name in the Categories property.
- When applying security restrictions to the column, the style can be based on the User Role.
<des:BLDListView id="BLDListView1" runat="server" >
<NamedStyles>
<des:NamedStyle Name="FieldTemplateDataControl" DataFields="ProductName" Style="width:300px;" />
<des:NamedStyle Name="DataRow" CssClass="FancyRow" />
<des:NamedStyle Name="DataCell" Categories="Title" Style="font-weight:bold;" />
<des:NamedStyle Name="DataCell" DataFields="Price" CssClass="PriceStyle" />
<des:NamedStyle Name="DataCell" DataFields="Price" Role="Admin" CssClass="PriceStyle Admin" />
</NamedStyles>
</des:BLDListView>
In the next topic, you will
use the BLD Database Explorer with changes applied based on the topics of Phase 4.