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
28427Employee name...employee@email.com0000-00-000.00
28426Employee name...employee@email.com2011-01-010.00
28425Employee name...employee@email.com2011-01-010.00
28424Employee name...employee@email.com2011-01-010.00
28422klk;kemployee@email.com2011-01-010.00
28420Employee name..employee@email.com2011-01-010.00
28419Employee name...employee@email.com2011-01-010.00
28418Employee name...employee@email.com2011-01-010.00
28416Employee name...employee@email.com2011-01-010.00
28415Employee name...employee@email.com2011-01-010.00
28413Employee name...employee@email.com2011-01-010.00
28412fghdfghemployee@email.com2011-01-010.00
28411Employee name...employee@email.com2011-01-010.00
28406employee@email.com2011-01-010.00
28404Employee name...employee@email.com2011-01-010.00
28403Employee name...employee@email.com2011-01-010.00
28402Femployee@email.com2011-01-010.00
28400Employee name...employee@email.com2011-01-010.00
28399Employee name...employee@email.com2011-01-010.00
28397Employee name...employee@email.com2011-01-010.00
28396Employee name...employee@email.com2011-01-010.00
28395Employee name...employee@email.com2011-01-010.00
28394Employee name...employee@email.com2011-01-010.00
28392Employee name...employee@email.com2011-01-010.00
28391Employee name...employee@email.com2011-01-010.00
28390Employee name...employee@email.com2011-01-010.00
28389Employee name...employee@email.com2011-01-010.00
28388Employee name...employee@email.com2011-01-010.00
28387Employee name...employee@email.com2011-01-010.00
28386Employee name...employee@email.com2011-01-010.00
28385Employee name...employee@email.com2011-01-010.00
28384Employee name...employee@email.com2011-01-010.00
28383Employee name...employee@email.com2011-01-010.00
28382Employee name...employee@email.com2011-01-010.00
28381Employee name...employee@email.com2011-01-010.00
28380Employee name...employee@email.com2011-01-010.00
28379Employee name...employee@email.com2011-01-010.00
28378Employee name...employee@email.com2011-01-010.00
28377Employee name...employee@email.com2011-01-010.00
28376Employee name...employee@email.com2011-01-010.00
28375Employee name...employee@email.com2011-01-010.00
28374Employee name...employee@email.com2011-01-010.00
28373Employee name...employee@email.com2011-01-010.00
28372Employee name...employee@email.com2011-01-010.00
28371Employee name...employee@email.com2011-01-010.00
28370Employee name...employee@email.com2011-01-010.00
28369Employee name...employee@email.com2011-01-010.00
28368Employee name...employee@email.com2011-01-010.00
28367Employee name...employee@email.com2011-01-010.00
28366Employee name...employee@email.com2011-01-010.00
28365Employee name...employee@email.com2011-01-010.00
28363Employee name...employee@email.com2011-01-010.00
28361Employee name...employee@email.com2011-01-010.00
28360Employee name...employee@email.com2011-01-010.00
28359Employee name...employee@email.com2011-01-010.00
28358Employeeemployee@email.com2011-01-010.00
28357Employee name...employee@email.com2011-01-010.00
28356aa@a.com2011-01-010.00
28355Employee name...employee@email.com2011-01-010.00
28354Employee name...employee@email.com2011-01-010.00
28353aa@a.com2011-01-010.00
28352Employee name...employee@email.com2011-01-010.00
28351Employee name...employee@email.com2011-01-010.00
28350Employee name...employee@email.com2011-01-010.00
28349Employee name...employee@email.com2011-01-010.00
28348Employee name...employee@email.com2011-01-010.00
28347aa@a.com2011-01-010.00
28346Employee name...employee@email.com2011-01-010.00
28345Employee name...employee@email.com2011-01-010.00
28344Employee name...employee@email.com2011-01-010.00
28343Employee name...employee@email.com2011-01-010.00
28342Employee name...employee@email.com2011-01-010.00
28341aa@a.com2011-01-010.00
28340Employee name...employee@email.com2011-01-010.00
28339Employee name...employee@email.com2011-01-010.00
28338Employee name...employee@email.com2011-01-010.00
28337ppemployee@email.com2011-01-010.00
28336Employee name...employee@email.com2011-01-010.00
28333Employee name...employee@email.com2011-01-010.00
28332Employee name...employee@email.com2011-01-010.00
28331Employee name...employee@email.com2011-01-010.00
28330Employee name...employee@email.com2011-01-010.00
28329Employee name...employee@email.com2011-01-010.00
28328Employee name...employee@email.com2011-01-010.00
28327Employee name...employee@email.com2011-01-010.00
28326Employee name...employee@email.com2011-01-010.00
28325Employee name...employee@email.com2011-01-010.00
28324Employee name...employee@email.com2011-01-010.00
28323Employee name...employee@email.com2011-01-010.00
28322Employee name...employee@email.com2011-01-010.00
28321Employee name...employee@email.com2011-01-010.00
28320Employee name...employee@email.com2011-01-010.00
28319Employee name...employee@email.com2011-01-010.00
28318Employee name...employee@email.com2011-01-010.00
28317Employee name...employee@email.com2011-01-010.00
28316Employee name...employee@email.com2011-01-010.00
28315Employee name...employee@email.com2011-01-010.00
28314Employee name...employee@email.com2011-01-010.00
28313Employee name...employee@email.com2011-01-010.00
28312Employee 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!