[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

GC.Spread.Sheets.Designer.Designer

Class: Designer

Sheets.Designer.Designer

Table of contents

Constructors

Methods

Constructors

constructor

• new Designer(host, config?, spread?, spreadOptions?)

Represent a Designer with the specified hosted DOM element, custom config and an existing spread.

example

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var customConfig = {
      ribbon: [
          {
              id: "home",
              text: "HOME",
              buttonGroups: [
                {
                  label: "Undo",
                  thumbnailClass: "ribbon-thumbnail-undoRedo",
                  commandGroup: {
                    children: [
                      {
                        direction: "vertical",
                        commands: [
                          "undo",
                          "redo"
                        ]
                      }
                    ]
                  }
                }
              ]
          }
      ],
      contextMenu: [
          "contextMenuCut",
          "contextMenuCopy",
      ],
      fileMenu: "fileMenuButton",
      sidePanels: [
          {
              position: "top",
              allowResize: true,
              command: "formulaBarPanel",
              uiTemplate: "formulaBarTemplate"
          },
      ]
 };
var customDesigner = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv2"), customConfig);

Parameters

Name Type Description
host string | HTMLDivElement This is the HTML area that the Designer Component mounts.
config? IDesignerConfig The designer config object.
spread? Object The workbook instance.
spreadOptions? Object The workbook initialization options.

Methods

bind

▸ bind(type, fn?): void

Binds an event to the designer.

example

//This example binds events.
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoading, function(type, message){
    if (message.fileType = GC.Spread.Sheets.Designer.FileType.Excel){
        let spreadJsonData = message.data;
        if(spreadJsonData.sheetCount >= 3) {
             message.cancel = true;
        }
    };
});

Parameters

Name Type Description
type string The event type.
fn? any Specifies the function to run when the event occurs.

Returns

void

destroy

▸ destroy(): void

destroy the designer and unbind all events.

example

// This example will destroy the designer after creating a new designer
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
designer.destroy();

Returns

void

getData

▸ getData(key): any

Get the state or value, there are two types of data, one is local data using only in one component and the other is global data using in the whole designer environment, designer.getData(key) can get the global data storing in the designer by key in where having designer instance.

example

// This example will set a global data in one place like ribbon->Home and get this global data in the other place like ribbon->setting, both places having the designer instance.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var logInCommand = {
	title: "Login",
	text: "Login",
	iconClass: "ribbon-button-login",
	bigButton: true,
	commandName: "login",
	execute: (context, propertyName) => {
		alert('Log in new designer.');
		context.setData("isLogIn", true); // setData()
	 }
};
var getGiftCommand = {
	 title: "Get gift",
	 text: "Get gift",
	 iconClass: "ribbon-button-get-gift",
	 bigButton: 'true',
	 commandName: "getGift",
	 execute: (context, propertyName) => {
		 let isLogIn = context.getData("isLogIn"); // getData()
		 if (isLogIn) {
			 alert("Get gift");
		 }
		 else {
			 alert("Please log in");
		 }
	 }
};
config.commandMap = {
	 login: logInCommand,
	 getGift: getGiftCommand,
};
var logInCommandGroup = {
	 label: "Login",
	 thumbnailClass: "Login",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "Login"
				 ]
			 }
		 ]
	 }
};
var getGiftCommandGroup = {
	 label: "Gift",
	 thumbnailClass: "Gift",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "getGift"
				 ]
			 }
		 ]
	  }
 };
 if (config && config.ribbon) {
 config.ribbon[0].buttonGroups.unshift(logInCommandGroup);
 config.ribbon[5].buttonGroups.unshift(getGiftCommandGroup);
 }
 var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);

Parameters

Name Type Description
key string The data name, uniquely identifies one state data.

Returns

any

  • The value or state of this data name, could be Object, string or other type.

getWorkbook

▸ getWorkbook(): Object

Get the workbook of the existing designer.

example

// This example will get the workbook of an existing designer.
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();

Returns

Object

The workbook of the existing designer.

refresh

▸ refresh(): void

Refresh the designer layout and ribbon area.

example

