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
27895Employee name...employee@email.com2011-01-010.00
27894Employee name...employee@email.com2011-01-010.00
27893Employee name...employee@email.com2011-01-010.00
27892Employee name...employee@email.com2011-01-010.00
27891Employee name...employee@email.com2011-01-0130.00
27890Employee name...employee@email.com2011-01-010.00
27889Employee name...employee@email.com2011-01-010.00
27888Employee name...employee@email.com2011-01-010.00
27887Employee name...employee@email.com2011-01-010.00
27886Employee name...employee@email.com2011-01-010.00
27885Employee name...employee@email.com2011-01-010.00
27884Employee name...employee@email.com2011-01-010.00
27883rferemployee@email.com2011-01-010.00
27882Employee name...employee@email.com2011-01-010.00
27881Employee name...ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssemployee@email.com2011-01-010.00
27880ffffemployee@email.com2011-01-010.00
27879Employee name...employee@email.com2011-01-010.00
27877Employee name...employee@email.com2011-01-010.00
27876Employee name...employee@email.com2011-01-010.00
27875Employee name...employee@email.com2011-01-010.00
27874Employee name...employee@email.com2011-01-010.00
27873Employee name...employee@email.com2011-01-010.00
27872Employee name...employee@email.com2011-01-010.00
27871Enilemploye@email.com2011-01-010.00
27870Employee name...employee@email.com2011-01-010.00
27869Employee name...employee@email.com2011-01-010.00
27868Employee name...employee@email.com2011-01-010.00
27867Employee name...employee@email.com2011-01-010.00
27866Employee name...employee@email.com2011-01-010.00
27865Employee name...employee@email.com2011-01-010.00
27864Employee name...employee@email.com2011-01-010.00
27863Employee name...employee@email.com2011-01-010.00
27862Employee name...employee@email.com2011-01-010.00
27861Employee name...employee123@email.com2011-01-010.00
27860kklklemployee@email.com2011-01-010.00
27859Employee name...employee@email.com2011-01-010.00
27858Employee name...employee@email.com2011-01-010.00
27857Employee name...employee@email.com2011-01-010.00
27856Employee name...employee@email.com2011-01-010.00
27855Employee name...employee@email.com2011-01-010.00
27854Employee name...employee@email.com2011-01-010.00
27853123employee@email.com2011-01-010.00
27852Employee name...employee@email.com2011-01-010.00
27851Employee name...employee@email.com2011-01-010.00
27850Employee name...employee@email.com2011-01-010.00
27849Employee name...employee@email.com2011-01-010.00
27848Employee name...employee@email.com2011-01-010.00
27846Employee name...employee@email.com2011-03-010.00
27843hjemployee@email.com2011-01-010.00
27842Employee name...employee@email.com2011-01-010.00
27841Employee name...employee@email.com2011-01-010.00
27840Employee name...employee@email.com2011-01-010.00
27839Employee name...employee@email.com2011-01-010.00
27838Employee name...employee@email.com2011-01-010.00
27837Employee name...employee@email.com2011-01-010.00
27836Employee name...employee@email.com2011-01-010.00
27835Employee name...employee@email.com2011-01-010.00
27834Employee name...employee@email.com2011-01-010.00
27833Employee name...employee@email.com2011-01-010.00
27832Employee name...employee@email.com2011-01-010.00
27831Employee name...employee@email.com2011-01-010.00
27830Employee name...employee@email.com2011-01-010.00
27829Employee name...employee@email.com2011-01-010.00
27828Employee name...employee@email.com2011-01-010.00
27827Employee name...employee@email.com2011-01-010.00
27826Employee name...employee@email.com2011-01-010.00
27825Employee name...employee@email.com2011-01-010.00
27824Employee name...employee@email.com2011-01-010.00
27823Employee name...employee@email.com2011-01-010.00
27822Employee name...employee@email.com2011-01-010.00
27821Employee name...employee@email.com2011-01-010.00
27820Employee name...employee@email.com2011-01-010.00
27819Employee name...employee@email.com2011-01-010.00
27818Employee name...employee@email.com2011-01-010.00
27817Employee name...employee@email.com2011-01-010.00
27816Employee name...employee@email.com2011-01-010.00
27815Employee name...employee@email.com2011-01-010.00
27814Employee name...employee@email.com2011-01-010.00
27813Employee name...employee@email.com2011-01-010.00
27812Employee name...employee@email.com2011-01-010.00
27811Employee name...employee@email.com2011-01-010.00
27809aaaaemployee@email.com2011-01-010.00
27807dfdfemployee@email.com2011-01-010.00
27806nadaemployee@email.com2011-01-010.00
27805Employee name...employee@email.com2011-01-010.00
27804Employee name...employee@email.com2011-01-010.00
27803Employee name...employee@email.com2011-01-010.00
27802Employee name...employee@email.com2011-01-010.00
27801Pleorramaemployee@email.com2011-01-010.00
27800Employee name...employee@email.com2011-01-010.00
27799Employee name...employee@email.com2011-01-010.00
27798Employee name...employee@email.com2011-01-010.00
27797Employee name...employee@email.com2011-01-010.00
27796Employee name...employee@email.com2011-01-010.00
27795Employee name...employee@email.com2011-01-010.00
27794imaryemployee@email.com2011-01-010.00
27793Employee name...employee@email.com2011-01-010.00
27792Employee name...employee@email.com2011-01-010.00
27791Employee name...employee@email.com2011-01-010.00
27790Employee 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!