Hi Every One, I have requirement where the one of the grid column should be displayed as second row and i need to apply data table search functionality.
but data table is not working for this scenario.
I am getting error like "Uncaught TypeError: Cannot read property 'className' of undefined " in console of the chrome.
Please any one can help me to add data table to the grid controle of the asp.net.
---------This Is ASp Code------------------------
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var yourTable = $('#<%=Gv.ClientID %>').dataTable({
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3]}]
});
});
</script>
<asp:GridView ID="Gv" runat="server" AutoGenerateColumns="false" ClientIDMode="Static"
GridLines="Both">
<Columns>
<asp:TemplateField HeaderText="Rendering engine">
<ItemTemplate>
<asp:Label ID="lblRender" runat="server" Text='<% #Eval("Renderingengine")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Browser">
<ItemTemplate>
<asp:Label ID="lblBrowser" runat="server" Text='<%#Eval("Browser") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Platform">
<ItemTemplate>
<asp:Label ID="lblPlatform" runat="server" Text='<%#Eval("Platform") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Engine version">
<ItemTemplate>
<asp:Label ID="lblEngine" runat="server" Text='<%#Eval("Engineversion") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CSS grade">
<ItemTemplate>
<tr>
<td colspan="4">
</td>
<td>
<asp:Label ID="lblCss" runat="server" Text='<%#Bind("CSSgrade") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
-------------After Rendering------------------------
<table cellspacing="0" rules="all" border="1" id="Gv" style="border-collapse:collapse;">
<thead>
<tr>
<th scope="col">Rendering engine</th><th scope="col">Browser</th><th scope="col">Platform</th><th scope="col">Engine version</th><th scope="col">CSS grade</th>
</tr>
</thead><tbody>
<tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 4.0</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">4</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 5.0</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">C</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">5</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 5.5</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">5.5</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Trident</span>
</td><td>
<span id="lblBrowser">Internet Explorer 6.0</span>
</td><td>
<span id="lblPlatform">Win 95+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">6</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Gecko</span>
</td><td>
<span id="lblBrowser">Firefox 1.0</span>
</td><td>
<span id="lblPlatform">Win 98+ / OSX.2+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">1.7</span>
</td>
</tr>
</td>
</tr><tr>
<td>
<span id="lblRender">Gecko</span>
</td><td>
<span id="lblBrowser">Firefox 1.5</span>
</td><td>
<span id="lblPlatform">Win 98+ / OSX.2+</span>
</td><td>
<span id="lblEngine">A</span>
</td><td>
<tr>
<td colspan="4">
</td>
<td>
<span id="lblCss">1.8</span>
</td>
</tr>
</td>
</tr>
</tbody><tfoot>
</tfoot>
</table>