How to perform multiple selection by using the checkbox in AngularJS?

You can populate the Grid data via the angular by using the datasource property and the selection can be done by enabling the allowselection property in the Grid.

By default, the multiple selection is performed by using the ctrl key. You can also perform multiple selection by using the Checkboxes that are bound to the Grid rows.

The following code example explains how to populate the Grid data via the angular and the multiple selection by using the checkboxes.

HTML

JS

Render the check Box to column by using the template property in the Grid columns.

Multiple row selection through checkbox can be achieved by using the Grid client side events. In Create and actionComplete events of the Grid, the change event of the checkbox is triggered.

In the recordClick event of the Grid, the selected records are cleared and the checkboxes corresponding to the selected records are unchecked.

The following screenshot displays the result.

Figure 1: Multiple selection in Angular Grid using Checkboxes