Edit this page

Add Fonts to the Spreadsheet Fonts List

Environment

Product Progress Kendo UI Spreadsheet
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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy