|
|
|
|
|
Home
»
AJAX
»
AJAX DataGrid: An ASP.NET User Control
|
|
|
|
Technologies:
.NET 1.0/1.1, ADO.NET, ASP.NET 1.0,Visual C# .NET
|
|
Total downloads :
|
4408
|
|
Total page views :
|
85246
|
|
Rating :
|
|
4.2/5
|
|
This article has been rated :
|
10 times
|
|
|
|
|
Download
Files:
|
|
|
|
|
|
|
|
|
|
Similar ArticlesMost ReadTop RatedLatest
|
|
Related EbooksTop Videos
|
|
|
Description
|
|
The Complete Visual C# Programmer's Guide, written by the authors of C# Corner, covers most of the major components that make up C# and the .NETenvironment including Windows Forms, ADO.NET, GDI+, Web Services, and Security. The book is geared toward the beginner to intermediate programmers.
|
|
|
|
|
|
|
|
|
|
|
|
|
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:
- Pages.
- Sort.
- Master - Detail (the detail part also support page and sort)
- Customized row color based on the Column condition.
- Edit.
- Scroll bar without head scroll when no page supported.
- Support controls (Image, TextBox, Hyper link, DropdownBox, CheckBox).
- Auto split head name.
- 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:
- User control .ascx file.
- JavaScript file.
- Database access file.
- CSS file.
- 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.
|
|
|
Login
to add your contents and source code to this article
|
|
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
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.
|
Go.NET
Build custom interactive diagrams, network, workflow editors, flowcharts, or software design tools. Includes many predefined kinds of nodes, links, and basic shapes. Supports layers, scrolling, zooming, selection, drag-and-drop, clipboard, in-place editing, tooltips, grids, printing, overview window, palette. 100% implemented in C# as a managed .NET Control. Document/View/Tool architecture with many properties&events. Optional automatic layout.
|
Dundas Software
Dundas Chart for .NET is the most advanced .NET charting package available today. With an extremely complete feature set, elegant architecture and easy implementation, Dundas Chart can quickly add advanced Charting functionality to enhance and transform ASP.NET and Windows Forms applications. Whether you are implementing charting into internal projects, or building applications for clients, Dundas Chart offers advanced technology and advanced results to get the most out of data.
|
Clickatell's SMS Gateway
Clickatell's Developer Solutions allow you to SMS enable any website or
application via a range of API's. Learn More about our API connections.
|
Microsoft Visual Studio 2010
Microsoft Visual Studio 2010 offers more to developers than any other
Visual Studio release. Work more productively and collaboratively-with
greater control over your work at every step. The Beta 2 can give you a
head start on achieving efficiency.
|
|
|
|
|
|
|
|
|
|
Download
Files:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|