This project is read-only.

JDataGrid plugin for DNA jQuery Web Control

Aug 20, 2009 at 4:14 PM
Edited Aug 21, 2009 at 3:03 PM

Hi Ray,

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 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 ID="SCriptMag1" runat="server"></asp:ScriptManager>
    <DotNetAge:JpageGrid ID="JpageGrid1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="UserID" DataSourceID="SqlDataSource1" 
        UseAccessibleHeader="True" BorderColor="White" BorderStyle="Double" 
            <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" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:senetConnectionString %>" 
        SelectCommand="SELECT [UserID], [FirstName], [Username], [Email] FROM [Users]">

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 (
///  Dual licensed under the MIT and GPL licenses:
using 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\" ID=\"JpageGrid\"></{0}:JpageGrid>")]
    [System.Drawing.ToolboxBitmap(typeof(Progressbar), "Progressbar.Progressbar.ico")]
    public class JpageGrid : GridView,INamingContainer

        protected override void OnInit(System.EventArgs e)

            ClientScriptManager.AddCompositeScript(this, "jQuery.core.js", "jQuery");
            ClientScriptManager.AddCompositeScript(this, "jQuery.plugins.tablePagination.0.1.js", "jQuery");

            ClientScriptManager.RegisterDocumentReadyScript(this, "$('table').tablePagination({});");

        public override bool UseAccessibleHeader
                return base.UseAccessibleHeader;
                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

  • firstArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/first.gif"
  • prevArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/prev.gif"
  • lastArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/last.gif"
  • nextArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/next.gif"
  • rowsPerPage - Number - used to determine the starting rows per page. Default: 5
  • currPage - Number - This is to determine what the starting current page is. Default: 1
  • optionsForRows - Array - This is to set the values on the rows per page. Default: [5,10,25,50,100]
  • ignoreRows - Array - This is to specify which 'tr' rows to ignore. It is recommended that you have those rows be invisible as they will mess with page counts. Default: []

    Do u think this is useful ??



  • Sep 8, 2009 at 2:33 PM

    Thanks Nicholaspee, I think it useful.