// This example will refresh the designer and ribbon after change size of designer content HTMLElement.
var designerContent = document.getElementById("gc-designer-container");
designerContent.style.width =width + "px";
designerContent.style.height = height + "px";
designer.refresh();

Returns

void

setConfig

▸ setConfig(config): void

Represents a new designer using the custom config.

example

// This example will set a custom config to an existing designer
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var config = {
      ribbon: [
          {
              id: "home",
              text: "HOME",
              buttonGroups: [
                {
                  label: "Undo",
                  thumbnailClass: "ribbon-thumbnail-undoRedo",
                  commandGroup: {
                    children: [
                      {
                        direction: "vertical",
                        commands: [
                          "undo",
                          "redo"
                        ]
                      }
                    ]
                  }
                }
              ]
          }
      ],
      contextMenu: [
          "contextMenuCut",
          "contextMenuCopy",
      ],
      fileMenu: "fileMenuButton",
      sidePanels: [
          {
              position: "top",
              allowResize: true,
              command: "formulaBarPanel",
              uiTemplate: "formulaBarTemplate"
          },
      ]
 };
designer.setConfig(config);

Parameters

Name Type Description
config IDesignerConfig The designer config object.

Returns

void

setData

▸ setData(key, value): void

Set the state or value, there are two types of data, one is local data using only in one component and the other is global data using in the whole designer environment, designer.setData(key, value) can set the global data storing in the designer by key-value in where having designer instance.

example

// This example will set a global data in one place like ribbon->Home and get this global data in the other place like ribbon->setting, both places having the designer instance.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var logInCommand = {
	title: "Login",
	text: "Login",
	iconClass: "ribbon-button-login",
	bigButton: true,
	commandName: "login",
	execute: (context, propertyName) => {
		alert('Log in new designer.');
		context.setData("isLogIn", true); // setData()
	 }
};
var getGiftCommand = {
	 title: "Get gift",
	 text: "Get gift",
	 iconClass: "ribbon-button-get-gift",
	 bigButton: 'true',
	 commandName: "getGift",
	 execute: (context, propertyName) => {
		 let isLogIn = context.getData("isLogIn"); // getData()
		 if (isLogIn) {
			 alert("Get gift");
		 }
		 else {
			 alert("Please log in");
		 }
	 }
};
config.commandMap = {
	 login: logInCommand,
	 getGift: getGiftCommand,
};
var logInCommandGroup = {
	 label: "Login",
	 thumbnailClass: "Login",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "Login"
				 ]
			 }
		 ]
	 }
};
var getGiftCommandGroup = {
	 label: "Gift",
	 thumbnailClass: "Gift",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "getGift"
				 ]
			 }
		 ]
	  }
 };
 if (config && config.ribbon) {
 config.ribbon[0].buttonGroups.unshift(logInCommandGroup);
 config.ribbon[5].buttonGroups.unshift(getGiftCommandGroup);
 }
 var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);

Parameters

Name Type Description
key string The data name, uniquely identifies one state data, if you set same key many times using different value, will only store the latest value.
value any The value or state of this data name, could be Object, string or other type.

Returns

void

setWorkbook

▸ setWorkbook(spread): void

Set the spread of designer using an existing spread.

example

// This example will set an existing spread to designer.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
designer.setWorkbook(spread);

Parameters

Name Type Description
spread Object an existing spread using to replace the old spread of designer.

Returns

void

unbind

▸ unbind(type, fn?): void

Removes the binding of an event to the designer.

example

designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
    console.log("file has loaded")
});
designer.unbind(GC.Spread.Sheets.Designer.Events.FileLoaded);

Parameters

Name Type Description
type string The event type.
fn? any Specifies the function for which to remove the binding.

Returns

void

unbindAll

▸ unbindAll(): void

Removes the binding of all events to the designer.

example

designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
    console.log("file has loaded")
});
designer.unbindAll();

Returns

void

RegisterComponent

▸ Static RegisterComponent(name, constructor): boolean

register custom component

Parameters

Name Type Description
name string component name, you can use it with this name
constructor any component class

Returns

boolean

whether register is successfully