{"id":5536,"date":"2018-10-25T11:47:52","date_gmt":"2018-10-25T08:47:52","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=5536"},"modified":"2024-08-10T13:50:51","modified_gmt":"2024-08-10T10:50:51","slug":"dhtmlxspreadsheet-reborn-major-update-3-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxspreadsheet-reborn-major-update-3-0\/","title":{"rendered":"dhtmlxSpreadsheet Reborn in Major Update 3.0"},"content":{"rendered":"

A series of cutting-edge releases goes on! <\/p>\n

Here comes dhtmlxSpreadsheet 3.0, entirely renewed and redesigned JavaScript spreadsheet component<\/a> with a range of major improvements. We’ve got rid of PHP dependency transforming it into a pure client-side JavaScript widget. The API has been thoroughly modified making room for various configuration options and operations for the grid. The interface has acquired the stylish Material look. Our Spreadsheet component has also received support for Angular<\/a>, React<\/a>, and Vue.js<\/a>.<\/p>\n

Hurry up to download the 30-day free trial of the latest version<\/a>!<\/strong><\/p>\n

Fine-tune Your JavaScript Spreadsheet<\/h5>\n

V3.0 presents a highly adjustable structure for dhtmlxSpreadsheet, which consists of Menu, Context Menu, Toolbar, Editing Line, and Grid. All of these elements can be easily configured. For instance, you can put a limit on the number of columns and rows in the grid for your purposes:<\/p>\n

var<\/span> spreadsheet =<\/span> new<\/span> dhx.Spreadsheet<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>          
\n    colsCount:<\/span> 10<\/span>,<\/span>
\n    rowsCount:<\/span> 10<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

While the Menu section is hidden by default, you can switch it on via the API. Both Menu and Context Menu may include additional options for manipulating data in the grid. <\/p>\n

You can add new Menu and Context Menu items:<\/p>\n

\/\/ spreadsheet.menu.data.add \/ spreadsheet.contextMenu.data.add<\/span>
\nspreadsheet.toolbar<\/span>.data<\/span>.add<\/span>(<\/span>{<\/span>
\n    type:<\/span> "menuItem"<\/span>,<\/span>
\n    id:<\/span> "menuitem-id"<\/span>,<\/span>
\n    value:<\/span> "Some value"<\/span>,<\/span>
\n}<\/span>,<\/span> -<\/span>1<\/span>,<\/span> "parent-id"<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"Spreadsheet
\nSpreadsheet Menu Customization. Check the sample ><\/a><\/p>\n

\"Spreadsheet
\nSpreadsheet Context Menu Customization. Check the sample ><\/a><\/p>\n

The toolbar is the most flexible part of dhtmlxSpreadsheet. You can replace icons of toolbar controls with custom ones, remove default controls or add new blocks of controls at your discretion.<\/p>\n

spreadsheet.toolbar<\/span>.data<\/span>.add<\/span>(<\/span>{<\/span>
\n    type:<\/span> "button"<\/span>,<\/span>
\n    icon:<\/span> "mdi mdi-delete"<\/span>,<\/span>
\n    tooltip:<\/span> "Remove all"<\/span>,<\/span>
\n    id:<\/span> "remove-all"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"Spreadsheet
\nAdding Custom Toolbar Buttons. Check the sample ><\/a><\/p>\n

dhtmxSpreadsheet makes use of the Material-style icon font. However, you can change it for any other icon font pack:<\/p>\n

<<\/span>script type=<\/span>"text\/javascript"<\/span> src=<\/span>"..\/..\/codebase\/spreadsheet.js"<\/span>><\/<\/span>script><\/span>
\n<<\/span>link rel=<\/span>"stylesheet"<\/span> href=<\/span>"..\/..\/codebase\/spreadsheet.css"<\/span>><\/span>
\n
\n<<\/span>link rel=<\/span>"stylesheet"<\/span> href=<\/span>"https:\/\/use.fontawesome.com\/releases\/v5.3.1\/css\/all.css"<\/span>
\n  integrity=<\/span>"sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"<\/span>  
\n  crossorigin=<\/span>"anonymous"<\/span>><\/span><\/div><\/div>\n

\"Custom
\nCustom Toolbar Icons. Check the sample ><\/a><\/p>\n

Localization allows displaying dhtmlxSpreadsheet in any language of your choice:<\/p>\n

\"Spreadsheet
\nCheck the sample ><\/a><\/p>\n

Besides, you can restrict access to Spreadsheet for end users by means of the read-only mode enabled via the readonly<\/strong> configuration option. Events will help you to customize this mode and make some parts of Spreadsheet unavailable by blocking the operations of your choice:<\/p>\n

var<\/span> spreadsheet =<\/span> new<\/span> dhx.Spreadsheet<\/span>(<\/span>"cont"<\/span>)<\/span>;<\/span>
\nspreadsheet.events<\/span>.on<\/span>(<\/span>"beforeEditStart"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n    return<\/span> false<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\nspreadsheet.events<\/span>.on<\/span>(<\/span>"beforeValueChange"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n    return<\/span> false<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\nspreadsheet.events<\/span>.on<\/span>(<\/span>"beforeStyleChange"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n    return<\/span> false<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\nspreadsheet.parse<\/span>(<\/span>data)<\/span>;<\/span><\/div><\/div>\n
Reorganized API Simplifies Work With Spreadsheet<\/h5>\n

Developers’ work with Spreadsheet is simplified due to the reorganized and detailed API<\/a>. Now there are plenty of coherent methods for performing operations in the grid, for example, undo and redo actions, adding and removing columns and rows, locking and unlocking cells etc.<\/p>\n

\/\/ locks a cell<\/span>
\nspreadsheet.lock<\/span>(<\/span>"A1"<\/span>)<\/span>;<\/span>
\n 
\n\/\/ locks a range of cells<\/span>
\nspreadsheet.lock<\/span>(<\/span>"A1:C1"<\/span>)<\/span>;<\/span>
\n 
\n\/\/ locks specified cells<\/span>
\nspreadsheet.lock<\/span>(<\/span>"A1,B5,B7,D4:D6"<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"Spreadsheet
\nCheck the sample ><\/a><\/p>\n

Spreadsheet enables extensive styling of cells and cell values. You can define the background color of cells, text decoration and text alignment of values in cells. Besides, you can clear the styles applied to cells, their values or both.<\/p>\n

\/\/ setting style for one cell<\/span>
\nspreadsheet.setStyle<\/span>(<\/span>"A1"<\/span>,<\/span>{<\/span>background:<\/span>"red"<\/span>,<\/span> border:<\/span>"solid 1px yellow"<\/span>}<\/span>)<\/span>;<\/span>
\n
\n\/\/ setting the same style for a range of cells<\/span>
\nspreadsheet.setStyle<\/span>(<\/span>"A1:D1"<\/span>,<\/span>{<\/span>color:<\/span>"blue"<\/span>}<\/span>)<\/span>;<\/span>
\n
\n\/\/ setting the same style for different cells<\/span>
\nspreadsheet.setStyle<\/span>(<\/span>"B6,A1:D1"<\/span>,<\/span>{<\/span>color:<\/span>"blue"<\/span>}<\/span>)<\/span>;<\/span>
\n
\n\/\/ setting styles for cells in a range alternately<\/span>
\nspreadsheet.setStyle<\/span>(<\/span>"A1:D1"<\/span>,<\/span>[<\/span>{<\/span>color:<\/span>"blue"<\/span>}<\/span>,<\/span>{<\/span>color:<\/span>"red"<\/span>}<\/span>]<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"Spreadsheet
\nCheck the sample ><\/a><\/p>\n

The main objective of dhtmlxSpreadsheet is providing a safe and convenient way to process large amounts of data. The safety of all operations is ensured by storing your data on your server. Loading data can be fulfilled from an external file in a JSON or CSV format via the load<\/strong> method or a local source with the help of the parse<\/strong> method. The serialize<\/strong> method makes it possible to save the processed data in the current state and paste it to another spreadsheet.<\/p>\n

\/\/ saving state of the spreadsheet1<\/span>
\nvar<\/span> state =<\/span> spreadsheet1.serialize<\/span>(<\/span>)<\/span>;<\/span>
\n
\n\/\/ creating a new spreadsheet<\/span>
\nvar<\/span> spreadsheet2 =<\/span> new<\/span> dhx.Spreadsheet<\/span>(<\/span>document.body<\/span>)<\/span>;<\/span>
\n
\n\/\/ parsing the state of the spreadsheet1 into spreadsheet2<\/span>
\nspreadsheet2.parse<\/span>(<\/span>state)<\/span>;<\/span><\/div><\/div>\n
Angular, React, and Vue.js Supported<\/h5>\n

From now on, using our JavaScript Spreadsheet in an app based on any of these three popular frameworks is a piece of cake. You’re free to choose one of the two simple scenarios for initializing Spreadsheet with Angular, React, or Vue.js. Check our initialization guides:<\/p>\n