A user can add any user-defined handler to any of available events in Webix SpreadSheet. The programming example below shows how you can enable an onAfterSelect event. A popup with appropriate information will appear everytime after a user selects a cell or edits its contents. Feel free to download this coding sample.
webix.ready(function(){ webix.ui({ view:"spreadsheet", id:"ssheet", data:base_data, toolbar: "full", subbar:{ view:"toolbar", css:"webix_ssheet_toolbar", elements:[ {}, {view:'label', template:'Try to select some cells or change one of them'}, {} ] } }); $$("ssheet").attachEvent("onCellChange", function(row, column, value){ webix.message("Row: "+row+"; column: "+column+"; new value: "+value) }); $$("ssheet").attachEvent("onAfterSelect", function(id){ webix.message("Selected: "+JSON.stringify(id) ); }); });
<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>