0
У меня есть структура таблицы в HTML, которую я хочу преобразовать в Gridview с соответствующим классом CSS и дизайном.Применение класса Css к gridview не работает
Но когда я преобразовываю его в мое gridview и применяю класс CSS, привязанное поле gridview не принимает CSS. Посмотрите код HTML и мой gridview. Пожалуйста, помогите мне, это необходимо и срочно
HTML для Gridview
<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>
И когда я же обратиться к GridView BoundField это Безразлично не работает, ребята, пожалуйста, помогите
Применялись 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>
Смотреть изображения для вашего исх: -
1) HTML таблицы GridView: -
2Converted в фактическом GridView: -
дайте мне знать, если вам нужно что-нибудь еще.
Ребята, дайте мне знать, где я иду не так. Любая помощь будет заметна.
Могу ли я добавить так же, как 'class' к BoundField также? Я добавил его, но не было большой чести. –
да. вы можете добавить любое поле управления/границы. – Ashish
Часть заголовка не принимает класс до текстового поля так, как вы предлагали. :(Также связанное поле также не принимает класс –