Data Grid Editing

Editing allows you to edit individual columns or entire rows at once. It is also possible to create custom cell editors and have unique solution.

Basic example

Add editable: true to column options to enable editing for a given column.

Car

Model

Year

Price

Honda

Civic

01/05/2013

28000

Mitsubishi

Lancer

01/05/2013

56000

Porsche

Boxster

09/02/2020

31000

Toyota

Celica

16/12/2010

18000

Kia

Sportage

14/09/2006

28000

Ford

Focus

04/07/2014

24000

Ford

Focus

16/12/2010

24000

Porsche

Boxster

24/01/2015

31000

Mitsubishi

Lancer

14/09/2006

18000

Kia

Sportage

01/05/2013

24000

HTML
javascript

<div id="grid"></div>

import { DataDen } from "data-den-core";

const rows = [
{ car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
{ car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '14/09/2006', price: 28000 },
{ car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
{ car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
{ car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '01/05/2013', price: 24000 },
];

const options = {
columns: [
{
field: "car",
headerName: "Car",
sort: true,
editable: true
},
{
field: "model",
headerName: "Model",
sort: true,
editable: true
},
{
field: "year",
headerName: "Year",
sort: true,
editable: true
},
{
field: "price",
headerName: "Price",
sort: true,
editable: true
},
],
rows: rows,
};

const gridEl = document.getElementById('grid');
const dataDen = new DataDen(gridEl, options);

Row edit mode

It is possible to edit multiple columns at once. To activate row edit mode add the following option: rowEditMode: true

Car

Model

Year

Price

Honda

Civic

01/05/2013

28000

Mitsubishi

Lancer

01/05/2013

56000

Porsche

Boxster

09/02/2020

31000

Toyota

Celica

16/12/2010

18000

Kia

Sportage

14/09/2006

28000

Ford

Focus

04/07/2014

24000

Ford

Focus

16/12/2010

24000

Porsche

Boxster

24/01/2015

31000

Mitsubishi

Lancer

14/09/2006

18000

Kia

Sportage

01/05/2013

24000

HTML
javascript

<div id="grid"></div>

import {
DataDen,
} from "data-den-core";

const rows = [
{ car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
{ car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '14/09/2006', price: 28000 },
{ car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
{ car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
{ car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '01/05/2013', price: 24000 },
];

const options = {
columns: [
{
field: 'car',
headerName: 'Car',
sort: true,
editable: true
},
{
field: 'model',
headerName: 'Model',
sort: true,
editable: true
},
{
field: 'year',
headerName: 'Year',
sort: true,
editable: true
},
{
field: 'price',
headerName: 'Price',
sort: true,
editable: true
},
],
rows: rows,
rowHeight: 32,
rowEditMode: true,
};

const gridEl = document.getElementById('grid');
const dataDen = new DataDen(gridEl, options);

Custom editing cell

It is possible to define custom editing cell by setting a new class for the cellEditor.

In the following example we use custom cellEditor for Price column .

Car

Model

Year

Price

Honda

Civic

01/05/2013

28000

Mitsubishi

Lancer

01/05/2013

56000

Porsche

Boxster

09/02/2020

31000

Toyota

Celica

16/12/2010

18000

Kia

Sportage

14/09/2006

28000

Ford

Focus

04/07/2014

24000

Ford

Focus

16/12/2010

24000

Porsche

Boxster

24/01/2015

31000

Mitsubishi

Lancer

14/09/2006

18000

Kia

Sportage

01/05/2013

24000

HTML
javascript

<div id="grid"></div>

import {
            DataDen,
            } from "data-den-core";

            const rows = [
            { car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
            { car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
            { car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
            { car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
            { car: 'Kia', model: 'Sportage', year: '14/09/2006', price: 28000 },
            { car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
            { car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
            { car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
            { car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
            { car: 'Kia', model: 'Sportage', year: '01/05/2013', price: 24000 },
            ];

            function createHtmlElement(template, elementName = 'div') {
            const placeholder = document.createElement(elementName);
            placeholder.innerHTML = template;

            return placeholder.firstElementChild;
            }

            class DataDenCustomEditor {
            element;
            input;
            params;
            #cssPrefix;

            constructor(params) {
            this.#cssPrefix = params.cssPrefix;
            this.params = params;

            const template = `<input
  class="${this.#cssPrefix}cell-editor"
  type="number"
  step="1000"
  value="${params.value}" />`; this.element = createHtmlElement(template); this.input = this.element;
this.attachUiEvents(); } attachUiEvents() { if (this.input) { this.input.addEventListener('keyup', (e) =>
this.params.onKeyUp(e)); } } afterUiRender() { this.input.select(); } getGui() { return this.element; }
getValue() { return this.input.value; } } const options = { columns: [ { field: 'car', headerName: 'Car',
sort: true }, { field: 'model', headerName: 'Model', sort: true }, { field: 'year', headerName: 'Year',
sort: true, editable: true, }, { field: 'price', headerName: 'Price', sort: true, editable: true,
cellEditor: DataDenCustomEditor }, ], rows: rows, }; const gridEl = document.getElementById('grid'); const
dataDen = new DataDen(gridEl, options);

Editing

Data Grid Editing

Basic example

Row edit mode

Custom editing cell

Access restricted

To view this section you must have an active PRO account