[{"id":"528e7c85-ad74-4b92-9f07-1b35686aae11","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"b2467823-b20a-4944-8436-3f4a40c2c3a6","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f9b599ec-cdc1-43e1-9642-54622ec0faf6","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0c129b8a-7ec0-4a16-8d94-9d4c96121d6b","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"747081eb-5a06-4bac-8e9e-ce86732d168f","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7d934b01-e977-477a-b989-d25201e93a61","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"62adecb9-3003-4dce-9fa0-33dcdebbd1ed","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e2676e30-9712-47a0-ae38-733003d74c61","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6ef06797-8c4c-4b4b-ab10-bb5049aedeff","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"48e7593f-03b2-454d-a45c-cfebca71f3aa","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"59bb5a92-94c0-471a-bbe7-422ee9c9671d","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"56744168-6aab-46c6-8144-702458dc0030","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6e65ca69-e34b-47ac-a900-df6142d1173a","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"69a3b51b-bbd6-4bf9-b1bf-404bc1130679","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7e9ac756-4b27-4ccd-87b4-d959dae40aac","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f9f145be-535c-49f0-85e0-46b82e05ebb9","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f21c39dc-8e0d-4974-8795-5568b46411b4","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f1c5b466-1fd4-4130-88dd-9a624a6ea008","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"61aee7ec-5eae-4b92-b381-bc6236377b8b","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"8f3919c2-f0c9-4000-8008-be65026b6290","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1ec6d1ad-90cc-4094-980f-43aa5fbf9540","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"78b0db4b-017c-4839-8c1e-60f6f5cc6d2b","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"cdf43116-31aa-4260-b33a-9a31c6845eb2","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9e8044a9-aa63-4694-997d-13747cd3ee9d","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ecd23122-8f53-4c60-837d-198fd699dfc0","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7a9b6718-9f7b-4f86-a13f-1af00e6e1fd8","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"363dda9e-fe69-4e08-aae8-37d0147254e3","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"5c96fdcf-19a2-4aed-838a-8ed87a27a690","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"43ba9142-9a42-4717-866b-92a6acafcf6e","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"58f7dc81-7471-48e9-9020-1a2359e01121","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0536592d-c039-4a1b-b482-aa0ba315a78d","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2981cffc-37a3-4e64-b682-71d898259ddc","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"bdfcce31-4e7a-46f0-8571-d643d6ae5215","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"a1c74507-1bc8-4333-b919-337bcd7f421a","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6bb55ad9-04e0-47f2-8343-5e9cb0f24fbc","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f668bfbe-c4fa-4b5f-add5-f82db90b9710","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6c4638bd-062c-4cc3-97c1-0daafc8624de","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"55aca15e-f3aa-46ab-95c6-9af4e0c779bc","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"000b26f4-c878-447f-acfc-d7e5571dbd01","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2822ff18-ccc4-40ab-b205-760e5dc66a93","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"978e1414-788c-42b3-ab45-c91e172a80f8","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2fced7df-d3ca-43a7-86d8-dfebd34541f7","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f7b8e156-8572-43aa-aec7-fe176eacc758","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2a1a5e3f-2bbe-4b96-8587-dbe13a089d4d","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9a3f74e4-ebdf-4c28-ac95-6901cccf878c","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9fd5b62f-8f1b-444e-9dcb-3d71965cfc6a","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ab33528a-79c3-4b1c-82dd-15c99eb9419b","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"3a2e4995-96ce-4123-b7a9-d801c3135e5c","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1480a066-6c2d-4d50-bf05-fcfb0ea27869","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"533dc174-547d-4419-8260-a62dc1e3a2b6","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2756d249-e4ca-48db-9775-1b76fc3efc5a","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"c0e02434-b0d8-4b70-83ef-f6ad2ac07536","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]}]
        
(Showing Draft Content)

Quick Start

The following quick start section will help you to use the SpreadJS Designer Component in your project with a new and an existing spreadsheet. You can download the latest script and CSS files for Designer Component here. For more information on adding references, see Getting Started topic.

Note: The Designer Component can only be used with sheets component. To know how to work with sheets component, see Quick Start topic.

Use Designer Component with a New Spreadsheet

HTML Page

Follow the below steps to create an HTML page that will display SpreadJS Designer Component along with a new spreadsheet.

  1. Open ‘Notepad’ or your preferred code editor.

  2. Add the following HTML syntax code in the file.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        <script>
        </script>
    </head>
    <body>
    </body>
    </html>
  3. Add the following SpreadJS CSS and JS files inside the HEAD element tag.

    <!--CSS files--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
    
    <!--Script files-->
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>    

    To use the Pivot Table feature, add the following additional script file.

    <script src="scripts/gc.spread.pivot.pivottables.x.x.x.min.js" type="text/javascript"></script>
  4. Add the following Designer Component's CSS and JS files inside the HEAD element tag.

    <!--CSS files--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />
    <!--Script files-->
    <script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>

    Note: Spreadsheet references should be added above the Designer Component references.

    Moreover, the Designer Component resource file (gc.spread.sheets.designer.resource.en.x.x.x.min.js, in this case*)* must always be referenced before gc.spread.sheets.designer.all.x.x.x.min.js.

  5. Include a DOM element as the container in the BODY element.

    <body>
        <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
    </body>
  6. Initialize the Designer Component inside the script element tag in the HEAD section. Also, set the license key for Designer Component and SpreadJS before initialization.

    <script>
        //Set License Key
        //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
        //GC.Spread.Sheets.LicenseKey = "XXXX";
    
        var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
    </script>

    The complete code in the HTML file will look like the below:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    
        <!--CSS files--> 
        <!--Spreadsheet CSS file--> 
        <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
        <!--Designer Component CSS file--> 
        <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />
    
        <!--Script files-->
        <!--Spreadsheet JS files--> 
        <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
        <!--Designer Component JS files--> 
        <script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>
    
        <script>
            window.onload = function () {
    
                //Set License Key
                //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
                //GC.Spread.Sheets.LicenseKey = "XXXX";
    
                var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
            }
        </script>
    </head>
    <body>
        <!--DOM element-->
        <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
    </body>
    </html>
  7. Save it as an HTML file. For example, ‘index.html’

  8. Create a new folder at the same location where you have saved the HTML file. Add the script and CSS files mentioned in steps 3 and 4 to that folder.

  9. View the HTML file in the browser to observe the Designer Component with a new spreadsheet.


    image.png

