Blue Theme Orange Theme Green Theme Red Theme
 
Home | Forums | Videos | Advertise | Certifications | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
DevExpress UI Controls
Search :       Advanced Search »
Home » AJAX » AJAX DataGrid: An ASP.NET User Control

AJAX DataGrid: An ASP.NET User Control

This DataGrid is a Client Side Control. It is created by JavaScript and uses Ajax.net technology.

Page Views : 107435
Downloads : 5398
Rating :
 Rate it
Level : Beginner
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
Download Files:
src.zip
 
 
DevExpress Free UI Controls
Become a Sponsor
Team Foundation Server Hosting
Become a Sponsor
 Tag Cloud
 Latest Jobs
More ... 
 Latest Interview Questions
More ... 

Introduction:

 

This DataGrid is a Client Side Control. It is created by JavaScript and uses Ajax.net technology to communicate with ASP.NET code behind, from there, using ADO.NET to access the database and update the database with dataset.

 

This control has all the features that a DataGrid should have and all the functions work automatically without writing any code after you setup the connection string and table names.

 

The datagrid support:

 

  1. Pages.
  2. Sort.
  3. Master - Detail (the detail part also support page and sort)
  4. Customized row color based on the Column condition.
  5. Edit.
  6. Scroll bar without head scroll when no page supported.
  7. Support controls (Image, TextBox, Hyper link, DropdownBox, CheckBox).
  8. Auto split head name.
  9. Automatic validate textbox for Decimal, email and number.

The datagrid can be switched between different modes by right click on the screen to open a popup screen:

 

 

  

The Datagrid with Page, Master-Detail and Edit function

 

 

 

The Datagrid with custom controls and scrollbar with static head

 

Performance:

 

The grid is created by javascript on demand and JavaScript is not a compiled language. It is slower than render xtml code directly to the page. If the datagrid contains more than 200 records it is better to use the page mode. Otherwise the performance will slowdown a lot.

 

The CSS (Cascading Style Sheets) is used to configure the look of the control, so the user can make the change very easily.

 

Usage:

 

The user control includes five parts:

 

  1. User control .ascx file.
  2. JavaScript file.
  3. Database access file.
  4. CSS file.
  5. AJAX.NET dll.

First, Add reference to ajax.dll.

 

Copy the UserControl directory to your project and add the user control to your ASP.Net page: (see the project in the source code)

<%@ Register TagPrefix="WebDataGridDemo" TagName="WebDataGrid" Src= "UserControl/WebDataGridUserControl.ascx"%>

<WEBDATAGRIDDEMO:WEBDATAGRID id="wdg1" runat="server"> </WEBDATAGRIDDEMO:WEBDATAGRID> 

In the Web.config file, setup the connection string. Add reference to Ajax.net dll:

 

<appSettings>

           <add key="ConnectionString" value="Data Source=(local);Initial Catalog=Northwind;User Id=sa;Password=xxx;" />

</appSettings>

 

<httpHandlers>

      <add verb="POST,GET" path="

          type="Ajax.PageHandlerFactory, Ajax " />

</httpHandlers>

 

In the DynamicDataGrid.js file, most parameters have default values that you can overwrite some of them in your webform that use the control.

 

private void Page_Load(object sender, System.EventArgs e)

{

if(!Page.IsPostBack)

{       

WebDataGridUserControl.MainTableName="suppliers";

           WebDataGridUserControl.DetailTableName = "products";

 

           // optional these values will overwrite default properties

           WebDataGridUserControl.Height =300;

           WebDataGridUserControl.Width = 780;

           WebDataGridUserControl.Editable = 1;

           WebDataGridUserControl.PageSize = 4;

}

}

 

Configuration:

 

Also you can modify some parameters in the WebDataGridUserControl.ascx.cs file:

 

If you don't use page mode, you may need to change the array ResetIfNoEditable and columnWidth to adjust the grid head column size and columns size.

 

[Ajax.AjaxMethod]

public ArrayList InitializeInfo()

