Smart Grid, an Ajax-driven table editing tool

Frozen columns

Sometimes it is very convenient if part of table columns are always visible independently on position of horizontal scrolling. The Frozen columns mode allows to split table into two grids with independent horizontal scrollbar each.

The Frozen columns mode is compatible with paging, readonly columns, and Dynamic loading mode.

Code of the example

<script language="JavaScript">

SmartCells.set_handlers();

var smart_grid = new SmartGrid('smart_grid');
	smart_grid.page_mode = true;
	smart_grid.current_page = 1;
	smart_grid.page_size = 3;
	smart_grid.image_path = 'img/';
	smart_grid.row_height = 20;

	smart_grid.data_url = 'xml_data.php';
	smart_grid.actions_url = 'save_sg_table.php';

var sc0 = new SmartCell_image();
//	sc0.language = 'en';
	sc0.folder = '/images';
	sc0.preview_size = 500;
	sc0.set_value(4);
	sc0.params = {
db_field: ''
	};
var sc0_params = {
	'name': 'Picture',
	'width': '50'
};
	smart_grid.add_column(sc0_params, sc0);

var sc1 = new SmartCell_text();
	sc1.params = {
db_field: 'name'
	};
var sc1_params = {
	'name': 'Name',
	'width': '100'
};
	smart_grid.add_column(sc1_params, sc1);

var sc2 = new SmartCell_text();
	sc2.params = {
db_field: 'surname'
	};
var sc2_params = {
	'name': 'Surname',
	'width': '100'
};
	smart_grid.add_column(sc2_params, sc2);

var sc3 = new SmartCell_select();
	sc3.params = {
db_field: 'level'
	};
	sc3.add_option('1', 'First');
	sc3.add_option('2', 'Second');
	sc3.add_option('3', 'Third');
	sc3.add_option('4', 'Forth');
var sc3_params = {
	'name': 'Level',
	'width': '60'
};
	sc3.set_default_value('1');
	smart_grid.add_column(sc3_params, sc3);

var sc8 = new SmartCell_radio();
	sc8.group = 'table_group';
	sc8.params = {
db_field: 'chairman'
	};
var sc8_params = {
	'name': 'Chairman',
	'width': '70'
};
	smart_grid.add_column(sc8_params, sc8);

var sc4 = new SmartCell_time();
	sc4.params = {
db_field: 'time'
	};
var sc4_params = {
	'name': 'Time',
	'width': '50'
};
	sc4.set_default_value('11:00');
	smart_grid.add_column(sc4_params, sc4);

var sc5 = new SmartCell_textarea();
	sc5.params = {
db_field: 'description'
	};
var sc5_params = {
	'name': 'Description',
	'width': '150'
};
	sc5.set_default_value('');
	smart_grid.add_column(sc5_params, sc5);

var sc6 = new SmartCell_checkbox();
	sc6.params = {
db_field: 'status'
	};
var sc6_params = {
	'name': 'Active',
	'width': '50'
};
	sc6.set_default_value(0);
	smart_grid.add_column(sc6_params, sc6);

var sc10 = new SmartCell_price();
	sc10.params = {
db_field: 'amount'
	};
var sc10_params = {
	'name': 'Amount',
	'width': '60'
};
	smart_grid.add_column(sc10_params, sc10);

var sc7 = new SmartCell_date();
	sc7.params = {
db_field: 'created'
	};
var sc7_params = {
	'name': 'Created',
	'width': '80'
};
	sc7.readonly = true;
	sc7.set_default_value('');
	smart_grid.add_column(sc7_params, sc7);


	smart_grid.freeze_columns(2);


	smart_grid.show();
	smart_grid.change_skin('alt');

</script>

Download Smart Grid