Hi every one I am using the Data Table Jquery Plug In, to the Grid View Having master table but the Data Table is not rendering the grid view in Page.
Please Let me know how to render the grid view and also how to perform search using the Jquery Data Table.
-------------------This Is the Design Source Code--------------------
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DataGrid.aspx.cs" Inherits="Datatable.DataGrid" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="Datatables/media/js/jquery.js" type="text/javascript"></script>
<script src="Datatables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="Datatables/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="Datatables/media/js/GridviewFix.js" type="text/javascript"></script>
<link href="Datatables/media/css/demo_page.css" rel="stylesheet" type="text/css" />
<link href="Datatables/media/css/demo_table.css" rel="stylesheet" type="text/css" />
<link href="Datatables/media/css/demo_table_jui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('#<%=Gv.ClientID %>').GridviewFix().dataTable({
"sScrollY": 200,
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
</script>
<asp:GridView ID="Gv" runat="server" AutoGenerateColumns="false"
ClientIDMode="Static" >
<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>
<asp:Label ID="lblCss" runat="server" Text='<%#Bind("CSSgrade") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Content>
-------------------------------This is the Cs Page Code---------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Datatable
{
public partial class DataGrid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Fillgrid();
}
}
public void Fillgrid()
{
List<Oslist> LstOs = new List<Oslist>();
LstOs.Add(new Oslist { Renderingengine = "Trident", Browser = "Internet Explorer 4.0", Platform = "Win 95+", CSSgrade = "4", Engineversion = "A" });
LstOs.Add(new Oslist { Renderingengine = "Trident", Browser = "Internet Explorer 5.0", Platform = "Win 95+", CSSgrade = "5", Engineversion = "C" });
LstOs.Add(new Oslist { Renderingengine = "Trident", Browser = "Internet Explorer 5.5", Platform = "Win 95+", CSSgrade = "5.5", Engineversion = "A" });
LstOs.Add(new Oslist { Renderingengine = "Trident", Browser = "Internet Explorer 6.0", Platform = "Win 95+", CSSgrade = "6", Engineversion = "A" });
LstOs.Add(new Oslist { Renderingengine = "Gecko", Browser = "Firefox 1.0", Platform = "Win 98+ / OSX.2+", CSSgrade = "1.7", Engineversion = "A" });
LstOs.Add(new Oslist { Renderingengine = "Gecko", Browser = "Firefox 1.5", Platform = "Win 98+ / OSX.2+", CSSgrade = "1.8", Engineversion = "A" });
Gv.DataSource = LstOs;
Gv.DataBind();
}
public class Oslist
{
public string CSSgrade { get; set; }
public string Renderingengine { get; set; }
public string Browser { get; set; }
public string Platform { get; set; }
public string Engineversion { get; set; }
}
public static void MakeAccessible(GridView grid)
{
if (grid.Rows.Count > 0) return;
grid.UseAccessibleHeader = true;
grid.HeaderRow.TableSection = TableRowSection.TableHeader;
if (grid.ShowFooter)
grid.FooterRow.TableSection = TableRowSection.TableFooter;
}
protected void Gv_PreRender(object sender, EventArgs e)
{
base.OnPreRender(e);
MakeAccessible(Gv);
}