NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Menu, JavaScript Programming Example of Menu in SpreadSheet

JavaScript Programming Example of Menu in SpreadSheet

Get the programming example for adding a dropdown menu at the top of SpreadSheet. It will enable you to save space on the toolbar and leave the most important buttons on it. Don't hesitate to use free coding samples by Webix for accelerating the process of web development.

JS Code

webix.i18n.setLocale("ru-RU");

webix.ready(function(){ 
  webix.ui({
    view:"spreadsheet",
    data:base_data,
    menu:true,
    toolbar:"full"
  });
}); 

HTML Code

<script src="//cdn.webix.com/site/i18n/ru.js" type="text/javascript"></script>
<script src="//docs.webix.com/samples/65_spreadsheet/01_basic/data/ru.js"></script>

<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>