SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage User Interface / Formulas / Language Package / Create and Use a Custom Language Package
In This Topic
    Create and Use a Custom Language Package
    In This Topic

    Apart from the 18+ available language packages, SpreadJS also supports Custom Localization. This feature enables users to define their own custom language and display words or phrases as per their specific preferences.

    Creating and using a custom language package is useful especially when users need to work with regional date and time formats while working in different locales. Using this feature, users can localize function names, work with custom functions, define table functions, customize table formula keywords, CalcError phrases, boolean values and work with special function logic in their preferred language.

    Users can use the culture() method and addCultureInfo() method of the CultureManager class in order to work with custom language packages.

    An example screenshot to illustrate some custom defined language packages is shown below.  

    Custom defined language package 

    Using Code

    Refer to the following example code in order to create and use a custom language package.

    JavaScript
    Copy Code
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <link href="css/gc.spread.sheets.excel2013white.12.2.0.css" rel="stylesheet" />
    <script src="scripts/gc.spread.sheets.all.12.2.0.min.js"></script>
    <script src="scripts/demo.js"></script>
    <script src="scripts/resource.js"></script>
    <script>
    $(document).ready(function () {
    
    // Initializing Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    
    // Fetch ActiveSheet
    sheet = spread.getSheet(0);
    spread.suspendPaint();
    spread.options.showScrollTip = 3;
    spread.options.showResizeTip = 3;
    var table = sheet.tables.addFromDataSource("table1", 0, 0, source, GC.Spread.Sheets.Tables.TableThemes.medium2)
    table.showFooter(true);
    table.showHeader(true);
    table.highlightFirstColumn(true);
    table.setColumnFormula(3, "=SUM(D4:D12)");
    table.setColumnFormula(2, "=SUM(E4:E12)");
    table.setColumnValue(0, "Total");
    sheet.setColumnWidth(0, 130);
    sheet.setColumnWidth(4, 100);
    spread.resumePaint();
    GC.Spread.Common.CultureManager.addCultureInfo("de", null, de);
    GC.Spread.Common.CultureManager.addCultureInfo("zh_tw", null, zh_tw);
    GC.Spread.Common.CultureManager.addCultureInfo("fr", null, fr);
    GC.Spread.Common.CultureManager.addCultureInfo("ha_ha", null, ha_ha);
    spread.resumePaint();
    var select = document.getElementById('CultureSelect');
    select.onchange = function ()
    {
      debugger;
      var culture = this.value;
      GC.Spread.Common.CultureManager.culture(culture);
      $("#l_description").text(langDescription[culture]);
      $("#language").val(JSON.stringify(window[culture], null, 2));
    }
    });
    </script>
    </head>
    
    <body>
    <div id="settingsDiv">
    Switch Culture:
    <select id="CultureSelect">
    <option value="en">en</option>
    <option value="zh_tw">zh-tw</option>
    <option value="fr">fr</option>
    <option value="de">de</option>
    <option value="ha_ha">Ha-Ha</option>
    </select>
    </div>
    
    <p id="l_description">The base and default language.</p>
    <div id="ss" style="height:400px;width:600px"></div>
    <textarea id="language" cols="85" rows="40" style="max-width: 98%" readonly="readonly"></textarea>
    </body>
    </html>