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
 27670kozakoza@email.com2011-01-010.00
 27669Employee name...employee@email.com2011-01-010.00
 27668Employee name...employee@email.com2011-01-010.00
 27667Employee name...employee@email.com2011-01-010.00
 27666Employee name...employee@email.com2011-01-010.00
 27665Employee name...employee@email.com2011-01-010.00
 27664Employee name...employee@email.com2011-01-010.00
 27663Employee name...employee@email.com2011-01-010.00
 27662Employee name...employee@email.com2011-01-010.00
 27661Employee name...employee@email.com2011-01-010.00
 27659Employee name...employee@email.com2011-01-010.00
 27658Employee name...employee@email.com2011-01-010.00
 27657Employee name...employee@email.com2011-01-010.00
 27656Employee name...employee@email.com2011-01-010.00
 27655Employee name...employee@email.com2011-01-010.00
 27654Employee name...employee@email.com2011-01-010.00
 27653Employee name...employee@email.com2011-01-010.00
 27652ujhemployee@email.com2011-01-010.00
 27651ABC alaemployee@email.com2011-01-010.00
 27650Employee name...employee@email.com2011-01-010.00
 27648Employee name...employee@email1.com2011-01-010.00
 27647Employee name...employee@email.com2011-01-010.00
 27646Employee name...employee@email.com2011-01-010.00
 27645Employee name...employee@email.com2011-01-010.00
 27644Employee name...employee@email.com2011-01-010.00
 27643Employee name...employee@email.com2011-01-010.00
 27642xxxxxxxxxxxxxxxxxemployee@email.com2011-01-010.00
 27640Employee name...employee@email.com2011-01-010.00
 27639Employee name...employee@email.com2011-01-010.00
 27638Employee name...employee@email.com2011-01-010.00
 27637Employee name...employee@email.com2011-01-010.00
 27636Employee name...employee@email.com2011-01-010.00
 27635Employee name...employee@email.com2011-01-010.00
 27634kozio?ekemployee@email.com2011-01-010.00
 27633ggfggfghgjjgjhemployee@email.com2011-01-010.00
 27632Employee name...employee@email.com2011-01-010.00
 27631Employee name...employee@email.com2011-01-010.00
 27630Employee name...employee@email.com2011-01-010.00
 27629Employee name...employee@email.com2011-01-010.00
 27628Employee name...employee@email.com2011-01-010.00
 27627Employee name...employee@email.com2011-01-010.00
 27626Employee name...employee@email.com2011-01-010.00
 27625Employee name...employee@email.com2011-01-010.00
 27624Employee name...employee@email.com2011-01-010.00
 27623Employee name...employ_ee@email.com2011-01-010.00
 27622Employee name...employee@email.com2011-01-010.00
 27621Employee name...employee@email.com2011-01-010.00
 27620Employee name...employee@email.com2011-01-010.00
 27619Employee name...employee@email.com2011-01-010.00
 27618Employee name...employee@email.com2011-01-010.00
 27617Employee name...employee@email.com2011-01-010.00
 27616Employee name...employee@email.com2011-01-010.00
 27615Employee name...employee@email.com2011-01-010.00
 27614Employee name...employee@email.com2011-01-010.00
 27613Employee name...employee@email.com2011-01-010.00
 27612Employee name...employee@email.com2011-01-010.00
 27610Employee name...employee@email.com2011-01-010.00
 27609Employee name...employasdasdee@email.com2011-01-010.00
 27607Employee name...employee@email.com2011-01-010.00
 27605Employee name...employee@email.com2011-01-010.00
 27604Employee name...empl@email.com2011-01-010.00
 27603kjkjmpemployee@email.com2011-01-010.00
 27602essaiemployee@email.com2011-01-010.00
 27601Employee name...employee@email.com2011-01-010.00
 27599sdfghjkemployee@email.come2011-01-010.00
 27598jhgkkl4employettr@email.com2011-01-010.00
 27596jhgkkl4employee@email.com2011-01-010.00
 27594jhgkkl4employee@email.com2011-01-010.00
 27593jhgkkl4employee@email.com2011-01-010.00
 27592Employee name...employee@email.com2011-01-010.00
 27591jhgkkl4employppppppp@email.com2011-01-010.00
 27590jhgkkl4employee@email.com2011-01-010.00
 27589jhgkkl4employeemmmm@email.com2011-01-010.00
 27588Employee name...employee@email.com2011-01-010.00
 27587jhgkkl4employee@email.com2011-01-010.00
 27586jhgkkl4employee@email.com2011-01-010.00
 27585Employee name...employee@email.com2011-01-010.00
 27584jhgkkl4employee@email.com2011-01-010.00
 27583Employee name...employee@email.com2011-01-010.00
 27582Employee name...employee@email.com2011-01-010.00
 27579Employee name...employee@email.com2011-01-010.00
 27578Employee name...employee@email.com2011-01-010.00
 27577Employee name...employee@email.com2011-01-010.00
 27576Employee name...employee@email.com2011-01-010.00
 27575ddffddemployee@email.com2011-01-010.00
 27573Employee name...employepppppe@email.com2011-01-010.00
 27572Employee name...employee@email.com2011-01-010.00
 27571Employee name...employee@email.com2011-01-010.00
 27570Employee name...employee@email.com2011-01-010.00
 27569Employee name...employee@email.com2011-01-010.00
 27568Employee name...employee@email.com2011-01-010.00
 27567Employee name...employee@email.com2011-01-010.00
 27563Employee name...employee@email.com2011-01-010.00
 27561Robertoemployee@email.com2011-01-010.00
 27560Employee name...employee@email.com2011-01-010.00
 27559Robertoemployee@email.com2011-01-010.00
 27558Employee name...employee@email.com2011-01-010.00
 27555Employee name...employee@email.com2011-01-010.00
 27553Employee name...employee@email.com2011-01-010.00
 27552Employee name...fgfhfjfjg@ytytt.fr2011-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!