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
30098Employee name...employee@email.com2011-01-010.00
30097Employee name...employee@email.com2011-01-010.00
30096Employee name...employee@email.com2011-01-010.00
30095Employee name...employee@email.com2011-01-010.00
30094Employee name...employee@email.com2011-01-010.00
30093Employee name...employee@email.com2011-01-010.00
30092iipipipipipipemployee@email.com2011-01-010.00
30089Boboemployee@email.com2011-01-010.00
30088Employee name...employee@email.com2011-01-010.00
30087Employee name...employee@email.com2011-01-010.00
30086Employee name...employee@email.com2011-01-010.00
30085Employee name...employee@email.com2011-01-010.00
30084Employee name...employee@email.com2011-01-010.00
30083Employee name...employee@email.com2011-01-010.00
30082Employee name...employee@email.com2011-01-010.00
30081Employee name...employee@email.com2011-01-010.00
30080Employee name...employee@email.com2011-01-010.00
30079Employee name...employee@email.come2011-01-0110.00
30078Employee name...employee@email.com2011-01-010.00
30077Employee name...aaaaaa@ercan.com.tr2008-04-150.00
30076Employee name...employee@email.com2011-01-010.00
30075Employee name...employee@gmail.com1996-08-0125.09
30074Employee name...employee@email.com2011-01-010.00
30073Employee name...employee@email.com2011-01-010.00
30072Employee name...employee@email.com2011-01-010.00
30071Employee name...employee@email.com2011-01-010.00
30070Employee name...employee@email.com2011-01-010.00
30069Employee name...employee@email.com2011-01-010.00
30068Employee name...employee@email.com2011-01-010.00
30067Employee name...employee@email.com2011-01-010.00
30066Employee name...employee@email.com2011-01-010.00
30065Employee name...employee@email.com2011-01-010.00
30064Employee name...employee@email.com2011-01-010.00
30063Employee name...employee@email.com2011-01-010.00
30062Employee name...employee@email.com2011-01-010.00
30061Employee name...employee@email.com2011-01-010.00
30060Employee name...employee@email.com2011-01-010.00
30059Employee name...employee@email.com2011-01-010.00
30058Employee name...employee@email.com2011-01-010.00
30057Employee name...employee@email.com2011-01-010.00
30056Employee name...employhhee@email.com2011-01-010.00
30055Employee name...employee@email.com2011-01-010.00
30054Employee name...employee@email.com2011-01-010.00
30053Employee name...employee@email.com2011-01-010.00
30052Employee name...employee@email.com2011-01-010.00
30051Employee name...employee@email.com2011-01-010.00
30050Employee name...employee@email.com2011-01-010.00
30049Employee name...employee@email.com2011-01-010.00
30048Employee name...employee@email.com2011-01-010.00
30047Employee name...employee@email.com2011-01-010.00
30046Employee name...employee@email.com2011-01-010.00
30045Employee name...employee@email.com2011-01-010.00
30044Employee name...employee@email.com2011-01-010.00
30043Employee name...employee@email.com2011-01-010.00
30042Employee name...employee@email.com2011-01-010.00
30039Employee name...employee@email.com2011-01-010.00
30038Employee name...employee@email.com2011-01-010.00
30037Employee name...employee@email.com2011-01-010.00
30036Employee name...employee@email.com2011-01-010.00
30035Employee name...employee@email.com2011-01-010.00
30034Employee name...employee@email.com2011-01-010.00
30033Employee name...employee@email.com2011-01-010.00
30032Employee name...employee@email.com2011-01-010.00
30031Employee name...employee@email.com2011-01-010.00
30030Employee name...employee@email.com2011-01-010.00
30029Employee name...employee@email.com2011-01-010.00
30028Employee name...employee@email.com2011-01-010.00
30027Employee name...employee@email.com2011-01-010.00
30026Employee name...employee@email.com2011-01-010.00
30025Employee name...employee@email.com2011-01-010.00
30024Employee name...employee@email.com2011-01-010.00
30023Nur Dheereemployee@email.com2011-01-010.00
30022Employee name...employee@email.com2011-01-010.00
30021Employee name...employee@email.com2011-01-010.00
30020Employee name...employee@email.com2011-01-010.00
30019Employee name...employee@email.com2011-01-010.00
30018Employee name...employee@email.com2011-01-010.00
30017Employee name...employee@email.com2011-01-010.00
30016Employee name...employee@email.com2011-01-010.00
30015Employee name...employee@email.com2011-01-010.00
30014Employee name...employee@email.com2011-01-010.00
30013gumbyemployee@email.com0000-00-00600.00
30012pokeyemployee@email.com2011-01-01300.00
30011steveemployee@email.com2011-01-010.00
30010bettyemployee@email.com2011-01-010.00
30009wilmaemployee@email.com2011-01-010.00
30008bubbabubba@bubba.com2011-01-010.00
30007The Dudeemployee@email.com2011-01-010.00
30006Employee name...sdfsdf@ioi.edu2011-01-010.00
30005gretgtrgeemployee@email.com2011-01-010.00
30004rtgrtgemployee@email.com2011-01-010.00
30003rtgretgemployee@email.com2011-01-010.00
30002Employee name...employee@email.com2011-01-010.00
30001Employee name...employee@email.com2011-01-010.00
30000Employee name...employee@email.com2011-01-010.00
29999Employee name...employee@email.com2011-01-010.00
29998fdsvfdsvemployee@email.com2011-01-010.00
29997efrdfgbdfbemployee@email.com2011-01-010.00
29996Employee name...employee@email.com2011-01-010.00
29995dweemployee@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!