Checkbox 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 :

Note: keyboard navigation and selection are disabled in this demo.

 Id Name Email Start Date Salary
 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 = {
			public_methods: true,
			btn_reset: true,
			alternate_rows: true,
			loader: true,
			rows_counter: true,
			paging: false,
			col_0: 'none',
			col_width:['70px', '50px', '280px', '220px', '100px', '100px'],
			col_date_type: [null, null, null, null, 'ymd', null],
			sort_config: { sort_types: ['number','string','string','ymd','number'] },
			grid_layout: true, grid_width: '840px', grid_height: '300px',
			grid_enable_cols_resizer: false,
			mark_active_columns: true,
			
			//Checkbox header is referenced once filters are generated
			on_filters_loaded: function(o){
				var headersRow = o.headTbl.rows[o.GetHeadersRowIndex()];
				var c = headersRow.cells[0];
				var ezConfig = o.fObj.ezEditTable_config;
				//header checkbox is referenced on ezEditTable configuration object o.ezEditTable.checkBoxAll
				ezConfig.checkBoxAll = tf_Tag(c, 'input')[0];
				//header checkbox always unselected at start
				ezConfig.checkBoxAll.checked = false;
				//Click event is attached to header checkbox, note o.fObj = TF configuration object
				tf_AddEvent(ezConfig.checkBoxAll, 'click', function(e){ o.fObj.toggleAll(o); });
			},
			
			selectable: true,
			editable: false,
			ezEditTable_config: {
				key_navigation: false,
				key_selection: false,
				selection_model: 'multiple',
				default_selection: 'row',
				selected_row_css: 'ezSlcRow',
				
				on_after_selected_row: function(o, row){
					var c = row.cells[0];
					var checkBox = o.Tag(c, 'input')[0];
					if(checkBox) checkBox.checked = true;
				},
				on_after_deselected_row: function(o, row){
					var c = row.cells[0];
					var checkBox = o.Tag(c, 'input')[0];
					if(checkBox) checkBox.checked = false;
					o.config.checkBoxAll.checked = false;
				}
			},
			
			/* Sky Blue theme */  
			themes: {   
				name:['SkyBlueTheme'],   
				src:['TableFilter/TF_Themes/SkyBlue/TF_SkyBlue.css'],   
				description:['SkyBlue stylesheet']
			},
			
			//Custom select all function used by header checkbox
			toggleAll: function(tf){ //tf = parent object: TF
				var o = tf.ezEditTable; //ezEditTable object referenced inside TF object
				if(o.config.checkBoxAll.checked == false){
					o.Selection.ClearSelections();
				} else {
					for(var i=o.startRow; i<o.GetRowsNb(); i++){
						//If table filtered, only valid rows are selected
						if(tf.GetValidRowsIndex()==null || tf.GetValidRowsIndex().indexOf(i) != -1)
							o.Selection.SelectRowByIndex(i);
					}
				}
			}
		};
		

E.n.j.o.y.  ads-free content!