DOT NET SOLUTIONS: Jquery Fixed Header Scrollable GridView in asp.net

Friday 6 December 2013

Jquery Fixed Header Scrollable GridView in asp.net

Output:

Aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

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

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

<script type="text/javascript" language="javascript">

    $(document).ready(function () {

        $('#<%=fixedHeaderScrollableGridView.ClientID %>').Scrollable();

    }

)

</script>



<style type="text/css">

.normal

{

       background-color:white;

}

.highlight

{

       background-color:#ccffff;

}

</style>

</head>

<body>

    <form id="form1" runat="server">

    <%--<asp:GridView ID="fixedHeaderScrollableGridView" runat="server"

              DataSourceID="SqlDataSource2"

              AutoGenerateColumns="False"



                DataKeyNames="name"

              AllowPaging="True">

<Columns>

<asp:BoundField DataField="name" HeaderText="name" SortExpression="name"/>

<asp:BoundField DataField="email" HeaderText="email" SortExpression="email" />

<asp:BoundField DataField="mess" HeaderText="mess" SortExpression="mess" />

</Columns>

</asp:GridView>--%>

    <%--<asp:SqlDataSource ID="SqlDataSource2" runat="server"

        ConnectionString="<%$ ConnectionStrings:ramConnectionString %>"

        SelectCommand="SELECT [name], [email], [mess] FROM [savedata]">

    </asp:SqlDataSource>--%>



    <div>





        <asp:GridView ID="fixedHeaderScrollableGridView" AutoGenerateColumns="False"

            DataKeyNames="name" runat="server"

            onrowcreated="fixedHeaderScrollableGridView_RowCreated">

            <Columns>

                <asp:TemplateField HeaderText="Name" HeaderStyle-BackColor="#FF6600">

                    <ItemTemplate>

                        <asp:Label ID="Label1" runat="server" Text='<%#Eval("name") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField >

                 <asp:TemplateField HeaderText="Email" HeaderStyle-BackColor="#FF6600">

                    <ItemTemplate>

                        <asp:Label ID="Label1" runat="server" Text='<%#Eval("email") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                 <asp:TemplateField HeaderText="Message" HeaderStyle-BackColor="#FF6600">

                    <ItemTemplate>

                        <asp:Label ID="Label1" runat="server" Text='<%#Eval("mess") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>



    </div>





    </form>

</body>

</html>

Aspx.cs Page

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page

{

SqlConnection con = new SqlConnection("Data Source=TARUNKUMAR-PC\\SA;Initial Catalog=ram;Integrated Security=True");

SqlCommand cmd;

SqlDataAdapter da;

DataTable dt;

protected void Page_Load(object sender, EventArgs e)

{

da = new SqlDataAdapter("select * from savedata", con);

dt = new DataTable();

da.Fill(dt);

//DataList1.DataSource = dt;

//DataList1.DataBind();

fixedHeaderScrollableGridView.DataSource = dt;

fixedHeaderScrollableGridView.DataBind();

}

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Attributes.Add("onmouseover", "this.className='highlight'");

e.Row.Attributes.Add("onmouseout", "this.className='normal'");

}

}

protected void fixedHeaderScrollableGridView_RowCreated(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Attributes.Add("onmouseover", "this.className='highlight'");

e.Row.Attributes.Add("onmouseout", "this.className='normal'");

}

}

}

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)