Created
April 18, 2021 09:17
-
-
Save avallete/9b12f851374d838b480df32fbe903097 to your computer and use it in GitHub Desktop.
An example of using agGrid and ag-grid-autocomplete-editor without npm or bundling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Ag-Grid Autocomplete Basic Example</title> | |
<script src="https://unpkg.com/ag-grid-community@25.1.0/dist/ag-grid-community.min.js"></script> | |
<!-- import AutocompleteSelectCellEditor styles --> | |
<link rel="stylesheet" href="https://unpkg.com/ag-grid-autocomplete-editor@2.2.1/main.css"> | |
</head> | |
<body> | |
<div id="myGrid" style="height: 200px; width:900px;" class="ag-theme-alpine"></div> | |
</body> | |
</html> | |
<script> | |
// Patch the require issue | |
// alias ag-grid-community from window.agGrid provided by the script tag | |
window['ag-grid-community'] = window.agGrid; | |
</script> | |
<!-- import AutocompleteSelectCellEditor package from the compiled javascript --> | |
<script src="https://unpkg.com/ag-grid-autocomplete-editor@2.2.1/ag-grid-autocomplete-editor.js"></script> | |
<script> | |
// some select data | |
const autocompleteSelectData = [ | |
{label: "Coco l'asticot", value: "Coco l'asticot"}, | |
{label: 'Le sanglier de cornouailles', value: 'Le sanglier de cornouailles'}, | |
{label: 'Le sanguinaire', value: 'Le sanguinaire'}, | |
{label: 'Le terrible', value: 'Le terrible'}, | |
{label: 'Le cruel', value: 'Le cruel'}, | |
] | |
const columnDefs = [ | |
{ field: "make" }, | |
{ field: "model" }, | |
{ field: "price", editable: true }, | |
{ | |
headerName: 'Already present data selector', | |
field: 'autocomplete-column', | |
// our AutocompleteSelectCellEditor should be available on into the window object so we can reference it as global variable | |
cellEditor: AutocompleteSelectCellEditor, | |
cellEditorParams: { | |
selectData: autocompleteSelectData, | |
placeholder: 'Select an option', | |
}, | |
valueFormatter: (parameters) => { | |
if (parameters.value) { | |
return parameters.value.label || parameters.value.value || parameters.value | |
} | |
return '' | |
}, | |
editable: true, | |
} | |
]; | |
const rowData = [ | |
{ make: "Toyota", model: "Celica", price: 35000, 'autocomplete-column': undefined }, | |
{ make: "Ford", model: "Mondeo", price: 32000, 'autocomplete-column': undefined }, | |
{ make: "Porsche", model: "Boxter", price: 72000, 'autocomplete-column': undefined } | |
] | |
// let the grid know which columns and what data to use | |
const gridOptions = { | |
columnDefs: columnDefs, | |
rowData: rowData | |
}; | |
// setup the grid after the page has finished loading | |
document.addEventListener('DOMContentLoaded', () => { | |
const gridDiv = document.querySelector('#myGrid'); | |
new agGrid.Grid(gridDiv, gridOptions); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment