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

Server Import/Export: FontFamily not take into account

1 Answer 10 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
Heiko
Top achievements
Rank 1
Veteran
Heiko asked on 23 Feb 2021, 01:26 PM

Hi!

When I load an Excel-File from disk to show it inside Spreadsheet component the font families are not taken into account. For example, I formatted a cell with Arial Black, but it only shows Arial. How can I ensure that the fonts are included in the import?

Regards
Heiko

1 Answer, 1 is accepted

Sort by
0
Misho
Telerik team
answered on 26 Feb 2021, 10:26 AM

Hi,

There is no built in configuration which allows you to add a font to the Spreadsheet font list in the toolbar dropdown. However, you could add a font to the drop-down font list of the SpreadSheet as it is described in the following knowledge-base article: 

https://docs.telerik.com/kendo-ui/knowledge-base/spreadsheet-add-font

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

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

 

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

You need to 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", "Arial Black", "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);
}

Here is a dojo sample showing this approach:

https://dojo.telerik.com/aVUgOyeL/4 

I hope you will find this information useful.

Best Regards,
Misho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Spreadsheet
Asked by
Heiko
Top achievements
Rank 1
Veteran
Answers by
Misho
Telerik team
Share this question
or