Selection Grid
To make the grid rows selectable, you need to install the ezEditTable extension, enable the selectable property and configure the ezEditTable configuration object (ezEditTable_config).
This demo shows how to :
- enable row selection
- define the selected rows css class
- use the row validation callback event (double-click or enter key)
Instructions: Double-click on a row on or press Enter key to perform action. Enable multiple rows selection by checking the Multiple selection checkbox.
Keep Ctrl or Shift key pressed to select multiple rows.
| Id | Name | Start Date | Salary | Active | |
|---|---|---|---|---|---|
| 36797 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36796 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36795 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36794 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36793 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36792 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36791 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36790 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36789 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36788 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36787 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36786 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36785 | Employee name... | employee@email.com | 2011-01-10 | 0.00 | |
| 36784 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36783 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36782 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36781 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36780 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36779 | Employee name... | employee@email.com | 2011-01-10 | 0.00 | |
| 36778 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36777 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36776 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36775 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36774 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36773 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36772 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36771 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36770 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36769 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36768 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36767 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36766 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36765 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36764 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36763 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36762 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36761 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36760 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36759 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36758 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36757 | Employee name... | employee@email.com | 2011-01-10 | 0.00 | |
| 36756 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36755 | Employee name... | employee@email.com | 2011-01-10 | 0.00 | |
| 36754 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36753 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36752 | Employee name... | employee@email.com | 2011-01-01 | 0.01 | |
| 36751 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36750 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36749 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36748 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36747 | Employee name... | employee@email.com | 0000-00-00 | 0.00 | |
| 36746 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36745 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36744 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36743 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36742 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36741 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36740 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36739 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36738 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36737 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36736 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36735 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36734 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36733 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36732 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36731 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36730 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36729 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36728 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36727 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36726 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36725 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36724 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36723 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36722 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36721 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36720 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36719 | Employee name... | employee@email.com | 2011-01-01 | -1.00 | |
| 36718 | Employee name... | employee@email.com | 2011-01-01 | -1.00 | |
| 36717 | Employee name... | employee@email.com | 2011-01-01 | -1.00 | |
| 36716 | Employee name... | employee@email.com | 2011-01-01 | -1.00 | |
| 36715 | Employee name... | employee@email.com | 2011-01-01 | -1.00 | |
| 36714 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36713 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36712 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36711 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36710 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36709 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36708 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36707 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36706 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36705 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36704 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36703 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36702 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36701 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36700 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36699 | Employee name... | employee@email.com | 2011-01-01 | 0.00 | |
| 36698 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
var tfConfig = {
btn_reset: true,
alternate_rows: true,
rows_counter: true,
col_0: 'none', col_5: 'none',
col_width:['40px', '280px', '220px', '100px', '100px', '70px'],
col_date_type: [null,null,null,'ymd',null,null],
sort_config: { sort_types: ['number','string','string','ymd','number','none'] },
grid_layout: true, grid_width: '860px', grid_height: '400px',
enable_default_theme: true,
selectable: true,
editable: false,
ezEditTable_config: {
default_selection: 'both',
selected_row_css: 'ezSlcRow',
on_validate_row: function(o, row){
var id = o.Selection.GetActiveRowValues()[0];
var employee = o.Selection.GetActiveRowValues()[1];
alert('You have chosen record: '+ id +'\n'+employee+'\'s employee data');
}
}
};