SpreadJS Documentation
Using the Tab Strip

The tab strip allows the user to change sheets, add new sheets, or edit sheet names. You can also specify the start sheet, reorder the sheet tabs, and set tab colors.

Click on the sheet name tab to select a sheet. You can click on the New tab to add a new sheet. You can also use the resize button to change the width of the tab strip bar.

You can double-click on the sheet name to edit it. You can stop editing by clicking out of the tab or by using the Esc or Enter key.

You can specify whether the user can edit names with the tabEditable method. The newTabVisible method specifies whether the New tab is available to the user.

You can allow the user to reorder the sheet tab names by setting the allowSheetReorder method to true. Select the sheet name in the tab strip and drag between another sheet name in the tab strip. An indicator is displayed while dragging as shown in the following image. Release the mouse to move the tab.

You can set the tab color and the start sheet with the sheetTabColor and startSheetIndex methods. The following image displays tab colors and the start sheet.

You can hide the navigation buttons with the tabNavigationVisible method as illustrated in the following image.

You can hide the entire tab strip with the tabStripVisible method.

Using Code

This example sets properties for the tab strip.

JavaScript
Copy Code
spread.tabStripVisible(true);
spread.tabEditable(true);
spread.newTabVisible(true);
spread.setTabStripRatio(1,true);

Using Code

This example sets the start sheet index and the tab color.

JavaScript
Copy Code
spread.setSheetCount(3);
spread.startSheetIndex(0);
spread.getSheet(0).sheetTabColor("red");
spread.getSheet(1).sheetTabColor("#FFFF00");
spread.getSheet(2).sheetTabColor("Accent 4");
See Also

 

 


Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.