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 :

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 Email Start Date Salary Active
28076Employee name...employee@email.com2011-01-010.00
28075John Eltonejohn@gmail.com2011-01-0130000.00
28072aaaaaemployee@email.com2019-01-011000.00
28071Employee name...employee@email.com2011-01-010.00
28070Eduardoemployee@email.com2011-01-010.00
28069Employee name...employee@email.com2011-01-010.00
28067Employee name...employee@email.com2011-01-010.00
28066Employee name...employee@email.com2011-01-010.00
28065Employee name...employee@email.com2011-01-010.00
28064jjjemployee@email.com2011-01-010.00
28063sadasdemployee@email.com2011-01-010.00
28062Employee name...employee@email.com2011-01-010.00
28059Employee name...employee@email.com2011-01-010.00
28058Employee name...employee@email.com2011-01-010.00
28057Employee name...employee@email.com2011-01-010.00
28055Employee name...employee@email.com2011-01-010.00
28054Employee name...aaa@email.com2011-01-010.00
28053Employee name...employee@email.com2011-01-010.00
28052Employee name...employee@email.com2011-01-010.00
28051Employee name...employee@email.com2011-01-010.00
28050Employee name...employee@email.com2011-01-010.00
28049Employee name...employee@email.com2011-01-010.00
28048Employee name...employee@email.com2011-01-010.00
28047Employee name...employee@email.com2011-01-010.00
28046Employee name...employee@email.com2011-01-010.00
28045Employee name...employee@email.com2011-01-010.00
28044Employee name...employee@email.com2011-01-010.00
28043Employee name...employee@email.com2011-01-010.00
28042Employee name...employee@email.com2011-01-010.00
28041Employee name...employee@email.com2011-01-010.00
28040Employee name...employee@email.com2011-01-010.00
28039Employee name...employee@email.com2011-01-010.00
28038Employee name...employee@email.com2011-01-010.00
28037Employee name...employee@email.com2011-01-010.00
28036Employee name...employee@email.com2011-01-010.00
28035Employee name...employee@email.com2011-01-010.00
28034Employee name...employee@email.com2011-01-010.00
28033Employee name...employee@email.com2011-01-010.00
28032Employee name...employee@email.com2011-01-010.00
28031Employee name...employee@email.com2011-01-010.00
28030Employee name...employee@email.com2011-01-010.00
28029Employee name...employee@email.com2011-01-010.00
28028Employee name...employee@email.com2011-01-010.00
28027Employee name...employee@email.com2011-01-010.00
28026Employee name...employee@email.com2011-01-010.00
28025Employee name...employee@email.com2011-01-010.00
28024Employee name...employee@email.com2011-01-010.00
28023Employee name...employee@email.com2011-01-010.00
28022Employee name...employee@email.com2011-01-010.00
28021Employee name...employee@email.com2011-01-010.00
28020Employee name...employee@email.com2011-01-010.00
28019Employee name...employee@email.com2011-01-010.00
28018Employee name...employee@email.com2011-01-010.00
28016Mariaemployee@email.com2011-01-010.00
28012testeemployee@email.com2011-01-010.00
28011Employee name...employee@email.com2011-01-010.00
28010555employee@email.com2011-01-015.55
28009testeteste@gmail.com2011-01-010.00
28007Employee name...employee@email.com2011-01-010.00
28006Employee name...employee@email.com2011-01-010.00
28005Employee name...employee@email.com2011-01-010.00
28004Employee name...employee@email.com2011-01-010.00
28003Employee name...employee@email.com2011-01-010.00
28001Employee name...employee@email.com2011-01-010.00
28000Employee name...employee@email.com2011-01-010.00
27999Employee name...employee@email.com2011-01-010.00
27998Employee name...employee@email.com2011-01-010.00
27997Employee name...employee@email.com2011-01-010.00
27996Employee name...employee@email.com2011-01-010.00
27995Employee name...employee@email.com2011-01-010.00
27994Employee name...employee@email.com2011-01-010.00
27993Emloyeeemployee@email.com2011-01-010.00
27992Employee name...employee@email.com2011-01-010.00
27991robertemployee@email.com2011-01-010.00
27987Employee name...employee@email.com2011-01-010.00
27986dfgemployee@email.com2011-01-010.00
27985Employee name...ss@ff.ru2011-01-010.00
27984bbemployee@email.com2011-01-010.00
27982fgfdpaco@email.com2011-01-010.00
27981fghfghfghfghfghfghemployee@email.com2011-01-010.00
27980Employee name...employee@email.com2011-01-010.00
27978111employee@email.com2011-01-010.00
27974sdsdsaemployee@email.co.uk2011-01-010.00
27973Employee name...employee@email.com2011-01-010.00
27972Employee name...hhhhemployee@email.com2011-01-010.00
27970Employee name...employee@email.com2011-01-010.00
27969Employee name...employee@email.com2011-01-010.00
27968Employee name...employee@email.com2011-01-010.00
27967Employee name...employee@email.com2011-01-010.00
27966Employee name...employee@email.com2011-01-010.00
27965Employee name...employee@email.com2011-01-010.00
27964Employee name...employee@email.com2011-01-010.00
27963Employee name...employee@email.com2011-01-010.00
27962Employee name...employee@email.com2011-01-010.00
27961Employee name...employee@email.com2011-01-010.00
27960Employee name...employee@email.com2011-01-010.00
27955Employee name...employee@email.com2011-01-010.00
27954Employee name...employee@email.com2011-01-010.00
27953Employee name...employee@email.com2011-01-010.00
27952Employee name...employee@email.com2011-01-010.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');
				}
			}
		};
		

E.n.j.o.y.  ads-free content!