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 :
- enable row selection
- define the selected rows css class
- implement a checkbox row selection by using the row selection callback events
Note: keyboard navigation and selection are disabled in this demo.
Id | Name | Start Date | Salary | |
---|---|---|---|---|
35886 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35885 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35884 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35883 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35882 | dfdfhfgh | employee@email.com | 2011-01-01 | 0.00 |
35881 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35879 | dokter afadf dfa | dokter_dark@email.com | 2011-01-01 | 1000.00 |
35878 | 1212121 | employee@email.com | 2011-01-01 | 0.00 |
35877 | é&21 | employee@email.com | 2011-01-01 | 0.00 |
35875 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35874 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35873 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35872 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35871 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35870 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35869 | employee@email.com | 2012-01-01 | 12.36 | |
35865 | titi | employee@email.fr | 2011-01-01 | 10.00 |
35864 | employee@email.com | 2011-01-01 | 0.00 | |
35860 | employee@email.com | 2011-01-01 | 2.33 | |
35859 | employee@email.com | 2011-01-01 | 25.55 | |
35851 | free@email.com | 2011-01-01 | 0.00 | |
35848 | asd | employee@email.com | 2011-01-01 | 0.00 |
35847 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35846 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35845 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35844 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35843 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35842 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35841 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35840 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35839 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35838 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35837 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 |
35836 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35835 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35834 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35833 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35832 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35831 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35830 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35829 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35828 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35827 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35826 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 |
35825 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35824 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35823 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35822 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35821 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35820 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35819 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35818 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35817 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35816 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 |
35815 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35814 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35813 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35812 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35811 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35810 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35809 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35808 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35807 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35806 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 |
35805 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35804 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35802 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35801 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35800 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35799 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35798 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35797 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35796 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35795 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35794 | asdfasdf | employee@email.com | 2011-01-01 | 0.00 |
35793 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35792 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35791 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35790 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35789 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35788 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35787 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35784 | employee@emil.com | 2011-01-01 | 0.00 | |
35783 | kajal | employee56@email.com | 2011-01-01 | 0.00 |
35782 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35781 | sfgsdf | employee@email.com | 2011-01-01 | 0.00 |
35780 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35779 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35778 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35777 | Test grid | employee@email.com | 2011-01-01 | 1000.00 |
35776 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35775 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35774 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35773 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35772 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35771 | Employee name... | employee@email.com | 2011-01-01 | 0.00 |
35768 | sadfsdf | employee@email.coms | 2011-01-01 | 0.00 |
35765 | Employee name... | memi@email.com | 2011-01-01 | 10.20 |
35764 | aeerkffkr | employee@email.com | 2011-01-01 | 0.00 |
35760 | azaz | employee@email.com | 2011-01-01 | 0.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); } } } };