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
27476Employee name...employee@email.com2011-01-010.00
27475Employee name...employee@email.com2011-01-010.00
27474Employee name...employee@email.com2011-01-010.00
27472sdsadsa;sss@gmail.com2011-01-010.00
27470Employee name...employe2@email.com2011-01-010.00
27469sddddddddde@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
27460okemployee@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
27450Employee 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
27444Employee name...employee@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
27420Employee name...employee@email.com2011-01-010.00
27419Employee name...employee@email.com2011-01-010.00
27418Employee name...employee@email.com2011-01-010.00
27417Employee name...employee@email.com2011-01-010.00
27416lgd;fgemployee@email.com2011-01-010.00
27415Employee name...employee@email.com2011-01-010.00
27414Employee name...employee@email.com2011-01-010.00
27413Employee nemployee@email.com2011-01-010.00
27412Employee name.employee@email.com2011-01-010.00
27411Employee name...employee@email.com2011-01-010.00
27410Employee name...employee@email.com2011-01-010.00
27409Employee name...employee@email.com2011-01-010.00
27408youemployee@email.com2017-01-010.00
27406Employee name...employee@email.com2011-01-010.00
27405Employee name...employee@email.com2011-01-010.00
27404Employee name...employee@email.com2011-01-010.00
27403Employee name...employee@email.com2011-01-010.00
27402Employee name...employee@email.com2011-01-010.00
27401Employee name...employee@email.com2011-01-010.00
27399Dupa pipaemployee@email.com2011-01-010.00
27398Employee name...employee@email.com2011-01-010.00
27397Employee name...employee@email.com2011-01-010.00
27396Employee name...employee@email.com2011-01-010.00
27395Employee name...employee@email.com2011-01-010.00
27394Employee name...employee@email.com2011-01-010.00
27393Employee name...employee@email.com2011-01-010.00
27391Employee name...employee@email.com2011-01-010.00
27390Employee name...employee@email.com2011-01-010.00
27389Employee name...employee@email.com2011-01-010.00
27388Employee name...employee@email.com2011-01-010.00
27387Employee name...employee@email.com2011-01-010.00
27386Employee name...employee@email.com2011-01-010.00
27384Employee name...employee@email.com2011-01-010.00
27383Employee name...employee@email.com2011-01-010.00
27382Employee name...employee@email.com2011-01-010.00
27381Employee name...employee@email.com2011-01-010.00
27380Employee name...employee@email.com2011-01-010.00
27379Employee name...employee@email.com2011-01-010.00
27378Employee name...employee@email.com2011-01-010.00
27377Employee name...employee@email.com2011-01-010.00
27375Employee name...employee@email.com2011-01-010.00
27374Employee name...employee@email.com2011-01-010.00
27373Employee name...employee@email.com2011-01-010.00
27372Employee name...employee@email.com2011-01-010.00
27371Employee name...employee@email.com2011-01-010.00
27370Employee name...employee@email.com2011-01-010.00
27369Employee name...employee@email.com2011-01-010.00
27368Employee name...employee@email.com2011-01-010.00
27367Employee name...employee@email.com2011-01-010.00
27366Employee name...employee@email.com2011-01-010.00
27365Employee name...employee@email.com2011-01-010.00
27364Employee name...employee@email.com2011-01-010.00
27361Employee 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!