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.

Multiple selection

Id	Name	Email	Start Date	Salary
36020	Employee name...	employee@email.com	2011-01-01	0.00
36019	Employee name...	employee@email.com	2011-01-01	0.00
36018	Employee name...	employee@email.com	2011-01-01	0.00
36017	Employee name...	employee@email.com	2011-01-01	0.00
36016	Employee name...	employee@email.com	2011-01-01	0.00
36015	Employee name...	employee@email.com	2011-01-01	0.00
36014	Employee name...	employee@email.com	2011-01-01	0.00
36013	Employee name...	employee@email.com	2011-01-01	0.00
36012	Employee name...	employee@email.com	2011-01-01	0.00
36011	Employee name...	employee@email.com	2011-01-01	0.00
36010	Pete	employee@email.com	2011-01-01	0.00
36009	Adam	employee@email.com	2011-01-01	0.00
36007	Employee name...	employee@email.com	2011-01-01	0.00
36006	Employee name...	employee@email.com	2011-01-01	0.00
36005	Employee name...	employee@email.com	2011-01-01	0.00
36004	Employee name...	employee@email.com	2010-01-01	0.00
36003	Employee name...	employee@email.com	2011-01-01	0.00
36002	Totox	employee@email.com	2011-01-01	0.00
36001	Employee name...	employee@email.com	2011-01-01	0.00
36000	Employee name...	employee@email.com	2011-01-01	12.22
35999	Employee name...	employee@email.com	2011-01-01	0.00
35998	Employee name...	employee@email.com	2011-01-01	0.00
35997	Employee name...	employee@email.com	2011-01-01	0.00
35996	Employee name...	employee@email.com	2011-01-01	0.00
35995	Employee name...	employee@email.com	2011-01-01	0.00
35994	Employee name...	employee@email.com	2011-01-01	0.00
35993	Employee name...	employee@email.com	2011-01-01	0.00
35992	Employee name...	employee@email.com	2011-01-01	0.00
35991	Employee name...	employee@email.com	2011-01-01	0.00
35990	Employee name...	employee@email.com	2011-01-01	0.00
35989	Employee name...	employee@email.com	2011-01-01	0.00
35988	Employee name...	employee@email.com	2011-01-01	0.00
35987	22	employee@email.com	2011-01-01	0.00
35985	Employee name...	employee@email.com	2011-01-01	0.00
35984	Employee name...	employee@email.com	2011-01-01	0.00
35983	Employee name...	employee@email.com	2011-01-01	0.00
35982	Employee name...	employee@email.com	2011-01-01	0.00
35981	Employee name...	employee@email.com	2011-01-01	0.00
35980	Employee name...	employee@email.com	2011-01-01	0.00
35979	Employee name...	employee@email.com	2011-01-01	0.00
35978	Employee name...	employee@email.com	2011-01-01	0.00
35977	Employee name...	employee@email.com	2011-01-01	0.00
35976	Employee name...	employee@email.com	2011-01-01	0.00
35975	Employee name...	employee@email.com	2011-01-01	0.00
35974	Employee name...	employee@email.com	2011-01-01	0.00
35973	Employee name...	employee@email.com	2011-01-01	0.00
35972	Employee name...	employee@email.com	2011-01-01	0.00
35971	Employee name...	employee@email.com	2011-01-01	0.00
35970	Employee name...	employee@email.com	2011-01-01	0.00
35969	Employee name...	employee@email.com	2011-01-01	0.00
35968	Employee name...	employee@email.com	2011-01-01	0.00
35967	Employee name...	employee@email.com	2011-01-01	0.00
35966	Employee name...	employee@email.com	2011-01-01	0.00
35965	Employee name...	employee@email.com	2011-01-01	0.00
35964	Employee name...	employee@email.com	2011-01-01	0.00
35963	Employee name...	employee@email.com	2011-01-01	0.00
35962	ddsfsf	employee@email.com	2011-01-01	0.00
35961	asdfasdfasdfasdfadfs	sdfasdfasdfasdfas@email.com	1993-04-04	44444.00
35960	ss	ssss@email.com	2020-01-01	44.00
35954	sdf	employee@email.com	2011-01-01	0.00
35953	Employee name...kiki	employee@email.com	2011-01-01	0.00
35952	Employee name...	employee@email.com	2011-01-01	0.00
35951	Employee name...	employee@email.com	2011-01-01	0.00
35950	Employee name...	employee@email.com	2011-01-01	0.00
35949	Employee name...	employee@email.com	2011-01-01	0.00
35948	Employee name...	employee@email.com	2011-02-01	0.00
35947	Employee name...	employee@email.com	2011-01-01	0.00
35946	Pis'ka	employee@email.com	2011-01-01	0.00
35945	sfd	employee@email.com	2011-01-01	0.00
35944	Employee name...	employee@email.com	2011-01-01	0.00
35943	Pis'ka	employee@email.com	2011-01-01	0.00
35942	Employee name...	employee@email.com	2011-01-01	0.00
35941	Employee name...	employee@email.com	2011-01-01	0.00
35940	Employee name...	employee@email.com	2011-01-01	0.00
35939	Employee name...	employee@email.com	2011-01-01	0.00
35938	Employee name...	employee@email.com	2011-01-01	0.00
35937	Employee name...	employee@email.com	2011-01-01	0.00
35936	Employee name...	employee@email.com	2011-01-01	0.00
35935	Employee name...	employee@email.com	2011-01-01	0.00
35934	Employee name...	employee@email.com	2011-01-01	0.00
35933	Employee name...	employee@email.com	2011-01-01	0.00
35932	Employee name...	employee@email.com	2011-01-01	0.00
35931	Employee name...	employee@email.com	2011-01-01	0.00
35930	Employee name...	employee@email.com	2011-01-01	0.00
35929	Employee name...	employee@email.com	2011-01-01	0.00
35928	Employee name...	employee@email.com	2011-01-01	0.00
35927	Employee name...	employee@email.com	2011-01-01	0.00
35926	Employee name...	employee@email.com	2011-01-01	0.00
35925	Employee name...	employee@email.com	2011-01-01	0.00
35922	Employee name...	employee@email.com	2011-01-01	0.00
35920	Employee name...	employee@email.com	2011-01-01	0.00
35919	Employee name...	employee@email.com	2011-01-01	0.00
35918	Employee name...	employee@email.com	2011-01-01	0.00
35917	Employee name...	employee@email.com	2011-01-01	0.00
35916	Employee name...	employee@email.com	2011-01-01	0.00
35915	Employee name...	employee@email.com	2011-01-01	0.00
35914	Employee name...	employee@email.com	2011-01-01	0.00
35913	Employee name...	employee@email.com	2011-01-01	0.00
35912	Employee name...	employee@email.com	2011-01-01	0.00
35911	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');
				}
			}
		};

GitHub repo

Search results

Selection Grid