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
27670kozakoza@email.com2011-01-010.00
27669Employee name...employee@email.com2011-01-010.00
27668Employee name...employee@email.com2011-01-010.00
27667Employee name...employee@email.com2011-01-010.00
27666Employee name...employee@email.com2011-01-010.00
27665Employee name...employee@email.com2011-01-010.00
27664Employee name...employee@email.com2011-01-010.00
27663Employee name...employee@email.com2011-01-010.00
27662Employee name...employee@email.com2011-01-010.00
27661Employee name...employee@email.com2011-01-010.00
27659Employee name...employee@email.com2011-01-010.00
27658Employee name...employee@email.com2011-01-010.00
27657Employee name...employee@email.com2011-01-010.00
27656Employee name...employee@email.com2011-01-010.00
27655Employee name...employee@email.com2011-01-010.00
27654Employee name...employee@email.com2011-01-010.00
27653Employee name...employee@email.com2011-01-010.00
27652ujhemployee@email.com2011-01-010.00
27651ABC alaemployee@email.com2011-01-010.00
27650Employee name...employee@email.com2011-01-010.00
27648Employee name...employee@email1.com2011-01-010.00
27647Employee name...employee@email.com2011-01-010.00
27646Employee name...employee@email.com2011-01-010.00
27645Employee name...employee@email.com2011-01-010.00
27644Employee name...employee@email.com2011-01-010.00
27643Employee name...employee@email.com2011-01-010.00
27642xxxxxxxxxxxxxxxxxemployee@email.com2011-01-010.00
27640Employee name...employee@email.com2011-01-010.00
27639Employee name...employee@email.com2011-01-010.00
27638Employee name...employee@email.com2011-01-010.00
27637Employee name...employee@email.com2011-01-010.00
27636Employee name...employee@email.com2011-01-010.00
27635Employee name...employee@email.com2011-01-010.00
27634kozio?ekemployee@email.com2011-01-010.00
27633ggfggfghgjjgjhemployee@email.com2011-01-010.00
27632Employee name...employee@email.com2011-01-010.00
27631Employee name...employee@email.com2011-01-010.00
27630Employee name...employee@email.com2011-01-010.00
27629Employee name...employee@email.com2011-01-010.00
27628Employee name...employee@email.com2011-01-010.00
27627Employee name...employee@email.com2011-01-010.00
27626Employee name...employee@email.com2011-01-010.00
27625Employee name...employee@email.com2011-01-010.00
27624Employee name...employee@email.com2011-01-010.00
27623Employee name...employ_ee@email.com2011-01-010.00
27622Employee name...employee@email.com2011-01-010.00
27621Employee name...employee@email.com2011-01-010.00
27620Employee name...employee@email.com2011-01-010.00
27619Employee name...employee@email.com2011-01-010.00
27618Employee name...employee@email.com2011-01-010.00
27617Employee name...employee@email.com2011-01-010.00
27616Employee name...employee@email.com2011-01-010.00
27615Employee name...employee@email.com2011-01-010.00
27614Employee name...employee@email.com2011-01-010.00
27613Employee name...employee@email.com2011-01-010.00
27612Employee name...employee@email.com2011-01-010.00
27610Employee name...employee@email.com2011-01-010.00
27609Employee name...employasdasdee@email.com2011-01-010.00
27607Employee name...employee@email.com2011-01-010.00
27605Employee name...employee@email.com2011-01-010.00
27604Employee name...empl@email.com2011-01-010.00
27603kjkjmpemployee@email.com2011-01-010.00
27602essaiemployee@email.com2011-01-010.00
27601Employee name...employee@email.com2011-01-010.00
27599sdfghjkemployee@email.come2011-01-010.00
27598jhgkkl4employettr@email.com2011-01-010.00
27596jhgkkl4employee@email.com2011-01-010.00
27594jhgkkl4employee@email.com2011-01-010.00
27593jhgkkl4employee@email.com2011-01-010.00
27592Employee name...employee@email.com2011-01-010.00
27591jhgkkl4employppppppp@email.com2011-01-010.00
27590jhgkkl4employee@email.com2011-01-010.00
27589jhgkkl4employeemmmm@email.com2011-01-010.00
27588Employee name...employee@email.com2011-01-010.00
27587jhgkkl4employee@email.com2011-01-010.00
27586jhgkkl4employee@email.com2011-01-010.00
27585Employee name...employee@email.com2011-01-010.00
27584jhgkkl4employee@email.com2011-01-010.00
27583Employee name...employee@email.com2011-01-010.00
27582Employee name...employee@email.com2011-01-010.00
27579Employee name...employee@email.com2011-01-010.00
27578Employee name...employee@email.com2011-01-010.00
27577Employee name...employee@email.com2011-01-010.00
27576Employee name...employee@email.com2011-01-010.00
27575ddffddemployee@email.com2011-01-010.00
27573Employee name...employepppppe@email.com2011-01-010.00
27572Employee name...employee@email.com2011-01-010.00
27571Employee name...employee@email.com2011-01-010.00
27570Employee name...employee@email.com2011-01-010.00
27569Employee name...employee@email.com2011-01-010.00
27568Employee name...employee@email.com2011-01-010.00
27567Employee name...employee@email.com2011-01-010.00
27563Employee name...employee@email.com2011-01-010.00
27561Robertoemployee@email.com2011-01-010.00
27560Employee name...employee@email.com2011-01-010.00
27559Robertoemployee@email.com2011-01-010.00
27558Employee name...employee@email.com2011-01-010.00
27555Employee name...employee@email.com2011-01-010.00
27553Employee name...employee@email.com2011-01-010.00
27552Employee name...fgfhfjfjg@ytytt.fr2011-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!