JDataGrid plugin for DNA jQuery Web Control

转载：http://dj.codeplex.com/Thread/View.aspx?ThreadId=66498

Today I tried to add a webcontrol into your DNA jQuery Web Control project.

As a jQuery beginner, I am not professional in javascript especially jQuery script. U has integrated jQuery to asp.net webcontrol with a smart convert, it's very amazing.So I download your project code and read them, I have spent all the evening in your project sourcecode last night.And I found the ClientScriptManager class is very powerful. Since there is a jQuery plugin named 'tablePagination' I have used in our project last month. U could down load this script here.

It could used for .net gridview control. To use this jQuery plug in for .net gridview, u need do things :

1.add js reference : jquery.core.js. jquery.tablePagination.0.1.js

2. add javascript for document ready event: $('table').tablePagination({});

First I'd like show you how to the JdataGrid use in .net webpage:

 <asp:ScriptManager  runat="server"></asp:ScriptManager>    <DotNetAge:JpageGrid  runat="server" AutoGenerateColumns="False"         DataKeyNames="UserID" DataSource         UseAccessibleHeader="True" BorderColor="White" Border         onprerender="JpageGrid1_PreRender">        <Columns>            <asp:BoundField DataField="UserID" HeaderText="UserID" InsertVisible="False"                 ReadOnly="True" SortExpression="UserID" />            <asp:BoundField DataField="FirstName" HeaderText="FirstName"                 SortExpression="FirstName" />            <asp:BoundField DataField="Username" HeaderText="Username"                 SortExpression="Username" />            <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />        </Columns>    </DotNetAge:JpageGrid>    <asp:SqlDataSource  runat="server"         ConnectionString="<%$ ConnectionStrings:senetConnectionString %>"         SelectCommand="SELECT [UserID], [FirstName], [Username], [Email] FROM [Users]">    </asp:SqlDataSource>

Second: how I integrated this plugin :

a. Add this script under plugin folder in jQuery project , rebuild this project.

b. Add a new class named JdataGrid.cs under DNA.UI project:,the code:

///  Copyright (c) 2009 Ray Liang (http://www.dotnetage.com)///  Dual licensed under the MIT and GPL licenses:///  http://www.opensource.org/licenses/mit-license.php///  http://www.gnu.org/licenses/gpl.htmlusing System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Security.Permissions;using System.ComponentModel;namespace DNA.UI.JQuery{    [JQuery(Name = "JpageGrid", Assembly = "jQuery", DisposeMethod = "destroy", ScriptResources = new string[] {  },        StartEvent = ClientRegisterEvents.ApplicationLoad)]    [AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]    [AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]    [ToolboxData("<{0}:JpageGrid runat=\"server\" JpageGrid\"></{0}:JpageGrid>")]    [System.Drawing.ToolboxBitmap(typeof(Progressbar), "Progressbar.Progressbar.ico")]    public class JpageGrid : GridView,INamingContainer    {        protected override void OnInit(System.EventArgs e)        {            //$('table').tablePagination({});            ClientScriptManager.AddCompositeScript(this, "jQuery.core.js", "jQuery");            ClientScriptManager.AddCompositeScript(this, "jQuery.plugins.tablePagination.0.1.js", "jQuery");            ClientScriptManager.RegisterDocumentReadyScript(this, "$('table').tablePagination({});");        }           [DefaultValue(false)]        public override bool UseAccessibleHeader        {            get            {                return base.UseAccessibleHeader;            }            set            {                base.UseAccessibleHeader = value;            }        }                        }}

This control is inherit from gridview, I think it is stupid. Then rebuild DNA.UI , That's all.

Now when I drag a dotnetage:JdataGrid control and drop it in a aspx file, the gridview will having paging function, The following are all properties