Demos
Grid(Vue)
Editing
Inline Editing

Inline Editing (Vue)

Although the FlexGrid control provides efficient, Excel-style editing by default, you may want to customize the editing behavior. If for some reason you don't like the Excel-style editing and prefer to add editing buttons to every row (typical of editable HTML tables), you can accomplish that using the formatItem event and a little code.

Learn about FlexGrid | FlexGrid API Reference

This example uses Vue.

JavaScript
Angular
Vue
React
app.vue
index.html
Copy to CodeMine
<template>
    <div class="container-fluid">
        <!-- the grid -->
        <wj-flex-grid :isReadOnly=true selectionMode="None" headersVisibility="Column" :itemsSource="data"
            :initialized="initializeGrid">
            <wj-flex-grid-column binding="id" header="ID" :width=50 :isReadOnly=true></wj-flex-grid-column>
            <wj-flex-grid-column binding="country" header="Country" :isRequired=true
                :dataMap="countries"></wj-flex-grid-column>
            <wj-flex-grid-column binding="sales" header="Sales" format="n2"></wj-flex-grid-column>
            <wj-flex-grid-column binding="expenses" header="Expenses" format="n2"></wj-flex-grid-column>
            <wj-flex-grid-column binding="buttons" header="Edit" :width=160>
            </wj-flex-grid-column>
        </wj-flex-grid>

        <!-- template for buttons on items in view mode -->
        <div id="tplBtnViewMode" style="display:none">
            <button id="btnEdit" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
            <button id="btnDelete" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-remove"></span> Delete
            </button>
            <div>

                <!-- template for buttons on items in edit mode -->
                <div id="tplBtnEditMode" style="display:none">
                    <button id="btnOK" class="btn btn-primary btn-sm">
                        <span class="glyphicon glyphicon-ok"></span> OK
                    </button>
                    <button id="btnCancel" class="btn btn-warning btn-sm">
                        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                    </button>
                </div>
            </div>
            </div>
            </div>  
</template>

<script setup>
import * as wjcCore from "@mescius/wijmo";
import * as wjcGrid from "@mescius/wijmo.grid";
import { ref } from "vue";

const data = ref([]);
const countries = ref(["US", "Germany", "UK", "Japan", "Italy", "Greece"]);
const flex = ref(null);
const _currentEditItem = ref(null);

function initializeGrid(flexref) {
    flex.value = flexref;
    data.value = _getData();
    flexref.rows.defaultSize = 40;
    // custom formatter to paint buttons and editors
    flexref.formatItem.addHandler((s, e) => {
        if (e.panel == s.cells) {
            let col = s.columns[e.col],
                item = s.rows[e.row].dataItem;
            if (item == _currentEditItem.value) {
                // create editors and buttons for the item being edited
                switch (col.binding) {
                    case "buttons":
                        e.cell.innerHTML = document.getElementById("tplBtnEditMode").innerHTML;
                        e.cell["dataItem"] = item;
                        break;
                    case "country":
                    case "sales":
                    case "expenses":
                        e.cell.innerHTML = '<input class="form-control" ' + 'id="' + col.binding + '" ' + 'value="' + s.getCellData(e.row, e.col, true) + '"/>';
                        break;
                }
            } else {
                // create buttons for items not being edited
                switch (col.binding) {
                    case "buttons":
                        e.cell.innerHTML = document.getElementById("tplBtnViewMode").innerHTML;
                        e.cell["dataItem"] = item;
                        break;
                }
            }
        }
    });

    // handle button clicks
    flexref.addEventListener(flexref.hostElement, "click", (e) => {
        let targetBtn;
        if (e.target instanceof HTMLButtonElement) {
            targetBtn = e.target;
        } else if (e.target instanceof HTMLSpanElement && e.target.classList.contains("glyphicon")) {
            targetBtn = e.target.parentElement;
        }
        if (targetBtn) {
            // get button's data item
            let item = wjcCore.closest(targetBtn, ".wj-cell")["dataItem"];
            // handle buttons
            switch (targetBtn.id) {
                // start editing this item
                case "btnEdit":
                    _editItem(item);
                    break;
                // remove this item from the collection
                case "btnDelete":
                    flexref.collectionView.remove(item);
                    break;
                // commit edits
                case "btnOK":
                    _commitEdit();
                    break;
                // cancel edits
                case "btnCancel":
                    _cancelEdit();
                    break;
            }
        }
    });

    // exit edit mode when scrolling the grid or losing focus
    flexref.scrollPositionChanged.addHandler(_cancelEdit.bind(this));
    flexref.lostFocus.addHandler(_cancelEdit.bind(this));
}

