[]
        
(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

activeRibbonTab

activeRibbonTab(ribbonTabId?): string

Get or set the designer active ribbon tab Id, the ribbon tab id is in DefaultConfig.

example

// This example will set the designer active ribbon tab after designer initializing.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), undefined, spread);
let currentActiveRibbonTab = designer.activeRibbonTab(); // get the active ribbon tab id.
if (currentActiveRibbonTab !== "insert") {
    designer.activeRibbonTab("insert"); // will set the INSERT ribbon tab active.
}

Parameters

Name Type Description
ribbonTabId? string The new active ribbon tab id.

Returns

string

  • The designer current active ribbon tab id.

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