jQuery datagridview selecting - maikelbos0/VDT GitHub Wiki

To enable selecting rows in the data grid, you can use the data-select attribute on the element that will be transformed into a data grid. Additionally, to enable multiselect, use the data-multiselect attribute. Please note that for multiselect, select must be enabled. Finally it is possible to display checkboxes for multiselect by using the data-multiselect-checkboxes attribute. For this option to work, both the select and multiselect options must be enabled.

<div id="example-table" data-select="true" data-multiselect="true" data-multiselect-checkboxes="true"></div>

<script type="text/javascript">
    $('#example-table').datagridview({
        columns: [
            { data: 'firstName' },
            { data: 'lastName' }
        ]
    });
</script>

If multiselect is enabled, the following operations are enabled automatically:

• CTRL+clicking to select or deselect a single item
• Clicking a first item and then SHIFT+clicking a second to select a range
• Mouse drag to select a range
• SHIFT and mouse drag can be combined with CTRL to select multiple ranges

If multiselect checkboxes are enabled, the following operations are enabled:

• Clicking the checkbox (or the cell in which it resides) can be used to select or deselect a single item
• Clicking the checkbox in the header (or the cell in which it resides) can be used to select or deselect all rows

When the selection changes, a datagridview.selectionChanged event is triggered. This event provides an array with the selected data in the second parameter.

<script type="text/javascript">
    $('#example-table').on('datagridview.selectionChanged', function (event, data) {
        // Perform actions based on the data here
    });
</script>