Add Fonts to the Spreadsheet Fonts List

Environment

Product	Progress® Kendo UI® Spreadsheet for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I add a font to the drop-down font list of the Spreadsheet?

Solution

1. Reference the stylesheet of the font.
2. Set the list with the fonts to the reference of the DropDownList which contains the fonts.
3. Implement the select event of the widget.
4. Check the current selection and apply the selected font.

    <div id="spreadsheet"></div>
    <script>
        $("#spreadsheet").kendoSpreadsheet({
            sheets: [{
                rows: [{
                    cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
                }, {
                    cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
                }, {
                    cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
                }, {
                    cells: [{ value: "Lorem ipsum" },
                            { value: "sed do eiusmod" },
                            { value: "Ut enim ad minim" }]
                }]
            }],
            pdf: {
                area: "selection"
            }
        });

        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

        var ddls = $('.k-spreadsheet-toolbar [data-role="dropdownlist"]')[0];
        var ddl = $(ddls).data("kendoDropDownList");
        var dataSource = new kendo.data.DataSource({
                    data: [ "Arial", "Verdana", "Lobster" ]
                });
        ddl.setDataSource(dataSource);

        ddl.bind("select", onSelect);

        function onSelect(e){           
            var fontName = e.item.text();
            var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
            var sheet = spreadsheet.activeSheet();    
            var selection = sheet.selection();
            selection.fontFamily(fontName);
        }           
    </script>