Conditional Formatting, JavaScript Programming Example of Conditional Formatting in SpreadSheet

Home
Examples
Conditional Formatting

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 conditions", 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;;;"],
	["count","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;;;;"],
	["calc-top","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;;;"],
	["calc-other","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;;;"]
  ],  
  "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?

Download Webix UI Framework

Study SpreadSheet Documentation

Check out SpreadSheet Widget Features