SpreadJS Documentation
Setting Visual Styles

You can change the appearance of the entire widget.

Using Code

This example sets a theme or visual style for the widget.

JavaScript
Copy Code

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Use Theme</title>
    <script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
    <link href="./css/gcspread.sheets.9.40.20153.0.css" rel="stylesheet" type="text/css" />
    <script src="./scripts/gcspread.sheets.all.9.40.20153.0.js"></script>

    <script type="text/javascript">
        $(function () {
            var spread = new GcSpread.Sheets.Spread($("#ss")[0], { sheetCount: 3 });
            var sheet = spread.getActiveSheet();

            $("#btn1").click(function () {
                $("head").append($('<link href="https://code.jquery.com/ui/1.8.11/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" type="text/css" />'));
                setTimeout(
                    function () {
                        var spread = $("#ss").data("spread");
                        spread.repaint();
                    }, 500);
            });
        });
    </script>
</head>
<body>
    <div>
        <div id="ss" style="height: 300px; width: 50%"></div>
    </div>
    <input type="button" id="btn1" value="Change Theme" />
</body>
</html>

See Also

Developer's Guide

 

 


Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.