How to Implement the Data Table Jquery Plug In for the Grid View Having the Master Page.

Question

0.00/5 (No votes)

See more:

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--------------------

XML

<%@ 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---------------------------

C#

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);

            }

Posted 18-Jul-13 1:04am

santoshkumar413

Add a Solution

Comments

sumit_kapadia 19-Jul-13 3:08am

I cant say what wrong there by looking our code. But it seems that you can simply call
Gv.HeaderRow.TableSection = TableRowSection.TableHeader;
after Bind() function in Page_Load handler instead of Gv_PreRender()

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sumit_kapadia · Answer 1 · 2013-07-18T21:12:00

Master page is not a hurdle it just a damm container. Look code below it is working fine.
css

CSS

.highlight
{
    background-color:Yellow;
}

html

ASP.NET

<asp:gridview id="gvinner" runat="server" autogeneratecolumns="false" allowpaging="false" xmlns:asp="#unknown">
            AllowSorting="false" Width="400px" UseAccessibleHeader="true" CellPadding="0"
            CellSpacing="0">
            <columns>
                <asp:templatefield headertext="cname">
                    <itemtemplate>
                        <%# Eval("cname")%>
                    </itemtemplate>
                </asp:templatefield>
                <asp:templatefield headertext="details">
                    <itemtemplate>
                        <%# Eval("details")%>
                    </itemtemplate>
                </asp:templatefield>
            </columns>
        </asp:gridview>

js in same page's header

JavaScript

<script src="jquery-1.8.3.min.js" type="text/javascript"></script>

    <script src="jquery.dataTables.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {
           
         $('#gvinner').dataTable({
                "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    var settings = this.fnSettings();
                    var str = settings.oPreviousSearch.sSearch;
                    $('td', nRow).each(function(i) {
                        this.innerHTML = aData[i].replace(new RegExp(str, 'i'), function(matched) { return "<span class='highlight'>" + matched + "</span>"; });
                    });
                    return nRow;
                }
            });
        });
    </script>

.cs

protected void Page_Load(object sender, EventArgs e)
{
DataSet ds = Gedata();
gvinner.DataSource = ds;
gvinner.DataBind();
gvinner.HeaderRow.TableSection = TableRowSection.TableHeader;
}