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
 28427Employee name...employee@email.com0000-00-000.00
 28426Employee name...employee@email.com2011-01-010.00
 28425Employee name...employee@email.com2011-01-010.00
 28424Employee name...employee@email.com2011-01-010.00
 28422klk;kemployee@email.com2011-01-010.00
 28420Employee name..employee@email.com2011-01-010.00
 28419Employee name...employee@email.com2011-01-010.00
 28418Employee name...employee@email.com2011-01-010.00
 28416Employee name...employee@email.com2011-01-010.00
 28415Employee name...employee@email.com2011-01-010.00
 28413Employee name...employee@email.com2011-01-010.00
 28412fghdfghemployee@email.com2011-01-010.00
 28411Employee name...employee@email.com2011-01-010.00
 28406employee@email.com2011-01-010.00
 28404Employee name...employee@email.com2011-01-010.00
 28403Employee name...employee@email.com2011-01-010.00
 28402Femployee@email.com2011-01-010.00
 28400Employee name...employee@email.com2011-01-010.00
 28399Employee name...employee@email.com2011-01-010.00
 28397Employee name...employee@email.com2011-01-010.00
 28396Employee name...employee@email.com2011-01-010.00
 28395Employee name...employee@email.com2011-01-010.00
 28394Employee name...employee@email.com2011-01-010.00
 28392Employee name...employee@email.com2011-01-010.00
 28391Employee name...employee@email.com2011-01-010.00
 28390Employee name...employee@email.com2011-01-010.00
 28389Employee name...employee@email.com2011-01-010.00
 28388Employee name...employee@email.com2011-01-010.00
 28387Employee name...employee@email.com2011-01-010.00
 28386Employee name...employee@email.com2011-01-010.00
 28385Employee name...employee@email.com2011-01-010.00
 28384Employee name...employee@email.com2011-01-010.00
 28383Employee name...employee@email.com2011-01-010.00
 28382Employee name...employee@email.com2011-01-010.00
 28381Employee name...employee@email.com2011-01-010.00
 28380Employee name...employee@email.com2011-01-010.00
 28379Employee name...employee@email.com2011-01-010.00
 28378Employee name...employee@email.com2011-01-010.00
 28377Employee name...employee@email.com2011-01-010.00
 28376Employee name...employee@email.com2011-01-010.00
 28375Employee name...employee@email.com2011-01-010.00
 28374Employee name...employee@email.com2011-01-010.00
 28373Employee name...employee@email.com2011-01-010.00
 28372Employee name...employee@email.com2011-01-010.00
 28371Employee name...employee@email.com2011-01-010.00
 28370Employee name...employee@email.com2011-01-010.00
 28369Employee name...employee@email.com2011-01-010.00
 28368Employee name...employee@email.com2011-01-010.00
 28367Employee name...employee@email.com2011-01-010.00
 28366Employee name...employee@email.com2011-01-010.00
 28365Employee name...employee@email.com2011-01-010.00
 28363Employee name...employee@email.com2011-01-010.00
 28361Employee name...employee@email.com2011-01-010.00
 28360Employee name...employee@email.com2011-01-010.00
 28359Employee name...employee@email.com2011-01-010.00
 28358Employeeemployee@email.com2011-01-010.00
 28357Employee name...employee@email.com2011-01-010.00
 28356aa@a.com2011-01-010.00
 28355Employee name...employee@email.com2011-01-010.00
 28354Employee name...employee@email.com2011-01-010.00
 28353aa@a.com2011-01-010.00
 28352Employee name...employee@email.com2011-01-010.00
 28351Employee name...employee@email.com2011-01-010.00
 28350Employee name...employee@email.com2011-01-010.00
 28349Employee name...employee@email.com2011-01-010.00
 28348Employee name...employee@email.com2011-01-010.00
 28347aa@a.com2011-01-010.00
 28346Employee name...employee@email.com2011-01-010.00
 28345Employee name...employee@email.com2011-01-010.00
 28344Employee name...employee@email.com2011-01-010.00
 28343Employee name...employee@email.com2011-01-010.00
 28342Employee name...employee@email.com2011-01-010.00
 28341aa@a.com2011-01-010.00
 28340Employee name...employee@email.com2011-01-010.00
 28339Employee name...employee@email.com2011-01-010.00
 28338Employee name...employee@email.com2011-01-010.00
 28337ppemployee@email.com2011-01-010.00
 28336Employee name...employee@email.com2011-01-010.00
 28333Employee name...employee@email.com2011-01-010.00
 28332Employee name...employee@email.com2011-01-010.00
 28331Employee name...employee@email.com2011-01-010.00
 28330Employee name...employee@email.com2011-01-010.00
 28329Employee name...employee@email.com2011-01-010.00
 28328Employee name...employee@email.com2011-01-010.00
 28327Employee name...employee@email.com2011-01-010.00
 28326Employee name...employee@email.com2011-01-010.00
 28325Employee name...employee@email.com2011-01-010.00
 28324Employee name...employee@email.com2011-01-010.00
 28323Employee name...employee@email.com2011-01-010.00
 28322Employee name...employee@email.com2011-01-010.00
 28321Employee name...employee@email.com2011-01-010.00
 28320Employee name...employee@email.com2011-01-010.00
 28319Employee name...employee@email.com2011-01-010.00
 28318Employee name...employee@email.com2011-01-010.00
 28317Employee name...employee@email.com2011-01-010.00
 28316Employee name...employee@email.com2011-01-010.00
 28315Employee name...employee@email.com2011-01-010.00
 28314Employee name...employee@email.com2011-01-010.00
 28313Employee name...employee@email.com2011-01-010.00
 28312Employee name...employee@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!