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

For example, to hide built-in context menu:

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

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

Event Name - Event Class

Keikai passes different event objects for different events, the event constant and their related event class are:

CellMouseEvent

• ON_CELL_CLICK
• ON_CELL_RIGHT_CLICK
• ON_CELL_DOUBLE_CLICK
• ON_CELL_MOUSE_ENTER
• ON_CELL_MOUSE_LEAVE

RangeSelectEvent

• ON_MOVE_FOCUS
• ON_SELECTION_CHANGE

RangeKeyEvent

• ON_KEY_DOWN
• ON_KEY_UP
• ON_KEY_PRESS

CellEditEvent

• ON_EDIT_SAVE
• ON_EDIT_START
• ON_EDIT_CANCEL

SheetEvent

• ON_SHEET_VISIBLE
• ON_SHEET_ACTIVATE
• ON_SHEET_ADD
• ON_SHEET_DELETE
• ON_SHEET_MOVE
• ON_SHEET_RENAME

AuxActionEvent

• ON_AUX_ACTION

CellHyperlinkEvent

• ON_HYPERLINK_CLICK

ShapeEvent

• ON_SHAPE_CLICK
• ON_SHAPE_ACTION

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.