{

...

           // int pageable=1; masterDetail =1;editable = 1;pageSize=10; height=300

           string [] FunctionProperty = {"1", "1", gEdit, gPageSize, gridHeight, gridWidth};

           // ={} no control available; 0 label, 1 image, 2 href link 3 textbox 4 checkbox 5 dropdown

           string [] ColumnControlType = {"0","2","3","3","0","3","4"};

           // indicate which column 3,4,5,7 is editable

           string [] ColumnEditable =   {"0","0","1","1","1","0","1"};

 

           // following properties only for no page supported

           // this rearrange size of edit button to column 3, 4, 5 with added size 10,10,10

           string [] ResetIfNoEditable = {"0","0","10","10","10", "0"};

 

           string [] CustomizedHeadZize={"68","140","120","120","120", "0"};

           // Column size needed when no page support is set; you should set one column to "0"

           string [] columnWidth ={"68","140","120","120","120","0"};

           ...

           return al;

}

 

[Ajax.AjaxMethod]

public ArrayList GetHeadArray()

{

...

           // this array should match with the edit fields column3= Decimal, column4=Email,column5=Number

           string [] ValidateType =   {"","","Decimal","Email","Number"};

           // assign ColumnDisplayName = {}; if don't use customized display name

           string [] ColumnDisplayName = {};

...

}

 

Thanks Michael Schwarz who created a ajax.net that build the bridge between JavaScript and the .Net.

Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post Here.
Login to add your contents and source code to this article
 [Top] Rate this article
 
 About the author
 
Jibin Pan
Jibin Pan is vc++, c programmer at Interactive Edge Corp. Xtend Communications Corp. MoneyLine Corp in new york city since 1994 and has Master degree at computer science.
Looking for C# Consulting?
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional consulting company, our consultants are well-known experts in .NET and many of them are MVPs, authors, and trainers. We specialize in Microsoft .NET development and utilize Agile Development and Extreme Programming practices to provide fast pace quick turnaround results. Our software development model is a mix of Agile Development, traditional SDLC, and Waterfall models.
Click here to learn more about C# Consulting.
 
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
Discover the Top 5 .NET Memory Management Fundamentals
To write the best .NET code, you need to know exactly how the .NET framework really manages memory. Ricky Leeks presents the Top 5 fundamental facts of .NET memory management. Learn more.
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
 
 Post a Feedback, Comment, or Question about this article
Subject:
Comment:
Team Foundation Server Hosting
Become a Sponsor
 Comments
Databind method needed by wisey On May 22, 2006

Is there a way to implement your datagrid with using results a query intead of the database table structure. For example binding the two tables with dataset instead of giving the table names?

Thanks in advance

Reply | Email | Modify 
Good! by Tran Tien Dzung On June 5, 2006
Good!
Reply | Email | Modify 
Re: Good!Gridview by chandra On May 8, 2009
hi

You are given a given code is 1.1 but i need dotnet 2.0 version plz any body help ..this is very urgent..

thanks
mohan
Reply | Email | Modify 
Turn ASP.NET controls into AJAX enabled controls. by Eric On July 9, 2006

89-89

Reply | Email | Modify 
Thanks by Michael On January 4, 2008
Thanks u is good sample
Reply | Email | Modify 
Thanks by Michael On January 4, 2008
Thanks u is good sample
Reply | Email | Modify 
Thanks by Michael On January 4, 2008
Thanks u is good sample
Reply | Email | Modify 
Re: Thanks by ajeet On March 24, 2008
Please send me code , as i am  not able to download,Please help
Reply | Email | Modify 
Can we update this code? by murali On September 1, 2008
How can we install and customize it?
Reply | Email | Modify 
Re: Can we update this code? by chandra On May 8, 2009
Can you update the code dotnet 2.0 version.

plz this is very urgent
Reply | Email | Modify 
Thakns by ramesh On November 25, 2008
its great job..its helping me to a lot....
Reply | Email | Modify 
Test by BobLove On December 16, 2010
I have errors when I convert the application. Help please
Reply | Email | Modify 
Team Foundation Server Hosting
 © 2012  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.