Skip to content

Instantly share code, notes, and snippets.

@avallete

avallete/ag-grid-autocomplete-basic-example.html

Created April 18, 2021 09:17
Show Gist options
  • Save avallete/9b12f851374d838b480df32fbe903097 to your computer and use it in GitHub Desktop.
Save avallete/9b12f851374d838b480df32fbe903097 to your computer and use it in GitHub Desktop.
Download ZIP
An example of using agGrid and ag-grid-autocomplete-editor without npm or bundling
Raw
ag-grid-autocomplete-basic-example.html
<!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