Skip to content

3.1 Advanced grid

Jump to bottom Edit New page
koalyptus edited this page Jul 4, 2015 · 9 revisions

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

Clone this wiki locally