This is a migrated thread and some comments may be shown as answers.

Add fonts to fontFamily toolbar menu

6 Answers 588 Views

Spreadsheet

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

Accepted

answered on 20 Nov 2017, 02:52 PM

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

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.