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
27551Employee name...employee@email.com2011-01-010.00
27550Employee name...employee@email.com2011-01-010.00
27549Employee name...employee@emaidl.com2011-01-010.00
27548Employee name...employee@email.com2011-01-0166.77
27544wemployee@email.com2011-01-090.00
27543adfjyvhnointcpaiiuhncrciuhnticnhmlwemployee@email.com2011-01-010.00
27542Employee name...employee@email.com2011-01-010.00
27541Employee name...employee@email.com2011-01-010.00
27540Employee name...employee@email.com2011-01-010.00
27539Employee name...employee@email.com2011-01-010.00
27538Employee name...employeep@email.com2011-01-010.00
27537Employee name...employee@email.com2011-01-010.00
27536Employee name...employee@email.com2011-01-010.00
27535Employee name...employee@email.com2011-01-010.00
27534Employee name...employee@email.com2011-01-010.00
27533Employee name...employee@email.com2011-01-010.00
27532Employee name...employee@email.com2011-01-010.00
27531Employee name...employee@email.com2011-01-010.00
27529Employee name...employee@email.com2011-01-010.00
27528Employee name...employee@email.com2011-01-010.00
27527Employee name...employee@email.com2011-01-010.00
27526Employee name...employee@email.com2011-01-010.00
27525Employee name...employee@email.com2011-01-010.00
27524Employee name...aaaemployee@email.com2011-01-010.00
27522aaaaemployee@email.com2011-01-010.00
27521Employee name...employee@email.com2011-01-010.00
27518eeeemployee@email.com2011-01-010.00
27517Employee name...employee@email.com2011-01-010.00
275145456employee@email.com2011-01-010.00
27513Employee name...employee@email.com2011-01-010.00
27512Employee name...employee@email.com2011-01-010.00
27511asdfasdfemployee@email.com2011-01-010.00
27510Employee name...employee@email.com2011-01-010.00
27509Employee name...employee@email.com2011-01-010.00
27508Employee name...employee@email.com2011-01-010.00
27502magosqwemployee@email.com2011-01-010.00
27501Employee name...employee@email.com2011-01-010.00
27500aaaaaadfemployee@email.com2011-01-010.00
27499Employee name...employee@email.com2011-01-010.00
27498Employee name...employee@email.com2011-01-010.00
27497Employee name...employee@email.com2011-01-010.00
27496Employee name...employee@email.com2011-01-010.00
27495Employee name...employee@email.com2011-01-010.00
27494Employee name...employee@email.com2011-01-010.00
27493Employee name...employee@email.com2011-01-010.00
27491Employee name...employee@email.com2011-01-010.00
27490Employee name...employee@email.com2011-01-010.00
27489Employee name...employee@email.com2011-01-010.00
27487Employee name...employee@email.com2011-01-010.00
27486Employee name...employee@email.com2011-01-010.00
27485Employee name...employee@email.com2011-01-010.00
27484Employee name...employee@email.com2011-01-010.00
27483Employee name...employee@email.com2011-01-010.00
27481Employee name...employee@email.com2011-01-010.00
27480Employee name...employee@email.com2011-01-010.00
27479yrreeemployee@email.com2011-01-010.00
27478Employee name...employee@email.com2011-01-010.00
27477sdgfdfgfdgemployee@email.com2011-01-01123.22
27476Employee name...employee@email.com2011-01-010.00
27475Employeeme...employee@email.com2011-01-010.00
27474Employee name...dsadasdemployee@email.com2011-01-010.00
27470Employee name...test2@email.com2011-01-010.00
27467sdfsa@sad.sad2011-01-010.00
27466qsemployee@email.com2011-01-010.00
27465Employee name...employee@email.com2011-01-010.00
27462Employee name...employee@email.com2011-01-010.00
27461Employee name...employee@email.com2011-01-010.00
27459Employee name...employee@email.com2011-01-010.00
27458Employee name...employee@email.com2011-01-010.00
27457Employee name...employee@email.com2011-01-01440.00
27456Employee name...employee@email.com2011-01-010.00
27455Employee name...employee@email.com2011-01-010.00
27454Employee name...employee@email.com2011-01-010.00
27453Employee name...employee@email.com2011-01-010.00
27452Employee name...employee@email.com2011-01-010.00
27451Employee name...employee@email.com2011-01-010.00
27449Employee name...employee@email.com2011-01-010.00
27448Employee name...ed@ED.COm2011-01-010.00
27447Employee name...employee@email.com2011-01-010.00
27446Employee name...employee@email.com2011-01-010.00
27445n,n;nemployee@email.com2011-01-010.00
27443Employee name...employee@email.com2011-01-010.00
27442Employee name...employee@email.com2011-01-010.00
27441Employee name...employee@email.com2011-01-010.00
27440Employee name...employee@email.com2011-01-010.00
27439Employee name...employee@email.com2011-01-010.00
27438Employee name...employee@email.com2011-01-010.00
27437Employee name...employee@email.com2011-01-010.00
27436vvbnvnbemployee@email.com2011-01-010.00
27435Njhjhgjgemployee@email.com2011-01-010.00
27434Employee name...employee@email.com2011-01-010.00
27431Employee name...employee@email.com2011-01-010.00
27430Employee name...employee@email.com2011-01-010.00
27429hjjjklemployee@email.com2011-01-010.00
27427kkkkkkklemployee@email.com2011-01-010.00
27426Employee name...employee@email.com2011-01-010.00
27425Employee name...employee@email.com2011-01-010.00
27424Employee name...employee@email.com2011-01-010.00
27423employee@email.com2011-01-010.00
27422Employee 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!