Conditional Formatting, JavaScript Programming Example of Conditional Formatting in SpreadSheet

JavaScript Programming Example of Conditional Formatting in SpreadSheet

You can specify conditions for cell formatting. The piece of code below shows how you can enable it. Note, you can download this programming example for free.

JS Code

webix.ready(function(){
  function showFormats(){
    var formats = $$("ssheet").conditions.serialize();

    var text = "";
    for(var i =0; i < formats.length; i++){
      text += JSON.stringify(formats[i], null,"")+"\r";
    }
    $$("txt").setValue(text);
  }

  var buttons = {
    width:300, view: "form",
    rows:[
      { view:"button", value:"Get ranges", click: showFormats},
      { view:"textarea", id:"txt" }
    ]
  };

  var data = math_data_simple;

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

  webix.ui({
    cols:[
      buttons,
      {
        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>

Would you like to be able to enable conditional formatting in your spreadsheet?