AgGrid Test

With popup

by dpnminh

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/9.0.0/ag-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<div id="myGrid" style="height: 200px;" class="ag-fresh"></div>

CSS

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.ag-selection-checkbox{
  opacity: 0;
}

.ag-row:hover .ag-selection-checkbox, .ag-row-selected .ag-selection-checkbox{
  opacity: 1;
}

.ag-fresh .ag-cell-focus, .ag-cell.ag-cell-no-focus{
  border: none !important;
}

.dropdown-content{
  position: fixed;
}

.dropdown-content.active{
  opacity: 1;
  display: block;
}

JavaScript

function cellRender(params) {
console.log(params);
    var eDiv = document.createElement('div');
    eDiv.innerHTML = '<a class="btn-simple dropdown-button' + params.data.make+ '"  href="#" data-activates="dropdown-' + params.data.make + '" data-beloworigin="true"><i class="material-icons">more_vert</i></a><ul id="dropdown-' + params.data.make+'" class="dropdown-content"><li><a href="#!"><i class="material-icons">mode_edit</i>Edit</a></li> <li><a href="#!"><i class="material-icons">attach_file</i>Attach</a></li></ul>';
    var eButton = eDiv.querySelectorAll('.btn-simple')[0];

  
    eButton.addEventListener('click', function() {
        if ($('#dropdown-'+ params.data.make)[0].classList.contains('active')){
        	$('#dropdown-'+ params.data.make)[0].classList.remove('active');
        }
        else{
        	$('#dropdown-'+ params.data.make)[0].classList.add('active');
        }
    });

    return eDiv;
}

// specify the columns
var columnDefs = [
    {headerName: "Make", field: "make", checkboxSelection: true, headerCheckboxSelection: false},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"},
    {headerName: "Action", field: "action", cellRenderer: cellRender}
];

// specify the data
var rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Ferrari", model: "Bibi", price: 71000},
    {make: "Huyndai", model: "Nati", price: 30000},
    {make: "Ford", model: "Focus", price: 42000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

// let the grid know which columns and what data to use
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    rowSelection: 'multiple',
    enableSorting: true,
    animateRows: true,
    sortingOrder: ['desc','asc',null]
};

// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {

    // lookup...