Styling Multiple sheets

1. I am working on multiple sheets . I want to style them like background color , border. How it can be done. As my all sheets are dynamic , values to spreadsheet are coming from database. here I am sharing my code for json array which I am passing to webix UI.

2.Also, How to disable or change only 2 columns of the sheet to readonly. I don’t want user to enter anything to these 2 columns. Following is my json array.

var data= {
sheets: [
{
name: “Tab_1”,
content:{

							data:[
							[1,1,"ID","disable:true"],
							[1,2,"Value 1"],
							[1,3,"Value 2"],
							[1,4,"Result"],
							<?php 
							$r=2;
							foreach($arr as $record){
								echo "[".$r.",1,". $record['ID']."],";
								echo "[".$r.",2,". $record['value1']."],";
								echo "[".$r.",3,". $record['value2']."],";
								echo '['.$r.',4,'. $record['result'].'],';
								$r++;	
							}	?>]
						}
					},
					{
						name: "Tab_2",
						content:{
							data:[
								[1,1,"7"],
								[1,2,"8"],
								[1,3,"=a1+b1"]
							]
						}
					},
					{
						name: "Tab_3",
						content:{
							data:[
								[1,1,"20"]
							]
						}
					}
				]
			};

Hey @priyatama,

1. There are a few options here, if you want to style your sheets individually, you can:

1. Fetch the styles from your data that is coming from the server, you have to specify them like so: https://snippet.webix.com/0h0g4fk3, you can read more about the style options and their order here, down at the bottom: https://docs.webix.com/api__ui.spreadsheet_addstyle.html.

2. If you don’t have your styles specified in the data, you can use the addStyle method to add the style to your specified sheet - https://docs.webix.com/api__ui.spreadsheet_addstyle.html.

3. Alternatively if you want to style all of your sheets at once you can apply a css class to your spreadsheet via the css property that every view has access to. Afterwards, you can stylize your spreadsheet by referring to that class and the part of the spreadsheet you want to stylize. Since we’re talking about the datatable part of the spreadsheet, you’d have to refer to the datatable class names. This should be helpful, it includes every css class with a visual representation of what that class refers to: https://docs.webix.com/desktop__datatable_css.html. Here is a small example: https://snippet.webix.com/ymds7llk.

2. We can lock the cells by using the built-in method lockCell and specifying the range of cells we want to lock, so for instance if you wanted to lock the first 2 columns it would look something like this: https://snippet.webix.com/1ruz11oe. In this example columns 1 and 2 that have data inside are non-editable. You can read more about lockCell here - https://docs.webix.com/api__ui.spreadsheet_lockcell.html

Thanks @Dzmitry → It works like a champ to me

Hi,
Tried the 3rd way, but when a we add a CSS class to the spreadsheet via the CSS property, toolbar background changes are not being reflected inside the cell.