Add fonts to fontFamily toolbar menu

[B Jones]

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

 

[Neli]

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:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

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

[B Jones]

Thanks Neli!

[do van]

Hi Neil,

How can I do it for Vue wrapper component?

[Petar]

Hi Do Van,

I've already answered your question in a support ticket and we are going to close the current thread. I won't post the solution here as the current discussion is about Kendo UI for jQuery and not for Kendo UI for Vue.

Regards,
Petar
Progress Telerik

[do van]

Hi Petar,

My question is created before support ticket, when I find solution for add more font.

I'm sorry for bothering you!

[Petar]

Hi Do Van,

There is no need to apologize. Everything is OK.

I wrote my previous reply just to not leaving your question without a reply :) 

Regards,
Petar
Progress Telerik