Add a check box column for the flex DataGrid

This article was reproduced from: Http://www.riafan.com/add-checkbox-column-for-flex-datagrid/

The following is the body content:

If you set the AllowMultipleSelection value of the MX DataGrid to True, you can select multiple items in combination with Ctrl or ALT. But many users do not know this, they are more accustomed to check boxes to choose, so we need to add a check box column for the DataGrid. The check box item renderer with column headings can be selected all or deselected.

We set the Headerrenderer and Itemrenderer to Mxdatagriditemrenderer and place the check box in the container. Of course, you can also set them as checkboxes, but doing so means you can only use the MX version of the check box, not using the new skin features in Flex.

The owner property of the Mxdatagriditemrenderer will get the DataGrid itself. The check box item renderer for column headings is more complex to implement, interacting with the DataGrid. When the check box changes state, we set the DataGrid to select All and cancel all by listening to the change event handler of the checkbox. On the other hand, by listening to the DataGrid's change and Valuecommit events and the CollectionChange event of the DataGrid data Provider, the check box status of the column header is determined by comparing the length of its data provider and the length of its current option. , all cancellations, or partial selection. As in the following code snippet:

Private Function init (): void
{
  var grid:listbase= owner as ListBase;
  Grid.addeventlistener (Listevent.change, changehandler);
  Grid.addeventlistener (Flexevent.value_commit, changehandler);
  IList (Grid.dataprovider). AddEventListener (Collectionevent.collection_change, Changehandler);
   
}
 
Private Function Changehandler (event:event): void
{
  var grid:listbase= owner as ListBase;
  var items:array = Grid.selecteditems;
  var count:int = items? items.length:0;
  var len:int = grid.dataProvider.length;
  cb.selected = count > 0 && len = = count;
  cb.enabled = Count >= 0 && len > 0;
  cb.partial = count > 0;
  grid.enabled = len > 0;
}

For the check box renderer for the column header, we have added a partial selection of state and skin for it. See Tristatecheckboxskin.mxml.

In addition, we override the set columns method in the DataGrid custom class to always set the first column check box. The Keydownhandler event handler and the SelectItem method are also covered to ensure that no function keys can be used in multiple selections.

Click here to see the final results of this instance, click here to download the source code for that instance.

Also we can add check box columns for Advanceddatagrid, just change mxdatagriditemrenderer to Mxadvanceddatagriditemrenderer, Its owner is advanceddatagrid itself. Click here to download the source code for this instance.