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
 28253Employee name...employee@email.com2011-01-010.00
 28252tetoteto@email.com2011-01-010.00
 28251mostafa ahmedmostafaahmll@yahoo.com2011-01-010.00
 28250mostaaf ahmedmostafaahmed@gmail.com2011-01-010.00
 28249Employee name...employee@email.com2011-01-010.00
 28248Employee name...employee@email.com2011-01-010.00
 28247Employee name...employee@email.com2011-01-010.00
 28246Employee name...employee@email.com2011-01-010.00
 28245Employee name...employee@email.com2011-01-010.00
 28244Employee name...employee@email.com2011-01-010.00
 28243Employee name...employee@email.com2011-01-010.00
 28242Employee name...employee@email.com2011-01-010.00
 28241Employee name...employee@email.com2011-01-010.00
 28240Employee name...132@email.com2011-01-010.00
 28239asdasdadasdasd@email.com2011-01-010.00
 28235Employee name...employee@email.com2011-01-010.00
 28234Employee name...employee@email.com2011-01-010.00
 28233Employee name...employee@email.com2011-01-010.00
 28232zxczczxcxcemployee@email.com2011-01-010.00
 28231Employee name...employee@email.com2011-01-010.00
 28230Employee name...employee@email.com2011-01-010.00
 28229Robertde@niro.com2011-01-010.00
 28228Employee name...employee@email.com2011-01-010.00
 28227sdsemployee@email.com2011-01-010.00
 28225Employee name...employee@email.com2011-01-010.00
 28224Toto Cutognototoo@yahoo.com2000-05-040.00
 28223Employee name...employee@email.com2011-01-010.00
 28222Employee name...employee@email.com2011-01-010.00
 28221fgjhemployee@email.com2011-01-010.00
 28220Employee name...employee@email.com2011-01-010.00
 28219Employee name...employee@email.com2011-01-010.00
 28218Employee name...employee@email.com2011-01-010.00
 28217Employee name...employee@email.com2011-01-010.00
 28216Employee name...employee@email.com2011-01-010.00
 28215Employee name...employee@email.com2011-01-010.00
 28214Employee name...employee@email.com2011-01-010.00
 28213Employee name...employee@email.com2011-01-010.00
 28212Employee name...employee@email.com2011-01-010.00
 28211Employee name...employee@email.com2011-01-010.00
 28210Employee name...123@email.com2011-01-012.00
 28209Employee name...employee@email.com2011-01-010.00
 28208Employee name...employee@email.com2011-01-010.00
 28207hoaraumon@gmail.com2011-01-010.00
 28206Employee name...employee@email.com2011-01-010.00
 28205Employee name...employee@email.com2011-01-010.00
 28204Employee name...employee@email.com2011-01-010.00
 28203Employee name...employee@email.com2011-01-010.00
 28201Employee name...mon@gmail.com2011-01-010.00
 28200Employee name...employee@email.com2011-01-010.00
 28199Employee name...employee@email.com2011-01-010.00
 28198Employee name...employee@email.com2011-01-010.00
 28197Employee name...employee@email.com2011-01-010.00
 28196asfasfa sdfasdfasfemployee@email.com2011-01-010.00
 28195sdssdemployee@email.com2011-01-010.00
 28194Employee name...ssdsds@email.com2011-01-010.00
 28193Employee name...employee@email.com2011-01-010.00
 28191Employee name...employee@email.com2011-01-010.00
 28190Employee name...employee@email.com2011-01-010.00
 28189Employee name...employee@email.com2011-01-010.00
 28188Employee name...employee@email.com2011-01-010.00
 28187Employee name...employee@email.com2011-01-010.00
 28186Employee name...employee@email.com2011-01-010.00
 28185Employee name...employee@email.com2011-01-010.00
 28184Employee name...employee@email.com2011-01-010.00
 28183Employee name...employee@email.com2011-01-010.00
 28182Employee name...employee@email.com2011-01-010.00
 28181Employee name...employee@email.com2011-01-010.00
 28180Employee name...employee@email.com2011-01-010.00
 28179Employee name...employee@email.com2011-01-010.00
 28178Employee name...employee@email.com2011-01-010.00
 28177Employee name...employee@email.com2011-01-010.00
 28176Employee name...employee@email.com2011-01-010.00
 28175Employee name...employee@email.com2011-01-010.00
 28174Employee name...employee@email.com2011-01-010.00
 28173Employee name...employee@email.com2011-01-010.00
 28172Employee name...employee@email.com2011-01-010.00
 28171Employee name...employee@email.com2011-01-010.00
 28170Employee name...employee@email.com2011-01-010.00
 28169Employee name...employee@email.com2011-01-010.00
 28168Employee name...employee@email.com2011-01-010.00
 28167Employee name...employee@email.com2011-01-010.00
 28166Employee name...employee@email.com2011-01-010.00
 28165Employee name...employee@email.com2011-01-010.00
 28164Employee name...employee@email.com2011-01-010.00
 28163Employee name...employee@email.com2011-01-010.00
 28162Employee name...employee@email.com2011-01-010.00
 28161Employee name...employee@email.com2011-01-010.00
 28152Employee name...employee@email.com2011-01-010.00
 28151Employee name...employee@email.com2011-01-010.00
 28148Employee name...employee@email.com2011-01-010.00
 28146kkemployee@email.com2011-01-010.00
 28144edit3employee@email.com2011-01-010.00
 28142poipopemployee@email.com2011-01-010.00
 28141homeemployee@email.com2011-01-010.00
 28140Employee name...employee@email.com2011-01-010.00
 28138Employee name...employee@email.com2011-01-012.00
 28135testtest@gmail.com2017-09-1020.00
 28134Employee name...employee@email.com2011-01-010.00
 28133Employee name...employee@email.com2011-01-010.00
 28132testemployee@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!