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

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.

Nginx Configuration

For faster loading static files, we could use with nginx.

• Example for default.conf
  • dart server port: 5678
  • tomcat port: 5000

http {
    gzip on;
    gzip_vary on;
    gzip_min_length 2048;
    gzip_comp_level 9;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain application/javascript text/css application/xml text/javascript;
    gzip_disable "MSIE [1-6]\.";

    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }
}

server {
    listen 80;
    rewrite_log on;

    client_max_body_size 100m;

    location ~ /ws/(.*) {
        if ($http_upgrade = "websocket") {
            proxy_pass http://localhost:5678;
        }
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /s/api/dart/ {
        alias /home/ubuntu/keikai9999/keikai-server/dart/build/web/client/dart/;
    }
    location ~ \/.*\/s\/api\/dart\/(.*)[^\.js|^\.svg|^\.ttf]$ {
        rewrite \/.*\/s\/api\/dart\/(.*)[^\.js|^\.svg|^\.ttf]$ /s/api/dart/main.dart.js;
    }
    location ~ \/.*\/s\/api\/dart\/(.*)\.js$ {
        rewrite \/.*\/s\/api\/dart\/(.*)\.js$ /s/api/dart/$1.js;
    }
    location ~ \/.*\/s\/api\/dart\/packages\/(.*)$ {
        rewrite \/.*\/s\/api\/dart\/packages\/(.*)$ /s/api/dart/packages/$1;
    }
    location / {
        proxy_pass http://localhost:5000;
    }
}