Wijmo 5 - FlexGrid Hover Style

Allow Editing using DropDown

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20181.436/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20181.436/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.436/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.436/controls/wijmo.grid.min.js"></script>

<div id="codedClass"></div>

CSS

body {
  background: #f0f0f0;
  padding-top:50px;
}

JavaScript

$(function() {

	
		// hover on row (class name set in code)
    var hoverRow = -1;
    var flex = new wijmo.grid.FlexGrid('#codedClass', {
    	itemsSource: getData(),
      autoGenerateColumns:false,
      columns:[
      	{header:'Country',binding:'country'},
        {header:'Downloads',binding:'downloads'},
        {header:'Sales',binding:'sales'},
        {header:'Expenses',binding:'expenses'},
        {header:'Country',binding:'country'},
        {header:'Downloads',binding:'downloads'},
        {header:'Sales',binding:'sales'},
        {header:'Expenses',binding:'expenses'},
        {header:'Country',binding:'country'},
        {header:'Downloads',binding:'downloads'},
        {header:'Sales',binding:'sales'},
        {header:'Expenses',binding:'expenses'},
        {header:'Country',binding:'country'},
        {header:'Downloads',binding:'downloads'},
        {header:'Sales',binding:'sales'},
        {header:'Expenses',binding:'expenses'},
        
      ],
      itemFormatter:function(panel,r,c,cell){
      console.log(panel.cellType)
      if(panel.cellType==2){
      	cell.style.fontStyle="italic";
      }
      	if(panel.cellType==1){
        	cell.style.fontWeight="bold";
          cell.innerHTML="<button class='btn btn-default'><i>"+cell.innerText+"</i></button>"
        }
        
      }
    });
   
   
   
});

function getData() {

    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < 10000; i++) {
        data.push({
            country: countries[i%countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
    return data;
}