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
28716Employee name...employee@email.com2011-01-010.00
28715Employee name...employee@email.com2011-01-010.00
28714Employee name...employee@email.com2011-01-010.00
28713zdemployee@email.com2011-01-010.00
28712zdzdzdemployee@email.com2011-01-010.00
28711Employee name...employee@email.com2011-01-010.00
28710Employee name...333employee@email.com2011-01-010.00
28709Employee name...employee@email.com2011-01-010.00
28708Employee name...employee@email.com2011-01-010.00
28707Employee name...employee@email.com2011-01-010.00
28706Employee name...employee@email.com2011-01-010.00
28705Employee name...employee@email.com2011-01-010.00
28704Employee name...employee@email.com2011-01-010.00
28703Employee name...employee@email.com2011-01-010.00
28702Employee name...employee@email.com2011-01-010.00
28701Employee name...employee@email.com2011-01-010.00
28700Employee name...employee@email.com2011-01-010.00
28699Employee name...employee@email.com2011-01-010.00
28698Employee name...employee@email.com2011-01-010.00
28697Employee name...employee@email.com2011-01-010.00
28696Employee name...employee@email.com2011-01-010.00
28695Employee name...employee@email.com2011-01-010.00
28694Employee name...employee@email.com2011-01-010.00
28693Employee name...employee@email.com2011-01-010.00
28692Employee name...employee@email.com2011-01-010.00
28691Employee name...employee@email.com2011-01-010.00
28690Employee name...employee@email.com2011-01-010.00
28689Employee name...employee@email.com2011-01-010.00
28688Employee name...employee@email.com2011-01-010.00
28687Employee name...employee@email.com2011-01-010.00
28686Employee name...employee@email.com2011-01-010.00
28685Employee name...employee@email.com2011-01-010.00
28684Employee name...employee@email.com2011-01-010.00
28683Employee name...employee@email.com2011-01-010.00
28682Employee name...employee@email.com2011-01-010.00
28681Employee name...employee@email.com2011-01-010.00
28680Employee name...employee@email.com2011-01-010.00
28679Employee name...employee@email.com2011-01-010.00
28678Employee name...employee@email.com2011-01-010.00
28677Employee name...employee@email.com2011-01-010.00
28676Employee name...employee@email.com2011-01-010.00
28675Employee name...employee@email.com2011-01-010.00
28674Employee name...employee@email.com2011-01-010.00
28673Employee name...employee@email.com2011-01-010.00
28672Employee name...employee@email.com2011-01-010.00
28671Employee name...employee@email.com2011-01-010.00
28670Employee name...employee@email.com2011-01-010.00
28669Employee name...employee@email.com2011-01-010.00
28668Employee name...employee@email.com2011-01-010.00
28667Employee name...employee@email.com2011-01-010.00
28666Employee name...employee@email.com2011-01-010.00
28665Employee name...employee@email.com2011-01-010.00
28664Employee name...employee@email.com2011-01-010.00
28663Employee name...employee@email.com2011-01-010.00
28662Employee name...employee@email.com2011-01-010.00
28661Employee name...employee@email.com2011-01-010.00
28660Employee name...employee@email.com2011-01-010.00
28659Employee name...employee@email.com2011-01-010.00
28658Employee name...employee@email.com2011-01-010.00
28657Employee name...employee@email.com2011-01-010.00
28656Employee name...employee@email.com2011-01-010.00
28655Employee name...employee@email.com2011-01-010.00
28654Employee name...employee@email.com2011-01-010.00
28653Employee name...employee@email.com2011-01-010.00
28652Employee name...employee@email.com2011-01-010.00
28651Employee name...employee@email.com2011-01-010.00
28650Employee name...employee@email.com2011-01-010.00
28649Employee name...employee@email.com2011-01-010.00
28648Employee name...employee@email.com2011-01-010.00
28647Employee name...employee@email.com2011-01-010.00
28646Employee name...employee@email.com2011-01-010.00
28645Employee name...employee@email.com2011-01-010.00
28644Employee name...employee@email.com2011-01-010.00
28643Employee name...employee@email.com2011-01-010.00
28642Employee name...employee@email.com2011-01-010.00
28641Employee name...employee@email.com2011-01-010.00
28640Employee name...employee@email.com2011-01-010.00
28639Employee name...employee@email.com2011-01-010.00
28638Employee name...employee@email.com2011-01-010.00
28637Employee name...employee@email.com2011-01-010.00
28636Employee name...employee@email.com2011-01-010.00
28635Employee name...employee@email.com2011-01-010.00
28634Employee name...employee@email.com2011-01-010.00
28633Employee name...employee@email.com2011-01-010.00
28632Employee name...employee@email.com2011-01-010.00
28631Employee name...employee@email.com2011-01-010.00
28630Employee name...employee@email.com2011-01-010.00
28629Employee name...employee@email.com2011-01-010.00
28628Employee name...employee@email.com2011-01-010.00
28627Employee name...employee@email.com2011-01-010.00
28626Employee name...employee@email.com2011-01-010.00
28625Employee name...employee@email.com2011-01-010.00
28624Employee name...employee@email.com2011-01-010.00
28623Employee name...employee@email.com2011-01-010.00
28622Employee name...employee@email.com2011-01-010.00
28621Employee name...employee@email.com2011-01-010.00
28620Employee name...employee@email.com2011-01-010.00
28619Employee name...employee@email.com2011-01-010.00
28618Employee name...employee@email.com2011-01-010.00
28617Employee 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!