将样式表应用于gridview模板域 [英] Apply stylesheet to gridview templatefields
本文介绍了将样式表应用于gridview模板域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个gridview，我想将一些样式表设置应用于gridview中的验证器。以下是我的GV的设置：
I have this gridview and I'd like to apply some stylesheet settings to the validators within the gridview. Here's how my GV is setup:
<table class="table">
<tr>
<td align="center" colspan="4">
<cc1:GroupedGridView ID="grpgrdHeatPumpSPF" runat="server" BackColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" CellSpacing="2"
Width="650" GroupingDepth="3" AutoGenerateColumns="false" PageSize="20" AllowPaging="true"
DataKeyNames="HeatPumpID" OnPageIndexChanging="grpgrdHeatPumpSPF_PageIndexChanging"
OnRowCancelingEdit="grpgrdHeatPumpSPF_RowCancelingEdit" OnRowEditing="grpgrdHeatPumpSPF_RowEditing" OnRowUpdating="grpgrdHeatPumpSPF_RowUpdating" >
<HeaderStyle BackColor="#86C708" Font-Bold="True" ForeColor="White" HorizontalAlign="Left"></HeaderStyle>
<FooterStyle BackColor="White" ForeColor="#000066"></FooterStyle>
<RowStyle BackColor="White" ForeColor="#333333" HorizontalAlign="Left"></RowStyle>
<EditRowStyle BackColor="#cde686" />
<SelectedRowStyle BackColor="#FCADAD" ForeColor="Black" Font-Bold="true" />
<AlternatingRowStyle ForeColor="#284775" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Left"></PagerStyle>
<PagerSettings Mode="NumericFirstLast" />
<EmptyDataRowStyle CssClass="Label_Small_Bold" ForeColor="#C00000" HorizontalAlign="Center" />
<Columns>
<asp:ButtonField CommandName="Select" Visible="false" />
<asp:BoundField DataField="HeatPumpID" HeaderText="HeatPumpID" Visible="False" ReadOnly="True" >
<HeaderStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="ModelNumber" HeaderText="Model Number" Visible="True" ReadOnly="True" >
<HeaderStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:TemplateField HeaderText="FlowTemp">
<ItemTemplate>
<asp:Label ID="lblFlowTemp" runat="server" Text='<%# Bind("FlowTemp") %>'></asp:Label>
</ItemTemplate>
<ControlStyle CssClass="Input_Text_Int" />
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle VerticalAlign="Top" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Heating">
<EditItemTemplate>
<asp:TextBox ID="txtSPFHeating" runat="server" Text='<%# Bind("SPFHeating") %>' CssClass="Input_Text_Int"></asp:TextBox>
<asp:RequiredFieldValidator Display="Dynamic" CssClass="validateGridView" ID="validateBTSPFHeating" runat="server"
ErrorMessage="Please enter SPFHeating (e.g. 3.3)" ControlToValidate="txtSPFHeating"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regExpSPFHeating" runat="server" ControlToValidate="txtSPFHeating" CssClass="validateGridView"
ErrorMessage="Invalid SPFHeating (e.g. 3.3)" ValidationExpression="\d+(\.\d)" Display="Dynamic" SetFocusOnError="True"></asp:RegularExpressionValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblSPFHeating" runat="server" Text='<%# Bind("SPFHeating") %>'></asp:Label>
</ItemTemplate>
<ControlStyle CssClass="Input_Text_Int" />
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle VerticalAlign="Top" />
</asp:TemplateField>
<asp:CommandField ButtonType="Button" ShowEditButton="True" ValidationGroup="vgEdit">
<ControlStyle CssClass="Button_XSmall" />
</asp:CommandField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:Button ID="btnDeleteHeatPumpSPF" CommandArgument='<%# Eval("HeatPumpID","") + ";" + Eval("FlowTemp","") %>' runat="server" OnClientClick="return ConfirmDeletion();" CausesValidation="false"
CommandName="DeletePart" Text="Delete" OnClick="btnDeleteHeatPumpSPF_Click" />
</ItemTemplate>
<ControlStyle CssClass="Label_Small" />
</asp:TemplateField>
</Columns>
</cc1:GroupedGridView>
</td>
</tr>
我的CSS如下：
and my CSS is as follows:
table td
{
padding: 2px;
}
table.center {
width:90%;
margin-left:5%;
margin-right:5%;
}
.hideGridColumn
{
display:none;
}
.table td label{
float: left;
width:146px;
margin-bottom:5px;
margin-top:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: Black;
line-height: 17px;
text-align: right;
}
.table td labelmid{
float: left;
width:205px;
margin-bottom:5px;
margin-top:5px;
text-align: right;
}
.table td labelwide{
float: left;
width:230px;
margin-bottom:5px;
margin-top:5px;
text-align: right;
}
.table td.control{
width:310px;
margin-bottom:5px;
vertical-align:middle;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: Black;
line-height: 17px;
}
.table td.controlmed{
width:200px;
margin-bottom:5px;
vertical-align:middle;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: Black;
line-height: 17px;
}
.table td input[type=text],input[type=password]{
float: left;
border:#92d307 solid 1px;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;
color:#000000;
}
.table td select{
float: left;
border:#92d307 solid 1px;
height:32px;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;
color:#000000;
width:270px;
}
.Input_Text_Int{
width:40px;
margin-bottom:10px;
vertical-align:middle;
padding-right:10px;
}
.Input_Text_Short
{
width:100px;
margin-bottom:10px;
vertical-align:middle;
padding-right:10px;
}
.Input_Text_Med
{
width:175px;
margin-bottom:10px;
vertical-align:middle;
padding-right:10px;
}
.Input_Text_Long
{
width:250px;
margin-bottom:10px;
vertical-align:middle;
padding-right:10px;
}
validateGridView
{
background: url(../images/wrongIconGV.png) left 5px no-repeat;
float: left;
font-family: Arial, Helvetica, sans-serif;
color: #FF5B5B;
font-size:8px;
}
模板字段应用Input_Text_Int设置，但不应用validateGridView设置。任何人都可以帮助我解决这个问题，所以验证格式如CSS中所指定的那样。
The template field is applying the Input_Text_Int settings but not the validateGridView settings. Can anyone help me to fix this so the validates are formatted as specified in the CSS?
推荐答案
CssClass="validateGridView"
这是一个类，所以我认为你必须添加一个点你的CSS像这样
It is a class so I think you have to add a dot in your css like this
.validateGridView
{
background: url(../images/wrongIconGV.png) left 5px no-repeat;
float: left;
font-family: Arial, Helvetica, sans-serif;
color: #FF5B5B;
font-size:8px;
}
这篇关于将样式表应用于gridview模板域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
