Conditional Styling, JavaScript Programming Example of Conditional Styling in SpreadSheet

JavaScript Programming Example of Conditional Styling in SpreadSheet

The coding sample below will help you specify particular conditions for cell formatting based on comparison of a cell value with entered values in SpreadSheet. Take the chance to use free programming examples to facilitate and speed up the process of web development.

JS Code

webix.ready(function(){
  var data = math_data_simple;

  // conditions in datasource
  data.conditions = [
    [3,6,">",100,"custom_bgcolor"],
    [3,7,"<",1000,"custom_less"]
  ];

  webix.ui({
    id: "ssheet",
    view:"spreadsheet",
    data: data,
    toolbar: "full",
    conditionStyle:[
      {name: 'bold', css: "custom_bold"},
      {name: 'italic', css: "custom_italic"},
      {name: 'red', css: "custom_color"},
      {name: 'highlight', css: "custom_bgcolor"},
      {name: 'green', css: "custom_less"}
    ]
  });
});

HTML Code

<style>
  .custom_bold {
  	font-weight: bold;
  }
  .custom_italic {
  	font-style: italic;
  }
  .custom_color {
  	color: red
  }
  .custom_bgcolor {
  	background: #f9cb9c;
  }
  .custom_less {
    color: #ffe599;
    background: #6aa84f;
  }
</style>
  
<script>
  var math_data_simple = {
  "styles": [    
	["top","#FFEFEF;#6E6EFF;center;'PT Sans', Tahoma;17px;"],						
	["subtop","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;bold;top;;"],
	["count","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;;top;;"],
	["calc-top","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;top;;"],
	["calc-other","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;middle;;"]
  ],  
  "data": [   
	[1, 1, "Countries:", "subtop"],
		[2, 1, "France", "count"],
		[3, 1, "Poland", "count"],
		[4, 1, "China", "count"],
	[1, 2, "April", "count"],
		[2, 2, 1366],
		[3, 2, 684],
		[4, 2, 8142],						
	[1, 3, "May", "count"],
		[2, 3, 842],
		[3, 3, 781],
		[4, 3, 7813],					
	[1, 4, "June", "count"],
		[2, 4, 903],
		[3, 4, 549],
		[4, 4, 7754],						
	[1, 5, "July", "count"],
		[2, 5, 806],
		[3, 5, 978],
		[4, 5, 8199],						
	[1, 6, "Total:", "calc-top"],
		[2, 6, "=SUM(B2:E2)"],
		[3, 6, "=SUM(B3:E3)"],
		[4, 6, "=SUM(B4:E4)"],	
	[1, 7, "Std Deviation:", "calc-top"],
		[2, 7, "=STDEVP(B2:E2)"],
		[3, 7, "=STDEVP(B3:E3)"],
		[4, 7, "=STDEVP(B4:E4)"]
  ],
  "sizes":[
	[0, 7, 130],						
	[0, 8, 200]
  ]
};
</script>