Home

Welcome to the keikai-tutorial wiki!

Read the blog to know more about Keikai

ZK + keikai project

A project to demonstrate how to integrate ZK framework with Keikai.

Component UI customization

Keikai UI is configurable through a data attribute:

• data-show-context-menu
• data-show-toolbar
• data-show-sheet-tabs
• data-show-formula-bar
• data-show-sheet-controls

For example, to hide built-in context menu:

<div id="spreadsheet" data-show-context-menu="false"/>

disable a feature

spreadsheet.setUserActionEnabled(AuxAction.ADD_SHEET, false);

copy & paste

Keikai currently doesn't support to paste content copied from an external application (e.g. Excel, text editor) via UI below:

• "Paste" button on the toolbar
• "paste" item in the context menu

It will show a warning: Please use shortcut ⌘V to paste what you cut or copied.

Because a browser needs a user-granted permission to access system clipboard.

Supported Hotkeys

• Ctrl+C | Copy
• Ctrl+X | Cut
• Ctrl+V | Paste
• Ctrl+Z | Undo
• Ctrl+Y | Redo
• Ctrl+A | select all / selects the current region that contains data
• Delete | Clear Content
• Esc | Clear or Copy/Cut Clipboard
• Up/Down/Left/Right | Move Focus
• Shift + Up/Down/Left/Right | Update Selection
• Ctrl + Up/Down/Left/Right | Move the Focus to the Edge
• PageUp / PageDown

Customize Form Control Style

Each form control is an HTML element that has its own CSS class, so you can customize their style by overriding rules of their CSS class e.g. .k-ctrl-button

For a specific button

Keikai also generates a CSS class upon a button's name in lower case for a button. For example, if a button's is Button 1, keikai will generate a CSS class, button-1, on the button.