Ajax|datagrid|datagrid Control | Control development
The DataGrid in this article is a client-side control built using JavaScript and ajax.net technology.
First, Introduction
The DataGrid you want to create in this article is a client control. It is built using JavaScript and ajax.net technology to communicate with ASP.net back-end code, and on this backend we use Ado.net to access the database and update the database with the dataset.
This control has all the features that a DataGrid should have and has all the features you need to automatically work without writing any code after you create the connection string and table name.
This DataGrid supports the following features:
1. Page.
2. Sort.
3. Master-detail (Detail section also supports pages and sorting).
4. The row color can be customized based on the given column condition.
5. Edit.
6. Scroll bar support without head scrolling when there is no page support.
7. Support controls (images, text boxes, hyperlinks, Drop-down list boxes, check boxes).
8. Automatically split head name.
9. Auto-check text boxes for decimal, email, and digital.
By right-clicking on the screen to open a pop-up window (refer to Figure 1), you can switch between different modes of the DataGrid (Figure 2 shows a view in one mode):
Figure 2. This DataGrid has pagination, master-detail, and editing capabilities.
Figure 3. This DataGrid has custom controls and scroll bars that contain static headers
Second, performance analysis
This DataGrid was created by invitation to use JavaScript, and JavaScript is not a compiled language, so it's obviously slower than the technique of generating xtml code directly into a page. If the DataGrid contains more than 200 records, it is best to use the page approach. Otherwise, performance will be greatly affected.
We use CSS (cascading style tables) to configure the appearance of the control, so users can easily modify it.
Iii. Usage
This user control consists of five parts:
1. User control. ascx file
2. javascript files
3. Database Access files
4. css File
5. AJAX. NET Dynamic link library (. dll)
First, add a reference to the Ajax.dll.
Then, copy the UserControl directory directly to your project and add the user control to your asp.net page (please refer to the project source code):
<%@ Register tagprefix= "Webdatagriddemo" tagname= "Webdatagrid" src= "Usercontrol/webdatagridusercontrol.ascx"%>
<webdatagriddemo:webdatagrid id= "WDG1" runat= "Server" > </WEBDATAGRIDDEMO:WEBDATAGRID>
In this Web.config file, install the connection string. Next, add a reference to the Ajax.NET DLL:
<appSettings>
<add key= "ConnectionString" value= "Data source= (local); Initial Catalog=northwind; User Id=sa; password=xxx; "/>
</appSettings>
<add verb= "Post,get" path= "
Type= "Ajax.pagehandlerfactory, Ajax"/>
In this dynamicdatagrid.js file, most parameters have default values, and you can modify them by using the control's Web form.
private void Page_Load (object sender, System.EventArgs e)
{
if (! Page.IsPostBack)
{
webdatagridusercontrol.maintablename= "Suppliers";
Webdatagridusercontrol.detailtablename = "Products";
These optional values will overwrite the default properties
Webdatagridusercontrol.height = 300;
Webdatagridusercontrol.width = 780;
webdatagridusercontrol.editable = 1;
Webdatagridusercontrol.pagesize = 4;
}
}
Four, configuration
Alternatively, you can modify some of the parameters in the WebDataGridUserControl.ascx.cs file.
If you don't use page mode, then you may need to change the array resetifnoeditable and columnwidth to adjust the column size and row size of the grid's head.
[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 controls available, 0-tag, 1-image, 2-hyperlink, 3-text box, 4-check box, 5-drop-down list box
string [] Columncontroltype = {"0", "2", "3", "3", "0", "3", "4"};
Show which columns (3,4,5,7) are editable
string [] columneditable = {"0", "0", "1", "1", "1", "0", "1"};
The following properties are used only for non-page support
The following sentence is used to reset the size of the 3,4,5 column edit button to 10,10,10
string [] resetifnoeditable = {"0", "0", "10", "10", "10", "0"};
string [] customizedheadzize={"68", "140", "120", "120", "120", "0"};
Column widths are required when there is no page support setting; You should set the column to "0"
string [] columnWidth ={"68", "140", "120", "120", "120", "0"};
...
Return al;
}
[Ajax.ajaxmethod]
Public ArrayList Getheadarray ()
{
...
This array should match the edit field-column3=decimal,column4=email,column5=number
string [] Validatetype = {"," "," Decimal "," Email "," number "};
Assignment columndisplayname = {}; If you do not use a custom display name
string [] Columndisplayname = {};
...
}
Finally, thanks to Michael Schwarz, he created the ajax.net to build a bridge between JavaScript and. Net.