Cell Button Controller

FancyGrid

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>

CSS

.my-column-action .fancy-grid-cell-inner {
  margin-top: 5px;
}

.fancy-grid-cell .my-button {
  background-color: rgba(0,0,0,0.05);
  padding: 5px 10px;
  opacity: 0.75;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 10px;
  box-sizing: border-box;
  line-height: 19px;
  color: gray;
  margin-top: 5px;
  margin-left: 5px;
}

@keyframes spinScale{0%{transform:rotate(0) scale(1)}50%{transform:rotate(360deg) scale(.9)}100%{transform:rotate(720deg) scale(1)}}

.button-status {
  position: relative;
  top: 2px;
}

.button-status svg {
  margin-top: 1px
  -webkit-animation-name: spinScale;
  animation-name: spinScale;
  -webkit-animation-duration: 1800ms;
  animation-duration: 1800ms;
  -webkit-animation-timing-function: cubic-bezier(.785, .135, .15, .86);
  animation-timing-function: cubic-bezier(.785, .135, .15, .86);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  shape-rendering: geometricprecision;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  Fancy.defineControl('mycontrol', {
    controls: [{
      event: 'cellclick',
      selector: '.my-button',
      handler: 'onClickMyButton'
    }],
    onClickMyButton: function(grid, o){
    	console.log(o.id, o.data.loading);
    	if(o.data.loading){
      	console.log('Run action when loading is false');
      	grid.setById(o.id, {
        	loading: false
        });
      }
    	else{
				console.log('Run action when loading is true');
      	grid.setById(o.id, {
        	loading: true
        });
      }
      
      //Update all grid cells
      grid.update();      
      
      //Update row
      /*
      grid.update({
  			type: 'row'
			});
      */
      
      //Update cell
      /*
      grid.update({
  			type: 'cell'
			});
      */
    }
  });

  new FancyGrid({
    renderTo: 'container',
    controllers: ['mycontrol'],
    width: 500,
    height: 400,
    dirtyEnabled: false,
    data: {
    	items: data,
      fields: ['company', 'name', 'surname', 'age', 'loading']
    },
    defaults: {
    	draggable: true,
      sortable: true
    },
    columns: [{
      index: 'company',
      title: 'Company',
      type: 'string',
      width: 100
    }, {
      index: 'name',
      title: 'Name',
      type: 'string',
      width: 100
    }, {
      index: 'surname',
      title: 'Sur Name',
      type: 'string',
      width: 100
    }, {
      index: 'age',
      title: 'Age',
      type: 'number',
      width: 100
    }, {
      width: 100,
      cls: 'my-column-action',
      index: 'loading',
      render: function(o){
      	o.value = [];
        
        if(o.data.loading){
        	o.value.push('<i class="button-status"><svg xmlns="http://www.w3.org/2000/svg" width="12.959999999999999" height="12.959999999999999" viewBox="0 0 54 54"><g><path...