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
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	Employee name...	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
35910	Employee name...	employee@email.com	2011-01-01	0.00
35909	Employee name...	employee@email.com	2011-01-01	0.00
35908	Employee name...	employee@email.com	2011-01-01	0.00
35907	Employee name...	employee@email.com	2011-01-01	0.00
35906	Employee name...	employee@email.com	2011-01-01	0.00
35903	test	employee@email.com	2011-01-01	0.00
35901	Employee name...	employee@email.com	2011-01-01	0.00
35900	Employee name...	employee@email.com	2011-01-01	0.00
35899	Employee name...	employee@email.com	2011-01-01	0.00
35898	Employee name...	employee@email.com	2011-01-01	0.00
35895	D	employee@email.com	2011-01-01	0.00
35894	Employee name...	jhkjhkjhemployee@email.com	2011-01-01	0.00
35893	Employee name...	klklklemployee@email.com	2011-01-01	0.00
35892	Employee name...	employee@email.com	2011-01-01	0.00
35890	ikke	employee@email.com	2011-01-01	1.22
35889	Employee name...	employee@email.com	2011-01-01	0.00
35888	a	employee@email.com	2011-01-01	0.00
35887	Employee name...	employee@email.com	2011-01-01	0.00
35886	Employee name...	employee@email.com	2011-01-01	0.00
35885	Employee name...	employee@email.com	2011-01-01	0.00
35884	Employee name...	employee@email.com	2011-01-01	0.00
35883	Employee name...	employee@email.com	2011-01-01	0.00
35882	dfdfhfgh	employee@email.com	2011-01-01	0.00
35879	dokter afadf dfa	dokter_dark@email.com	2011-01-01	1000.00
35878	1212121	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