FlexSheet

Prevent Undo/Redo actions & updating UndoStack

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.sheet.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.xlsx.min.js"></script>

 <div class="container">   

 <div id="flexSheet" style="height:400px;"></div>
 
 
 
 

<div id="thePopup" class="wj-dialog">
    <div class="wj-dialog-header">
        Welcome to the popup.
    </div>
    <div class="wj-dialog-body">
        Click one of the buttons below to close the popup.
    </div>
    <div class="wj-dialog-footer">
        <button class="wj-hide-ok">
            OK
        </button>
        <button class="wj-hide-cancel">
            Cancel
        </button>
    </div>
</div>

 </div>

JavaScript

onload = function() {

  
  var flexSheet = new wijmo.grid.sheet.FlexSheet('#flexSheet');
	var sheet = new wijmo.grid.sheet.Sheet();
	sheet.name = "test right click 1";
	sheet.itemsSource = getData();
	flexSheet.sheets.push(sheet);
  // give the grid a context menu
  
  var popup = new wijmo.input.Popup('#thePopup', {
    hidden: s => console.log('popup closed with result', s.dialogResult)
});
  
	  
  flexSheet.formatItem.addHandler((s, e) => {
     
  					//console.log(s.columnHeaders);
  					//let html='<button> FmE </button>';				
            let html = `<button class="wj-btn wj-btn-glyph x" type="button" tabindex="-1">
                 HI
                </button>`;
            if(e.panel.cellType != wijmo.grid.CellType.Cell || e.row != 0){
    						return;
  					}
            //console.log(e.cell.innerHTML);
            e.cell.innerHTML = ''; 
  					e.cell.innerText = e.panel.columns[e.col].header;
            /* if (e.panel == s.columnHeaders) {
                e.cell.innerHTML =   
                e.cell.innerHTML +      
              //  */
               
               
            console.log(e.cell.innerHTML, e.cell.innerText);
            wijmo.addClass(e.cell);
 					  wijmo.createElement(html, e.cell);
            
     });
 	  
    
  flexSheet.hostElement.addEventListener('click', (e)=>{
  if(!wijmo.hasClass(e.target, 'x') && !wijmo.hasClass(e.target.parentElement, 'x')){    
    // filter button not clicked
    return;
  }
   
  let htInfo = flexSheet.hitTest(e);
  console.log(htInfo.col, htInfo.row);
  
    
  
  //popup.owner = 'wj-elem-filter';
  popup.position=1;
  //popup.show(e);
  
  
});
  
  
  
  
  //theGrid.

  // create some random data
  function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [];
    for (var i = 0; i < 200; i++) {
      data.push({
        id: i,
        country: countries[i % countries.length],
        downloads: Math.round(Math.random() * 200000),
       ...