function _getData() {
    // create some random data
    let data = [];
    for (let i = 0; i < countries.value.length; i++) {
        data.push({
            id: i,
            country: countries.value[i],
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
            overdue: i % 4 == 0,
        });
    }
    return data;
}

function _editItem(item) {
    _cancelEdit();
    _currentEditItem.value = item;
    flex.value.invalidate();
}

function _commitEdit() {
    if (_currentEditItem.value) {
        flex.value.columns.forEach((col) => {
            let input = flex.value.hostElement.querySelector("#" + col.binding);
            if (input) {
                let value = wjcCore.changeType(input.value, col.dataType, col.format);
                if (wjcCore.getType(value) == col.dataType) {
                    _currentEditItem.value[col.binding] = value;
                }
            }
        });
    }
    _currentEditItem.value = null;
    flex.value.invalidate();
}

function _cancelEdit() {
    if (_currentEditItem.value) {
        _currentEditItem.value = null;
        flex.value.invalidate();
    }
}
</script>

<style>
.wj-flexgrid {
    max-height: 200px;
    margin-bottom: 12px;
}

body {
    margin-bottom: 48px;
}
</style>
<template> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid :isReadOnly=true selectionMode="None" headersVisibility="Column" :itemsSource="data" :initialized="initializeGrid"> <wj-flex-grid-column binding="id" header="ID" :width=50 :isReadOnly=true></wj-flex-grid-column> <wj-flex-grid-column binding="country" header="Country" :isRequired=true :dataMap="countries"></wj-flex-grid-column> <wj-flex-grid-column binding="sales" header="Sales" format="n2"></wj-flex-grid-column> <wj-flex-grid-column binding="expenses" header="Expenses" format="n2"></wj-flex-grid-column> <wj-flex-grid-column binding="buttons" header="Edit" :width=160> </wj-flex-grid-column> </wj-flex-grid> <!-- template for buttons on items in view mode --> <div id="tplBtnViewMode" style="display:none"> <button id="btnEdit" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-pencil"></span> Edit </button> <button id="btnDelete" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-remove"></span> Delete </button> <div> <!-- template for buttons on items in edit mode --> <div id="tplBtnEditMode" style="display:none"> <button id="btnOK" class="btn btn-primary btn-sm"> <span class="glyphicon glyphicon-ok"></span> OK </button> <button id="btnCancel" class="btn btn-warning btn-sm"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel </button> </div> </div> </div> </div> </template> <script setup> import * as wjcCore from "@mescius/wijmo"; import * as wjcGrid from "@mescius/wijmo.grid"; import { ref } from "vue"; const data = ref([]); const countries = ref(["US", "Germany", "UK", "Japan", "Italy", "Greece"]); const flex = ref(null); const _currentEditItem = ref(null); function initializeGrid(flexref) { flex.value = flexref; data.value = _getData(); flexref.rows.defaultSize = 40; // custom formatter to paint buttons and editors flexref.formatItem.addHandler((s, e) => { if (e.panel == s.cells) { let col = s.columns[e.col], item = s.rows[e.row].dataItem; if (item == _currentEditItem.value) { // create editors and buttons for the item being edited switch (col.binding) { case "buttons": e.cell.innerHTML = document.getElementById("tplBtnEditMode").innerHTML; e.cell["dataItem"] = item; break; case "country": case "sales": case "expenses": e.cell.innerHTML = '<input class="form-control" ' + 'id="' + col.binding + '" ' + 'value="' + s.getCellData(e.row, e.col, true) + '"/>'; break; } } else { // create buttons for items not being edited switch (col.binding) { case "buttons": e.cell.innerHTML = document.getElementById("tplBtnViewMode").innerHTML; e.cell["dataItem"] = item; break; } } } }); // handle button clicks flexref.addEventListener(flexref.hostElement, "click", (e) => { let targetBtn; if (e.target instanceof HTMLButtonElement) { targetBtn = e.target; } else if (e.target instanceof HTMLSpanElement && e.target.classList.contains("glyphicon")) { targetBtn = e.target.parentElement; } if (targetBtn) { // get button's data item let item = wjcCore.closest(targetBtn, ".wj-cell")["dataItem"]; // handle buttons switch (targetBtn.id) { // start editing this item case "btnEdit": _editItem(item); break; // remove this item from the collection case "btnDelete": flexref.collectionView.remove(item); break; // commit edits case "btnOK": _commitEdit(); break; // cancel edits case "btnCancel": _cancelEdit(); break; } } }); // exit edit mode when scrolling the grid or losing focus flexref.scrollPositionChanged.addHandler(_cancelEdit.bind(this)); flexref.lostFocus.addHandler(_cancelEdit.bind(this)); } function _getData() { // create some random data let data = []; for (let i = 0; i < countries.value.length; i++) { data.push({ id: i, country: countries.value[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, overdue: i % 4 == 0, }); } return data; } function _editItem(item) { _cancelEdit(); _currentEditItem.value = item; flex.value.invalidate(); } function _commitEdit() { if (_currentEditItem.value) { flex.value.columns.forEach((col) => { let input = flex.value.hostElement.querySelector("#" + col.binding); if (input) { let value = wjcCore.changeType(input.value, col.dataType, col.format); if (wjcCore.getType(value) == col.dataType) { _currentEditItem.value[col.binding] = value; } } }); } _currentEditItem.value = null; flex.value.invalidate(); } function _cancelEdit() { if (_currentEditItem.value) { _currentEditItem.value = null; flex.value.invalidate(); } } </script> <style> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 48px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid Inline Editing</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="compiler.js" type="module"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.js'); </script> </head> <body> <div id="app"> </div> </body> </html>
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: '../plugin-vue/index.js' } //'*.vue': { loader: 'systemjs-plugin-vue' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.vue2.chart.analytics": "npm:@mescius/wijmo.vue2.chart.analytics/index.js", "@mescius/wijmo.vue2.chart.animation": "npm:@mescius/wijmo.vue2.chart.animation/index.js", "@mescius/wijmo.vue2.chart.annotation": "npm:@mescius/wijmo.vue2.chart.annotation/index.js", "@mescius/wijmo.vue2.chart.finance.analytics": "npm:@mescius/wijmo.vue2.chart.finance.analytics/index.js", "@mescius/wijmo.vue2.chart.finance": "npm:@mescius/wijmo.vue2.chart.finance/index.js", "@mescius/wijmo.vue2.chart.hierarchical": "npm:@mescius/wijmo.vue2.chart.hierarchical/index.js", "@mescius/wijmo.vue2.chart.interaction": "npm:@mescius/wijmo.vue2.chart.interaction/index.js", "@mescius/wijmo.vue2.chart.radar": "npm:@mescius/wijmo.vue2.chart.radar/index.js", '@mescius/wijmo.vue2.chart.map': 'npm:@mescius/wijmo.vue2.chart.map/index.js', "@mescius/wijmo.vue2.chart": "npm:@mescius/wijmo.vue2.chart/index.js", "@mescius/wijmo.vue2.core": "npm:@mescius/wijmo.vue2.core/index.js", "@mescius/wijmo.vue2.gauge": "npm:@mescius/wijmo.vue2.gauge/index.js", "@mescius/wijmo.vue2.grid.detail": "npm:@mescius/wijmo.vue2.grid.detail/index.js", "@mescius/wijmo.vue2.grid.filter": "npm:@mescius/wijmo.vue2.grid.filter/index.js", "@mescius/wijmo.vue2.grid.grouppanel": "npm:@mescius/wijmo.vue2.grid.grouppanel/index.js", '@mescius/wijmo.vue2.grid.search': 'npm:@mescius/wijmo.vue2.grid.search/index.js', "@mescius/wijmo.vue2.grid.multirow": "npm:@mescius/wijmo.vue2.grid.multirow/index.js", "@mescius/wijmo.vue2.grid.sheet": "npm:@mescius/wijmo.vue2.grid.sheet/index.js", '@mescius/wijmo.vue2.grid.transposed': 'npm:@mescius/wijmo.vue2.grid.transposed/index.js', '@mescius/wijmo.vue2.grid.transposedmultirow': 'npm:@mescius/wijmo.vue2.grid.transposedmultirow/index.js', "@mescius/wijmo.vue2.grid": "npm:@mescius/wijmo.vue2.grid/index.js", "@mescius/wijmo.vue2.input": "npm:@mescius/wijmo.vue2.input/index.js", "@mescius/wijmo.vue2.olap": "npm:@mescius/wijmo.vue2.olap/index.js", "@mescius/wijmo.vue2.viewer": "npm:@mescius/wijmo.vue2.viewer/index.js", "@mescius/wijmo.vue2.nav": "npm:@mescius/wijmo.vue2.nav/index.js", "@mescius/wijmo.vue2.base": "npm:@mescius/wijmo.vue2.base/index.js", '@mescius/wijmo.vue2.barcode.common': 'npm:@mescius/wijmo.vue2.barcode.common/index.js', '@mescius/wijmo.vue2.barcode.composite': 'npm:@mescius/wijmo.vue2.barcode.composite/index.js', '@mescius/wijmo.vue2.barcode.specialized': 'npm:@mescius/wijmo.vue2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', //'systemjs-plugin-vue': 'npm:systemjs-plugin-vue/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);