9 3.1 Advanced grid

koalyptus edited this page 2015-07-04 13:32:34 +10:00

Advanced selection, keyboard navigation and inline components are delivered by the advancedGrid extension combined with the powerful ezEditTable plugin.

To get the advancedGrid extension instance:

var advancedGrid = tf.extension('advancedGrid');

where tf is an instance of TableFilter.

Property	Type	Description	Remarks	Example
name	string	name of the extension, it should match the name of the directory and of the file, in this case 'advancedGrid'.	Check the ezEditTable documentation section in order to see the available properties.	var tfConfig = { extensions: [{ name: 'advancedGrid' }] };
vendor_path	string	this is a mandatory property defining the path to the vendor's ezEditTable library	It can be a URL too ie: 'http://edittable.free.fr/ezEditTable/'	var tfConfig = { extensions: [{ name: 'advancedGrid', vendor_path: 'path/to/ezEditTable' }] };
filename	string	filename of the ezEditTable (default - 'ezEditTable.js') plugin		var tfConfig = { extensions: [{ name: 'advancedGrid', vendor_path: 'path/to/ezEditTable/', filename: 'ezEditTable_min.js' }] };
load_stylesheet	boolean	if set true it loads the vendor's stylesheet (default - false)		var tfConfig = { extensions: [{ name: 'advancedGrid', vendor_path: 'path/to/ezEditTable/', filename: 'ezEditTable_min.js', load_stylesheet: true }] };
stylesheet	string	path/URL to the vendor's stylesheet (default - vendor_path + 'ezEditTable.css')	Note this property includes the filename	var tfConfig = { extensions: [{ name: 'advancedGrid', vendor_path: 'path/to/ezEditTable/', filename: 'ezEditTable_min.js', load_stylesheet: true, stylesheet: 'path/to/ezEditTable/stylesheet/style.css' }] };

The above configuration also includes all the ezEditTable configuration properties listed in the ezEditTable documentation. As an example:

var tfConfig = { 
    extensions: [{ 
        name: 'advancedGrid',
        vendor_path: 'path/to/ezEditTable/',
        filename: 'ezEditTable_min.js',
        load_stylesheet: true,
        stylesheet: 'path/to/ezEditTable/stylesheet/style.css'

        // ezEditTable configuration properties below:
        selectable: true,
        editable: true,
        default_selection: 'both',
        auto_save: false
    }]
};

Website | Examples | Es6 documentation