将CSS类应用于gridview无法正常工作
[英]Applying CSS class to the gridview not working
问题描述
I have a table structure in the HTML which I want to convert that into the Gridview with proper CSS class and the design. 
我在HTML中有一个表结构，我想通过适当的CSS类和设计将其转换为Gridview。
But when I convert it into my gridview and apply the CSS class, the gridview's boundfield does not take the CSS. 但是，当我将其转换为gridview并应用CSS类时，gridview的boundfield不会采用CSS。 Please see the HTML code and my gridview. 请查看HTML代码和我的gridview。
HTML for the Gridview Gridview的HTML
<table width="100%" border="1" style="border: 1px solid #E5E5E5;" cellpadding="0" cellspacing="0" class="hoverTable">
<tr>
<td class="k-grid td">Page Title</td>
<td class="k-grid td">Page Description</td>
<td class="k-grid td">Meta Keywords</td>
<td class="k-grid td">Meta Description</td>
<td class="k-grid td">Active</td>
<td class="k-grid td">
Action
</td>
</tr>
<tr>
<td class="k-grid td"><input type="text" class="form-control" name="" id="" value="" placeholder="Title"></td>
<td class="k-grid td"><input type="text" class="form-control" name="" id="" value="" placeholder="Description"></td>
<td class="k-grid td"><input type="text" class="form-control" name="" id="" value="" placeholder="Meta Keywords"></td>
<td class="k-grid td"><input type="text" class="form-control" name="" id="" value="" placeholder="Meta Description"></td>
<td class="k-grid td">
<select class="selectpicker form-control-drp wd" style="width: 100%">
<option role="option" value="10">Active</option>
<option role="option" value="20" selected="selected">Inctive</option>
</select>
</td>
<td class="k-grid td">
</td>
</tr>
<tr>
<td class="k-grid ">Page Title</td>
<td class="k-grid ">Page Description</td>
<td class="k-grid ">Meta Keywords</td>
<td class="k-grid">Meta Description</td>
<td class="k-grid">Active</td>
<td class="k-grid" width='7%'>
<a class=" k-button-icontext k-grid-edit" href="#" title="Edit this row"><img src="images/edit.png" class="img-hvr1" width="15" height="15"/></a>
<a class="k-button-icontext k-grid-delete" href="#" title="Delete this row"><img src="images/delete.png" width="15" height="15"/> </a>
</td>
</tr>
<tr class="k-alt ui-state-highlight">
<td class="k-grid ">Page Title</td>
<td class="k-grid ">Page Description</td>
<td class="k-grid ">Meta Keywords</td>
<td class="k-grid">Meta Description</td>
<td class="k-grid">Active</td>
<td class="k-grid">
<a class=" k-button-icontext k-grid-edit" href="#" title="Edit this row"><span><img src="images/edit.png" class="img-hvr1" width="15" height="15"/></span></a>
<a class="k-button-icontext k-grid-delete" href="#" title="Delete this row"><img src="images/delete.png" width="15" height="15"/> </a>
</td>
</tr>
<tr>
<td class="k-grid ">Page Title</td>
<td class="k-grid ">Page Description</td>
<td class="k-grid ">Meta Keywords</td>
<td class="k-grid">Meta Description</td>
<td class="k-grid">Active</td>
<td class="k-grid">
<a class=" k-button-icontext k-grid-edit" href="#" title="Edit this row"><span><img src="images/edit.png" class="img-hvr1" width="15" height="15"/></span></a>
<a class="k-button-icontext k-grid-delete" href="#" title="Delete this row"><img src="images/delete.png" width="15" height="15"/> </a>
</td>
</tr>
<tr class="k-alt">
<td class="k-grid ">Page Title</td>
<td class="k-grid ">Page Description</td>
<td class="k-grid ">Meta Keywords</td>
<td class="k-grid">Meta Description</td>
<td class="k-grid">Active</td>
<td class="k-grid">
<a class=" k-button-icontext k-grid-edit" href="#" title="Edit this row"><span><img src="images/edit.png" class="img-hvr1" width="15" height="15"/></span></a>
<a class="k-button-icontext k-grid-delete" href="#" title="Delete this row"><img src="images/delete.png" width="15" height="15"/> </a>
</td>
</tr>
<tr class="k-grid td">
<td colspan="9" class="k-grid td">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="hoverTable_tbl">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<center>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td class="txtpara"><button type="button" class="btn btn-default" id="prv-nxt"><<</button> Page <input class="ui-pg-input form-control-page" type="text" size="2" maxlength="7" value="0" role="textbox"> of 5 <button type="button" class="btn btn-default" id="prv-nxt">>></button></td>
<td>
<select class="selectpicker form-control-drp" role="listbox"><option role="option" value="10">10</option><option role="option" value="20" selected="selected">20</option><option role="option" value="30">30</option><option role="option" value="99999">All</option></select></td>
</tr>
</tbody></table>
</center>
</td>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td class="txtpara-right">View 1 - 20 of 88</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And when I same apply to the gridview boundfield it doesn not work, guys please help 当我同样适用于gridview边界域时，它不起作用，伙计们请帮忙
Applied the HTML on gridview:- 将HTML应用于gridview：-
<asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3"
AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" CssClass="hoverTable" EmptyDataText="No Records Found"
OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting"
PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating"
OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit">
<AlternatingRowStyle CssClass="k-alt" BackColor="#f5f5f5" />
<Columns>
<asp:TemplateField HeaderText="Select" HeaderStyle-Width="5%" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType="Image" ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png">
<ControlStyle Height="20px" Width="20px"></ControlStyle>
</asp:CommandField>
</Columns>
</asp:GridView>
See the images for your ref:- 查看图片供您参考：-
1)HTML table gridview:- 1）HTML表格GridView：
2Converted in actual gridview:- 2在实际的GridView中转换：
1 个解决方案
解决方案1
1 2014-12-12 06:06:31
Instead of CssClass attribute try only css to assign class. 代替CssClass属性尝试仅使用CSS来分配类。
eg 例如
<asp:GridView ID="grdCSRPageData" runat="server" class="hoverTable" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3" AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" EmptyDataText="No Records Found" OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting" PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating" OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit"> </asp:GridView
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS不适用于Gridview的div - CSS is not applying to div with Gridview
将CSS类应用于文本 - Applying CSS class to text
CSS类不适用于div - CSS class is not applying to div
CSS类不适用于节点 - CSS class not applying in the node
CSS不适用于<span>类</span> - CSS not applying to <span> class
不应用CSS类？ - Not applying CSS class?
CSS 样式不适用于 class - CSS styling not applying to class
CSS类适用，但不适用id - CSS class applying but not id
CSS class 不应用样式 - CSS class not applying style
css类不应用样式，但id正在应用样式？ - css class not applying styling, but id is applying styling?
相关标签