ASP.NET Web Application

Follow the below steps to create an ASP.NET Web application that will display SpreadJS Designer Component along with a new spreadsheet.

  1. Create an Empty ASP.Net Web Application in Visual Studio.

  2. Create the 'scripts' folder in your project's root location and include the following script files:

    // SpreadJS script files
    gc.spread.sheets.all.x.x.x.min.js
    gc.spread.sheets.charts.x.x.x.min.js
    gc.spread.sheets.shapes.x.x.x.min.js
    gc.spread.sheets.print.x.x.x.min.js
    gc.spread.sheets.barcode.x.x.x.min.js
    gc.spread.sheets.pdf.x.x.x.min.js
    gc.spread.sheets.tablesheet.x.x.x.min.js
    
    // SpreadJS Designer Component script files
    gc.spread.sheets.designer.resource.en.0.0.0.min.js
    gc.spread.sheets.designer.all.x.x.x.min.js

    Spreadsheet references should be added above the Designer Component references.

    Moreover, the Designer Component resource file (gc.spread.sheets.designer.resource.en.x.x.x.min.js, in this case) must always be referenced before gc.spread.sheets.designer.all.x.x.x.min.js.

    To use the Pivot Table feature, add the following additional script file.

    <script src="scripts/gc.spread.pivot.pivottables.x.x.x.min.js" type="text/javascript"></script>

    To add export functionality, add the following additional script file:

    <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
  3. Create a 'css' folder in your project's root location and include the following CSS:

    • SpreadJS CSS file - gc.spread.sheets.x.x.x.css

    • SpreadJS Designer Component CSS file - gc.spread.sheets.designer.x.x.x.min.css

  4. Add an HTML Page to the Visual Studio project.

  5. Modify the content of the added HTML Page to the following code:

    • Initialize the Designer Component

    • Create the Designer Component target DOM element

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    
        <!--CSS files--> 
        <!--Spreadsheet CSS file--> 
        <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
        <!--Designer Component CSS file--> 
        <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />
    
        <!--Script files-->
        <!--Spreadsheet JS files--> 
        <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
        <!--Designer Component JS files--> 
        <script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>
    
        <script>
            window.onload = function () {
    
                //Set License Key
                //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
                //GC.Spread.Sheets.LicenseKey = "XXXX";
    
                var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
            }
        </script>
    </head>
    <body>
        <!--DOM element-->
        <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
    </body>
    </html>
  6. View the HTML file in the browser to observe the Designer Component with a new spreadsheet.

    image.png

Use Designer Component with an Existing Spreadsheet

You can also use the Designer Component with any existing spreadsheet. For example, the below image shows a spreadsheet with a treemap chart and its data.




To use the Designer Component with the above spreadsheet, implement the below steps in your existing HTML file:

  1. Include the Designer Component script and CSS file references.

    <!--Designer Component CSS file--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />
    
    <!--Designer Component script files-->
    <script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>

    Note: Spreadsheet references should be added above the Designer Component references as explained in above steps.

  2. Pass the spreadsheet's variable as a parameter while initializing the Designer Component.

    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);
  3. Include the Designer Component's DOM element along with the sheet DOM element.

    <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>

The complete code in the HTML file will look like the one below where the existing spreadsheet adds data and creates a treemap chart. This spreadsheet is further used with the designer component to perform any UI operation.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    
    <!--CSS files--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
    <!--Designer Component CSS file--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />

    <!--Script files-->
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
    <!--Designer Component JS files--> 
    <script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>

    <script>
        $(document).ready(function () {
            // initialize Spread
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
            // Get the activesheet
            var sheet = spread.getSheet(0);
            // Set Column Width
            sheet.setColumnWidth(2, 100);
            sheet.setColumnWidth(4, 100);
            // Create Data Array
            var dataArray =
                [
                    ['Region', 'Subregion', 'country', 'Population'],
                    ['Asia', 'Southern', 'India', 1354051854],
                    [, , 'Pakistan', 200813818],
                    [, , 'Bangladesh', 166368149],
                    [, , 'Others', 170220300],
                    [, 'Eastern', 'China', 1415045928],
                    [, , 'Japan', 127185332],
                    [, , 'Others', 111652273],
                    [, 'South-Eastern', , 655636576],
                    [, 'Western', , 272298399],
                    [, 'Central', , 71860465],
                    ['Africa', 'Eastern', , 433643132],
                    [, 'Western', , 381980688],
                    [, 'Northern', , 237784677],
                    [, 'Others', , 234512021],
                    ['Europe', , , 742648010],
                    ['Others', , , 1057117703]
                ];
            // Set Array
            sheet.setArray(1, 1, dataArray);
            var treemapChart = sheet.charts.add('chart1',
            GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
            
            // Initialize designer components and use above created spread component
            var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);

        });
    </script>
</head>
<body>
    <div id="ss"></div>
    <!--DOM element for designer components-->
    <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
</body>
</html>

The above code will generate the below output: