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
 27551Employee name...employee@email.com2011-01-010.00
 27550Employee name...employee@email.com2011-01-010.00
 27549Employee name...employee@emaidl.com2011-01-010.00
 27548Employee name...employee@email.com2011-01-0166.77
 27544wemployee@email.com2011-01-090.00
 27543adfjyvhnointcpaiiuhncrciuhnticnhmlwemployee@email.com2011-01-010.00
 27542Employee name...employee@email.com2011-01-010.00
 27541Employee name...employee@email.com2011-01-010.00
 27540Employee name...employee@email.com2011-01-010.00
 27539Employee name...employee@email.com2011-01-010.00
 27538Employee name...employeep@email.com2011-01-010.00
 27537Employee name...employee@email.com2011-01-010.00
 27536Employee name...employee@email.com2011-01-010.00
 27535Employee name...employee@email.com2011-01-010.00
 27534Employee name...employee@email.com2011-01-010.00
 27533Employee name...employee@email.com2011-01-010.00
 27532Employee name...employee@email.com2011-01-010.00
 27531Employee name...employee@email.com2011-01-010.00
 27529Employee name...employee@email.com2011-01-010.00
 27528Employee name...employee@email.com2011-01-010.00
 27527Employee name...employee@email.com2011-01-010.00
 27526Employee name...employee@email.com2011-01-010.00
 27525Employee name...employee@email.com2011-01-010.00
 27524Employee name...aaaemployee@email.com2011-01-010.00
 27522aaaaemployee@email.com2011-01-010.00
 27521Employee name...employee@email.com2011-01-010.00
 27518eeeemployee@email.com2011-01-010.00
 27517Employee name...employee@email.com2011-01-010.00
 275145456employee@email.com2011-01-010.00
 27513Employee name...employee@email.com2011-01-010.00
 27512Employee name...employee@email.com2011-01-010.00
 27511asdfasdfemployee@email.com2011-01-010.00
 27510Employee name...employee@email.com2011-01-010.00
 27509Employee name...employee@email.com2011-01-010.00
 27508Employee name...employee@email.com2011-01-010.00
 27502magosqwemployee@email.com2011-01-010.00
 27501Employee name...employee@email.com2011-01-010.00
 27500aaaaaadfemployee@email.com2011-01-010.00
 27499Employee name...employee@email.com2011-01-010.00
 27498Employee name...employee@email.com2011-01-010.00
 27497Employee name...employee@email.com2011-01-010.00
 27496Employee name...employee@email.com2011-01-010.00
 27495Employee name...employee@email.com2011-01-010.00
 27494Employee name...employee@email.com2011-01-010.00
 27493Employee name...employee@email.com2011-01-010.00
 27491Employee name...employee@email.com2011-01-010.00
 27490Employee name...employee@email.com2011-01-010.00
 27489Employee name...employee@email.com2011-01-010.00
 27487Employee name...employee@email.com2011-01-010.00
 27486Employee name...employee@email.com2011-01-010.00
 27485Employee name...employee@email.com2011-01-010.00
 27484Employee name...employee@email.com2011-01-010.00
 27483Employee name...employee@email.com2011-01-010.00
 27481Employee name...employee@email.com2011-01-010.00
 27480Employee name...employee@email.com2011-01-010.00
 27479yrreeemployee@email.com2011-01-010.00
 27478Employee name...employee@email.com2011-01-010.00
 27477sdgfdfgfdgemployee@email.com2011-01-01123.22
 27476Employee name...employee@email.com2011-01-010.00
 27475Employeeme...employee@email.com2011-01-010.00
 27474Employee name...dsadasdemployee@email.com2011-01-010.00
 27470Employee name...test2@email.com2011-01-010.00
 27467sdfsa@sad.sad2011-01-010.00
 27466qsemployee@email.com2011-01-010.00
 27465Employee name...employee@email.com2011-01-010.00
 27462Employee name...employee@email.com2011-01-010.00
 27461Employee name...employee@email.com2011-01-010.00
 27459Employee name...employee@email.com2011-01-010.00
 27458Employee name...employee@email.com2011-01-010.00
 27457Employee name...employee@email.com2011-01-01440.00
 27456Employee name...employee@email.com2011-01-010.00
 27455Employee name...employee@email.com2011-01-010.00
 27454Employee name...employee@email.com2011-01-010.00
 27453Employee name...employee@email.com2011-01-010.00
 27452Employee name...employee@email.com2011-01-010.00
 27451Employee name...employee@email.com2011-01-010.00
 27449Employee name...employee@email.com2011-01-010.00
 27448Employee name...ed@ED.COm2011-01-010.00
 27447Employee name...employee@email.com2011-01-010.00
 27446Employee name...employee@email.com2011-01-010.00
 27445n,n;nemployee@email.com2011-01-010.00
 27443Employee name...employee@email.com2011-01-010.00
 27442Employee name...employee@email.com2011-01-010.00
 27441Employee name...employee@email.com2011-01-010.00
 27440Employee name...employee@email.com2011-01-010.00
 27439Employee name...employee@email.com2011-01-010.00
 27438Employee name...employee@email.com2011-01-010.00
 27437Employee name...employee@email.com2011-01-010.00
 27436vvbnvnbemployee@email.com2011-01-010.00
 27435Njhjhgjgemployee@email.com2011-01-010.00
 27434Employee name...employee@email.com2011-01-010.00
 27431Employee name...employee@email.com2011-01-010.00
 27430Employee name...employee@email.com2011-01-010.00
 27429hjjjklemployee@email.com2011-01-010.00
 27427kkkkkkklemployee@email.com2011-01-010.00
 27426Employee name...employee@email.com2011-01-010.00
 27425Employee name...employee@email.com2011-01-010.00
 27424Employee name...employee@email.com2011-01-010.00
 27423employee@email.com2011-01-010.00
 27422Employee 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!