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
 29559Employee name...aemployee@email.com2011-01-010.00
 29558Employee name...employee@email.com2011-01-010.00
 29551Employee name...employee@email.com2011-01-010.00
 29550Name khonamekho@email.com2011-01-010.00
 29546ADSADAemployee@email.com2011-01-010.00
 29545asdemployee@email.com2011-01-010.00
 29541Ramon Melgarejo tasdf adsframon.melgarejo@mail.com2011-01-014500000.00
 29539Employee name...HEHEH@HEHEHE.COM2011-01-010.00
 29536Employee name...employee@email.com2011-01-010.00
 29535Employee name...employee@email.com2011-01-010.00
 29533Employee name...employee@email.com2011-01-010.00
 29531Employee name...employee@email.com2011-01-010.00
 29530Employee name...employee@email.com2011-01-010.00
 29529Employee name...employee@email.com2011-01-010.00
 29528Employee name...employee@email.com2011-01-010.00
 29527Employee name...employee@email.com2011-01-010.00
 29526Employee name...employee@email.com2011-01-010.00
 29525Employee name...employee@email.com2011-01-010.00
 29524Employee name...employee@email.com2011-01-010.00
 29523Employee name...employee@email.com2011-01-010.00
 29522Employee name...employee@email.com2011-01-010.00
 29521Employee name...employee@email.com2011-01-010.00
 29520Employee name...employee@email.com2011-01-010.00
 29519Employee name...employee@email.com2011-01-010.00
 29518Employee name...employee@email.com2011-01-010.00
 29517Employee name...employee@email.com2011-01-010.00
 29516Employee name...employee@email.com2011-01-010.00
 29515Employee name...employee@email.com2011-01-010.00
 29514Employee name...employee@email.com2011-01-010.00
 29513Employee name...employee@email.com2011-01-010.00
 29512Employee name...employee@email.com2011-01-010.00
 29511Employee name...employee@email.com2011-01-010.00
 29510Employee name...employee@email.com2011-01-010.00
 29509Employee name...employee@email.com2011-01-010.00
 29508Employee name...employee@email.com2011-01-010.00
 29507Employee name...employee@email.com2011-01-010.00
 29506opkopkpoemployee@email.com2011-01-010.00
 29505Employee name...employee@email.com2011-01-010.00
 29504Employee name...employee@email.com2011-01-010.00
 29503Employee name...employee@email.com2011-01-010.00
 29502Employee name...employee@email.com2011-01-010.00
 29501Employee name...employee@email.com2011-01-010.00
 29500Employee name...employee@email.com2011-01-010.00
 29499Employee name...employee@email.com2011-01-010.00
 29498Employee name...employee@email.com2011-01-010.00
 29497Employee name...employee@email.com2011-01-010.00
 29496Employee name...employee@email.com2011-01-010.00
 29495Employee name...employee@email.com2011-01-010.00
 29494Employee name...employee@email.com2011-01-010.00
 29493Employee name...employee@email.com2011-01-010.00
 29492Employee name...employee@email.com2011-01-010.00
 29491Employee name...employee@email.com2011-01-010.00
 29490Employee name...employee@email.com2011-01-010.00
 29489Employee name...employee@email.com2011-01-010.00
 29488Employee name...employee@email.com2011-01-010.00
 29487Employee name...employee@email.com2011-01-010.00
 29486Employee name...employee@email.com2011-01-010.00
 29485Employee name...employee@email.com2011-01-010.00
 29484Employee name...employee@email.com2011-01-010.00
 29483Employee name...employee@email.com2011-01-010.00
 29482Employee name...employee@email.com2011-01-010.00
 29481Employee name...employee@email.com2011-01-010.00
 29480Employee name...employee@email.com2011-01-010.00
 29479Employee name...employee@email.com2011-01-010.00
 29478Employee name...employee@email.com2011-01-010.00
 29477dasdsad a dasemployee@email.com2011-01-010.00
 29476sdfsdfsdffsdemployee@email.com2011-01-010.00
 29475sdfsdfsdffsdemployee@email.com2011-01-010.00
 29474Employee name...employee@email.com2011-01-010.00
 29473sdfsdfsdffsdemployee@email.com2011-01-010.00
 29472Employee name...employee@email.com2011-01-010.00
 29471sdfsdfsdffsdemployee@email.com2011-01-010.00
 29468blurghblurgh@asdf.com2011-01-010.00
 29467hjtyjytjty@email.com2011-01-010.00
 29466Nome do empregado...employee@email.com2011-01-010.00
 29463Nome do empregado...employee@email.com2011-01-010.00
 29462Employee name...employee@email.com2011-01-010.00
 29458sdfsdfs s ssdfemployee@email.com2011-01-010.00
 29457sdadsadasdemployee@email.com2011-01-010.00
 29455eeeemployee@email.com2011-01-010.00
 29452Employee name...employee@email.com2011-01-010.00
 29450Employee name...employee@email.com2011-01-010.00
 29448Employee name...employee@email.com2011-01-010.00
 29447semployee@email.com2011-01-010.00
 29446ssaemployee@email.com2011-01-010.00
 29444Employee name...employee@email.com2011-01-010.00
 29443Employee name...employee@email.com2011-01-010.00
 29442Employee name...employee@email.com2011-01-010.00
 29441oioioemployee@email.com2011-01-010.00
 29440Employee name...employee@email.com2011-01-010.00
 29439Employee name...employee@email.com2011-01-010.00
 29438Employee name...employee@email.com2011-01-010.00
 29437Employee name...employee@email.com2011-01-010.00
 29436Employee name...employee@email.com2011-01-010.00
 2943574employee@email.com2011-01-010.00
 29434Employee name...employee@email.com2011-01-010.00
 29433Employee name...employee@email.com2011-01-010.00
 29432Employee name...employee@email.com2011-01-010.00
 29431Employee name...employee@email.com2011-01-010.00
 29430Employee 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!