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
29181Employee name...employee@email.com2011-01-010.00
29180Employee name...employee@email.com2002-05-0123.00
29179Employee name...employee@email.com2011-01-010.00
29178Employee name...employee@email.com2011-01-010.00
29177Employee name...employee@email.com2011-01-010.00
29176Employee name...employee@email.com2011-01-010.00
29175Employee name...employee@email.com2011-01-010.00
29174asdfemployee@email.com2011-01-010.00
29173Employee name...employee@email.com2011-01-010.00
29172Employee name...employee@email.com2011-01-010.00
29171sdgsdfsdfsdfemployee@email.com2011-01-010.00
29170Employee name...employee@email.com2011-01-010.00
29169Employee name...employee@email.com2011-01-010.00
29168Employee name...employee@email.com2011-01-010.00
29167Employee name...employee@email.com2011-01-010.00
29166Employee name...employee@email.com2011-01-010.00
29165Employee name...employee@email.com2011-01-010.00
29164Employee name...employee@email.com2011-01-010.00
29163Employee name...employee@email.com2011-01-010.00
29162Employee name...employee@email.com2011-01-010.00
29161Employee name...employee@email.com2011-01-010.00
29159Employee name...employee@email.com2011-01-010.00
29157Employee name...employee@email.com2011-01-010.00
29154Employee name...employee@email.com2011-01-010.00
29153Employee name...employee@email.com2011-01-010.00
29152Employee name...employees@email.com2011-01-010.00
29151Employee name...employee@email.com2011-01-010.00
29150Employee name...employee@email.com2011-01-010.00
29149Employee name...employee@email.com2011-01-010.00
29148Employee name...employee@email.com2011-01-010.00
29147Employee name...employee@email.com2011-01-010.00
29146Employee name...employee@email.com2011-01-010.00
29145Employee name...employee@email.com2011-01-010.00
29144Employee name...employee@email.com2011-01-010.00
29143Employee name...employee@email.com2011-01-010.00
29142Employee name...employee@email.com2011-01-010.00
29141Employee name...employee@email.com2011-01-010.00
29140Employee name...employee@email.com2011-01-010.00
29139Employee name...employee@email.com2011-01-010.00
29138Employee name...employee@email.com2011-01-010.00
29137Employee name...employee@email.com2011-01-010.00
29136Employee name...employee@email.com2011-01-010.00
29135Employee name...employee@email.com2011-01-010.00
29134Employee name...employee@email.com2011-01-010.00
29133Employee name...employee@email.com2011-01-010.00
29132Employee name...employee@email.com2011-01-010.00
29131Employee name...employee@email.com2011-01-010.00
29130Employee name...employee@email.com2011-01-010.00
29129Employee name...employee@email.com2011-01-010.00
29128Employee name...employee@email.com2011-01-010.00
29127asaemployee@email.com2011-01-010.00
29126Employee name...employee@email.com2011-01-010.00
29124Employee name...employee@email.com2011-01-010.00
29123Employee name...employee@email.com2011-01-010.00
29122Employee name...employee@email.com2011-01-010.00
29121Employee name...employee@email.com2011-01-010.00
29120Employee name...employee@email.com2011-01-010.00
29119Employee name...employee@email.com2011-01-010.00
29118Employee name...employee@email.com2011-01-010.00
29117Employee name...employee@email.com2011-01-010.00
29116Employee name...employee@email.com2011-01-010.00
29115Employee name...employee@email.com2011-01-010.00
29114Employee name...employee@email.com2011-01-010.00
29113Employee name...employee@email.com2011-01-010.00
29112Employee name...employee@email.com2011-01-010.00
29111Employee name...employee@email.com2011-01-010.00
29110Employee name...employee@email.com2011-01-010.00
29108Employee name...jom@e.com2011-01-010.00
29107Employee name...employee@email.com2011-01-010.00
29106Employee name...employee@email.com2011-01-010.00
29105Employee name...employee@email.com2011-01-010.00
29104Employee name...employee@email.com2011-01-010.00
29102Employee name...employee@email.com2011-01-010.00
29100Employee name...employee@email.com2011-01-010.00
29099Employee name...employee@email.com2011-01-010.00
29098Employee name...employee@email.com2011-01-010.00
29097Employee name...employee@email.com2011-01-0125.00
29094Employee name...employee@email.com2011-01-010.00
29092Employee name...employee@email.com2011-01-010.00
29091Employee name...employee@email.com2011-01-010.00
29090Employee name...employee@email.com2011-01-0112.00
29089Employee name...employee@email.com2011-01-010.00
29088Employee name...employee@email.com2011-01-010.00
29087Employee name...employee@email.com2011-01-0123.36
29086Employee name...employee@email.com2011-01-010.00
29083Employee name...employee@email.com2007-01-010.00
29082ASemployee@email.com2011-01-010.00
29078Employee name...employee@email.com2011-01-010.00
29077Bonjouremployee@email.com2011-01-010.00
29075Employee name...employee@e123mail.com2011-01-010.00
29074Employee name...employee@email.com2011-01-010.00
29073Employee name...employee@email.com2011-01-010.00
29072Employee name...employee@email.com2011-01-010.00
29070Employee name...employee@email.com2011-01-010.00
29067Employee name...employee@email.com2011-01-010.00
29066saurabhssssssssssaurabh@gmail.com2011-01-010.00
29065Employee name...employee@email.com2011-01-010.00
29064saurabhsaurabh@gmail.com2011-01-010.00
29063Employee name...employee@email.com2011-01-010.00
29061thingemployee@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!