Mixing of DataGrid and Checkbox

zhaozj2021-02-16  59

We know that DataGrid is a very powerful ASP.NET component. We can use it to express a lot of information. You can often see some netizens asked some questions about the control. I am not a master but there is still some of the DataGrid. Learn, plus I prefer to learn, so I will use the combination of DataGrid and Checkbox today to use a simple description. We may encounter this situation when writing: Need to choose all items of a list or cancel all items. Selection to delete these columns and how to give the user a prompt information to be deleted (change the function I have described in the relevant document), I also encountered this problem. I solve it has 2 scenarios as follows:

Solution 1:

1. Use a page's Checkbox to complete this daunt task (exaggerated), because this method is very simple, I don't write code just a simple description. We are on the DataGrid on our page. Or let's place a checkbox control below, it is best to use Table to control the location. It looks clearer. We can set this Checkbox's autopostback to true. This allows us to submit server events. It is clear that we want to use server events to implement This feature, which is the same as all the lines of the DataGrid and the selection of Checkbox's Checked.

2. Still using the server's event to complete our work, this time some of the different weckbox put this Checkbox on the header of the column of Checkbox in the DataGrid. We add a checkbox to this template column. The control uses it to complete the same job as the same job, but the process is slightly different. First we need a DataGrid to express our program, the code on the HTML page is as follows:

// Only the main below is not written ... There is a detailed column of binding in GrdClient

We add a Chkall Server to HerderTemple where Server means that it is called server-side events. We add event code to it when you add events to this control, you must add event code as follows:

Private void grdserver_itemcreated (object sender, system.web.ui.webcontrols.dataGriditeMeventargs e) {

IF (E.Item.ItemType == ListItemType.Header) {

Checkbox Chk = (Checkbox) E.Item.FindControl ("Chkall Server");

// Add a starting event on the Checkbox on the header

Chk.checkedchanged = new eventhandler (chK_CHECKEDCHANGED);

}

The event handler is as follows:

// Get the Checkbox object of the header of the specified DataGrid

Private Checkbox GetHeaderCheckBox (DataGrid GRD) {

Checkbox chk = NULL;

Foreach (DataGridItem I in Grd.Controls [0] .controls) {

IF (i.ItemType == ListItemType.Header) {

CHK = (Checkbox) I.FindControl ("Chkall Server");

Break;

}

}

Return Chk;

}

Private void chk_checkedchanged (Object sender, system.eventargs e) {

Checkbox chk = this.getHeadercheckBox (this.grdserver);

Foreach (DataGridItem I in this.grdserver.Items) {

CheckBox Inchk = (Checkbox) I.FindControl ("chkdelserver");

Inchk.checked = chk.checked;

}

}

The event handler is the same as all the Checkbox's Checked CHECKED of the DataGrid is the same.

Solution 2:

This program corresponds to the server event to describe the client's event. There are also two small slightly different ways.

1. Like the scheme one, he is to support the selection script to the client as to the script below 2 will be described in detail.

2. As with the solution, we still put Checkbox in Header, slightly different is that our use is the client script. In order to achieve this feature, we put a DataGrid on the page as follows:

In order to implement the function of the client script We have to add a JavaScript script for the page, the script code is as follows: