Toolbar Buttons, JavaScript Programming Example of Toolbar Buttons in SpreadSheet

JavaScript Programming Example of Toolbar Buttons in SpreadSheet

Have a look at the programming example of how to add toolbar buttons in SpreadSheet. You will be able to add your own block of buttons into the toolbar. Note that you can download this piece of code for free. Take your chance to use the coding samples by Webix for your web development projects.

JS Code

webix.ready(function(){
  webix.ui({
    view:"spreadsheet",
    data: base_data,
    buttons: {
      "$title": [{
        view: "label", width: 150, label: "My SpreadSheet"
      }],
      "undo-redo": ["undo","redo"],
      "font": ["font-family","font-size","font-weight","font-style","text-decoration","color"],
      "cell": ["background","borders","span"],
      "align": ["text-align","vertical-align","wrap"],
      "format":["format"],
      "My Block": [{
        view: "button", name: "my-button", width: 100, label: "My Button",
        tooltip: "Click this button", click: function(){webix.message("Click")}
      }]
    }
  });
});

HTML Code

<script>
  var base_data = {
    "styles": [
      ["top","#FFEFEF;#6E6EFF;center;'PT Sans', Tahoma;17px;"],						
      ["subtop","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;bold;;;"],
      ["sales","#818181;;center;'PT Sans', Tahoma;15px;;;bold;;;"],
      ["total","#818181;;right;'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;;;"],
      ["values","#000;#fff;right;'PT Sans', Tahoma;15px;;;;;;;price"]
    ],
    "sizes": [
      [0,1,125],
      [0,3,137],
      [0,4,137],
      [0,5,137]
    ],
    "data": [
      [1,1,"Report - July 2016","top"],    
      [2,1,"Region","subtop"],
      [2,2,"Country","subtop"],
      [2,3,"Sales - Group A","sales"],
      [2,4,"Sales - Group B","sales"],
      [2,5,"Total","total"],
      [3,1,"Europe","count"],
      [3,2,"Germany","count"],
      [3,3,"188400","values"],
      [3,4,"52000","values"],
      [3,5,"=C3+D3","values"],
      [4,1,"Europe","count"],
      [4,2,"France","count"],
      [4,3,"192200","values"],
      [4,4,"12000","values"],
      [4,5,"=C4+D4","values"],
      [5,1,"Europe","count"],
      [5,2,"Poland","count"],
      [5,3,"68900","values"],
      [5,4,"8000","values"],
      [5,5,"=C5+D5","values"],
      [6,1,"Asia","count"],
      [6,2,"Japan","count"],
      [6,3,"140000","values"],
      [6,4,"14000","values"],
      [6,5,"=C6+D6","values"],
      [7,1,"Asia","count"],
      [7,2,"China","count"],
      [7,3,"50000","values"],
      [7,4,"4800","values"],
      [7,5,"=C7+D7","values"]
  ],
    "spans": [
      [1,1,5,1]
    ]
  };  
</script>