Multi-select ASP. NET DataGrid
By Prashant Nayak (. NET lover) Translation Min Yong
- Download source files-3.72 KB
-
- Download Demo project-8.83 KB
- download Demo project for. NET 2003-15.8 kb
introduction ASP. NET DataGrid is a powerful and flexible control, but some features are not provided, such as the choice of multiple records. This article The Article function is to easily select multiple records.
Code after testing and using some JavaScript coding techniques related to grid, I got the following solution.
- Add the selected checkbox in the template column (Hotmail/Yahoo style)
- Add the client event onclick () and JavaScript of the checkbox to highlight and mark the selected row.
- Add the server event checkedchanged () to control the content that is highlighted. [because the DataGrid restores the original color each time it is PostBack, the highlighted color we set will not be retained]
< Columns >
< ASP: templatecolumn >
< Headertemplate >
< ASP: checkbox ID = "Chkall"
Onclick = "Javascript: selectallcheckboxes (this );" Runat = "Server"
Autopostback = "False" Tooltip = "Select/deselect all" />
</ Headertemplate >
< Itemtemplate >
< ASP: checkbox ID = "Chkselect" Onclick = "Javascript: highlightrow (this );"
Runat = "Server" Oncheckedchanged = "Grdemployees_checkedchanged"
Autopostback = "False" />
</ Itemtemplate >
</ ASP: templatecolumn >
</ Columns >
Selectallcheckboxes ()
This equation uses the selection style of Hotmail. it traverses every checkbox in the form and determines whether to select or not to select checkbox.
Highlightrow ()
To highlight the selected image or not highlight it when it is selected ., I wrote the highlightrow () function. When using the <asp: checkbox> control, pay attention to a very important thing. around the <span> label in the checkbox, we must obtain the <span> label in JavaScript.
// -------------------------------------------------------------
// Select all the checkboxes (Hotmail style)
// -------------------------------------------------------------
Function Selectallcheckboxes (spanchk ){
// Added as aspx uses span for checkbox
VaR Oitem = Spanchk. Children;
VaR Thebox = Oitem. Item ( 0 )
Xstate = Thebox. checked;
Elm = Thebox. Form. elements;
For (I = 0 ; I < Elm. length; I ++ )
If (ELM [I]. Type = " Checkbox " && Elm [I]. ID ! = Thebox. ID)
{
// Elm [I]. Click ();
If (ELM [I]. Checked ! = Xstate)
Elm [I]. Click ();
// Elm [I]. Checked = xstate;
}
}
// -------------------------------------------------------------
// ---- Select highlish rows when the checkboxes are selected
//
// Note: The colors are hardcoded, however you can use
// Registerclientscript Blocks Methods to use Grid's
// Itemtemplates and selecttemplates colors.
// For ex: grdemployees. itemstyle. backcolor or
// Grdemployees. selecteditemstyle. backcolor
// -------------------------------------------------------------
Function Highlightrow (chkb ){
VaR Oitem = Chkb. Children;
Xstate = Oitem. Item ( 0 ). Checked;
If (Xstate)
{Chkb. parentelement. parentelement. style. backgroundcolor = 'Lightcoral ';
// Grdemployees. selecteditemstyle. backcolor
Chkb. parentelement. parentelement. style. Color = 'White ';
// Grdemployees. selecteditemstyle. forecolor
} Else
{Chkb. parentelement. parentelement. style. backgroundcolor = 'White ';
// Grdemployees. itemstyle. backcolor
Chkb. parentelement. parentelement. style. Color = 'Black ';
// Grdemployees. itemstyle. forecolor
}
}
// -->
This is a client thing that has always been very useful. Since it is so easy to use, some people may ask, why not use the simple and clear checkbox control in HTML? The answer is that the ASP. NET Server-side control has the viewstate attribute, so you can retain the selected row when submitting a page.
Server
Now, on the server side, we need to ensure that the highlighted rows are not lost, because in each PostBack, Asp. net to the grid and the highlighted rows are lost. the following equation returns the highlighted line. Public Sub grdemployees_checkedchanged () Sub Grdemployees_checkedchanged ( Byval Sender As Object ,_
Byval E As System. eventargs)
Dim Chktemp As Checkbox = Ctype (Sender, checkbox)
Dim DGI As Datagriditem
DGI = Ctype (Chktemp. Parent. Parent, datagriditem)
If (Chktemp. Checked) Then
DGI. backcolor = Grdemployees. selecteditemstyle. backcolor
DGI. forecolor = Grdemployees. selecteditemstyle. forecolor
Else
DGI. backcolor = Grdemployees. itemstyle. backcolor
DGI. forecolor = Grdemployees. itemstyle. forecolor
End If
End sub
Get the row you selected
Very easy! Retrieve the checkbox [for example. demogriditem. cells (0). Controls (1)] by traversing the datagriditems collection. Check the checked attributes. Of course, you can also use datakeyfield to get what you want.
