SpreadJS 14
SpreadJS Designer Components / Customizations
In This Topic
    In This Topic

    SpreadJS designer components allow you to perform various customizations like:

    Designer Components Terminology

    In order to customize the designer components, it is important to understand their layout and terminology. The below image labels the terms specified for each designer component:


    The below image labels the terms specified for ribbon components:

    Create Sample File to Define Customizable Configuration

    The default_config.json file is provided with the SpreadJS.Release.xxxx.zip directory and can be located under SpreadJS.Release.xxxx\Designer\Designer Component folder. It contains the default configuration of designer components in a command tree structure. Using this, you can create a sample config.js file as shown below:

    Copy Code
    var config =
    //Existing command tree structure in default_config.json 

    You can do desired customizations in config.js and refer it in your web application. Afterwards, pass this customizable configuration as a parameter while initializing the designer component. This is explained in the below section. 

    Initialize Designer Components with Customizable Configuration

    After customizing config.js, pass the customizable configuration as a parameter to GC.Spread.Sheets.Designer.Designer class. It can take upto 3 parameters as defined below:  

    Copy Code
    // Initialize designer with customizable configuration and spread component
    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);


    The 'config' and 'spread' parameters are optional. When not provided, the designer uses the default designer component and generates a new spreadsheet.

    Possible Customizations

    The following points explain the extent of customizations possible in designer components:


    To perform various customizations, refer following topics: