Last Updated: 26 Feb 2020 15:03 by ADMIN
Created on: 09 Nov 2016 04:33
Category: Spreadsheet
Type: Feature Request
Implement CSS Styling on your spreadsheet ranges/cells to align it to HTML5 separation of style/code/layout
We are using the Kendo UI spreadsheet in a real-world website. We have a design team who are providing a visual design which fits in with our company's corporate standards.

HTML5 aims at separating styling from the layout design, which enables different teams to build the syle, with very little development experience, but more artistic experience.

For some reason, the Spreadsheet control can only be styled via the API (javascript code)! This means our design team needs to write their style in javascript, which is completely unrealistic.

It should be a fairly simple change to allow a range object to have a CSS class associated, and let HTML work like it should.
Veselin Tsvetanov
Posted on: 26 Feb 2020 15:03

Hello James,

The Spreadsheet embeds the styling for its cells within the cells themselves in order to properly transfer that formatting to XLSX when exported. That staling could be modified with JS calls using the Range object methods or within the configuration of the widget itself. Extracting that styling outside of the cells (ranges) will break its XLSX compatibility.

Veselin Tsvetanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Marin Bratanov
Posted on: 09 Nov 2016 16:06
An alternative approach is to
1 - create a page for your designers with the spreadsheet on it
2 - have them style the cells via the toolbar of the control
3 - add a button to export the styling to a JSON file (see
4 - send that file to the server (e.g., to a service you can implement)
5 - on the page that the end users will use, provide a dropdown or other selection mechanism that will list the relevant JSON files provided by the design team, so they can be imported in the spreadsheet (see the above demo again)