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
28253Employee name...employee@email.com2011-01-010.00
28252tetoteto@email.com2011-01-010.00
28251mostafa ahmedmostafaahmll@yahoo.com2011-01-010.00
28250mostaaf ahmedmostafaahmed@gmail.com2011-01-010.00
28249Employee name...employee@email.com2011-01-010.00
28248Employee name...employee@email.com2011-01-010.00
28247Employee name...employee@email.com2011-01-010.00
28246Employee name...employee@email.com2011-01-010.00
28245Employee name...employee@email.com2011-01-010.00
28244Employee name...employee@email.com2011-01-010.00
28243Employee name...employee@email.com2011-01-010.00
28242Employee name...employee@email.com2011-01-010.00
28241Employee name...employee@email.com2011-01-010.00
28240Employee name...132@email.com2011-01-010.00
28239asdasdadasdasd@email.com2011-01-010.00
28235Employee name...employee@email.com2011-01-010.00
28234Employee name...employee@email.com2011-01-010.00
28233Employee name...employee@email.com2011-01-010.00
28232zxczczxcxcemployee@email.com2011-01-010.00
28231Employee name...employee@email.com2011-01-010.00
28230Employee name...employee@email.com2011-01-010.00
28229Robertde@niro.com2011-01-010.00
28228Employee name...employee@email.com2011-01-010.00
28227sdsemployee@email.com2011-01-010.00
28225Employee name...employee@email.com2011-01-010.00
28224Toto Cutognototoo@yahoo.com2000-05-040.00
28223Employee name...employee@email.com2011-01-010.00
28222Employee name...employee@email.com2011-01-010.00
28221fgjhemployee@email.com2011-01-010.00
28220Employee name...employee@email.com2011-01-010.00
28219Employee name...employee@email.com2011-01-010.00
28218Employee name...employee@email.com2011-01-010.00
28217Employee name...employee@email.com2011-01-010.00
28216Employee name...employee@email.com2011-01-010.00
28215Employee name...employee@email.com2011-01-010.00
28214Employee name...employee@email.com2011-01-010.00
28213Employee name...employee@email.com2011-01-010.00
28212Employee name...employee@email.com2011-01-010.00
28211Employee name...employee@email.com2011-01-010.00
28210Employee name...123@email.com2011-01-012.00
28209Employee name...employee@email.com2011-01-010.00
28208Employee name...employee@email.com2011-01-010.00
28207hoaraumon@gmail.com2011-01-010.00
28206Employee name...employee@email.com2011-01-010.00
28205Employee name...employee@email.com2011-01-010.00
28204Employee name...employee@email.com2011-01-010.00
28203Employee name...employee@email.com2011-01-010.00
28201Employee name...mon@gmail.com2011-01-010.00
28200Employee name...employee@email.com2011-01-010.00
28199Employee name...employee@email.com2011-01-010.00
28198Employee name...employee@email.com2011-01-010.00
28197Employee name...employee@email.com2011-01-010.00
28196asfasfa sdfasdfasfemployee@email.com2011-01-010.00
28195sdssdemployee@email.com2011-01-010.00
28194Employee name...ssdsds@email.com2011-01-010.00
28193Employee name...employee@email.com2011-01-010.00
28191Employee name...employee@email.com2011-01-010.00
28190Employee name...employee@email.com2011-01-010.00
28189Employee name...employee@email.com2011-01-010.00
28188Employee name...employee@email.com2011-01-010.00
28187Employee name...employee@email.com2011-01-010.00
28186Employee name...employee@email.com2011-01-010.00
28185Employee name...employee@email.com2011-01-010.00
28184Employee name...employee@email.com2011-01-010.00
28183Employee name...employee@email.com2011-01-010.00
28182Employee name...employee@email.com2011-01-010.00
28181Employee name...employee@email.com2011-01-010.00
28180Employee name...employee@email.com2011-01-010.00
28179Employee name...employee@email.com2011-01-010.00
28178Employee name...employee@email.com2011-01-010.00
28177Employee name...employee@email.com2011-01-010.00
28176Employee name...employee@email.com2011-01-010.00
28175Employee name...employee@email.com2011-01-010.00
28174Employee name...employee@email.com2011-01-010.00
28173Employee name...employee@email.com2011-01-010.00
28172Employee name...employee@email.com2011-01-010.00
28171Employee name...employee@email.com2011-01-010.00
28170Employee name...employee@email.com2011-01-010.00
28169Employee name...employee@email.com2011-01-010.00
28168Employee name...employee@email.com2011-01-010.00
28167Employee name...employee@email.com2011-01-010.00
28166Employee name...employee@email.com2011-01-010.00
28165Employee name...employee@email.com2011-01-010.00
28164Employee name...employee@email.com2011-01-010.00
28163Employee name...employee@email.com2011-01-010.00
28162Employee name...employee@email.com2011-01-010.00
28161Employee name...employee@email.com2011-01-010.00
28152Employee name...employee@email.com2011-01-010.00
28151Employee name...employee@email.com2011-01-010.00
28148Employee name...employee@email.com2011-01-010.00
28146kkemployee@email.com2011-01-010.00
28144edit3employee@email.com2011-01-010.00
28142poipopemployee@email.com2011-01-010.00
28141homeemployee@email.com2011-01-010.00
28140Employee name...employee@email.com2011-01-010.00
28138Employee name...employee@email.com2011-01-012.00
28135testtest@gmail.com2017-09-1020.00
28134Employee name...employee@email.com2011-01-010.00
28133Employee name...employee@email.com2011-01-010.00
28132testemployee@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!