0

I have a table structure in the HTML which I want to convert that into the Gridview with proper CSS class and the design.

But when I convert it into my gridview and apply the CSS class, the gridview's boundfield does not take the CSS. Please see the HTML code and my gridview.

HTML for the 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">
              &nbsp;
                </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">&lt;&lt;</button> &nbsp; Page &nbsp;<input class="ui-pg-input form-control-page" type="text" size="2" maxlength="7" value="0" role="textbox">&nbsp; of &nbsp;5 &nbsp; &nbsp;<button type="button" class="btn btn-default" id="prv-nxt">&gt;&gt;</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

Applied the HTML on 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:-

HTML Grid Image

2Converted in actual gridview:-

Actual Gridview

Improve this question

1 Answer 1

Reset to default
1

Instead of CssClass attribute try only css to assign class.

e.g.

<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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Can I add same as class to the boundfield also ? I added it but there was no major chage.
The header part is not taking the class till the textbox with the way you suggested. :( Also the boundfield is also not taking the class
There is an alternative to add css class to boundfields via RowDataBound event of gridview. For reference: RowDataBound
If i give you my teamviewer details can you look at that and help me out ? As I am not that master in CSS part

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.