Add fonts to fontFamily toolbar menu

3 posts, 1 answers
  1. B Jones
    B Jones avatar
    14 posts
    Member since:
    Jun 2010

    Posted 16 Nov 2017 Link to this post

    The standard fontFamily toolbar menu lists the following fonts: "Arial", "Courier New", "Georgia", "Times New Roman", "Trebuchet MS", "Verdana"

     

    I'd like to add additional ones to the list but haven't been able to figure out how. There appears to be support for customizing the list by setting a fontFamilies property somewhere, but I haven't been able to figure out where to do this or how to get a reference to the drop down list.

     

    Thanks

     

  2.
  3. Answer
    Neli
    Admin
    Neli avatar
    292 posts

    Posted 20 Nov 2017 Link to this post

    Hello,

    There is a possibility in the Spreadsheet, fontFamily to be set to specific range in the sheet. But currently there is no built in configuration which allows you to add a font to the Spreadsheet font list in the toolbar dropdown.

    You could use the fontFamily method and the approach described below to achieve the desired functionality.

    The stylesheets of the newly added fonts should be referenced.
    For example:

    You could get a reference of the DropDownList which contains the fonts
    var ddls = $('.k-spreadsheet-toolbar [data-role="dropdownlist"]')[0];
    var ddl = $(ddls).data("kendoDropDownList");

    Then, you could set the list of the fonts using DropDownList setDataSource method
    var dataSource = new kendo.data.DataSource({
        data: [ "Arial", "Verdana", "Lobster" ]
    });
    ddl.setDataSource(dataSource);

    You need to subscribe to the 'select' event of the DropDownList
    ddl.bind("select", onSelect);

    In the select event handler, you could check the selected font. A reference of the Spreadsheet widget is needed. You could check the current selection by using selection() method. The font could be applied, by using range fontFamily method
    function onSelect(e){          
    var fontName = e.item.text();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();   
    var selection = sheet.selection();
    selection.fontFamily(fontName);
    }

    I hope that you will find the linked Dojo example helpful.


    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. B Jones
    B Jones avatar
    14 posts
    Member since:
    Jun 2010

    Posted 20 Nov 2017 in reply to Neli Link to this post

    Thanks Neli!
Back to Top