Category / Section
How to display the multiplication table of a number accepted from the user
1 min read
You can implement a multiplication table in the DataGrid by defining the expression column which can be achieved by using the valueAccessor property.
This is explained in the following sample code in which we have defined three columns, one normal column for multiplicand and two valueAccessor columns for multiplier and product. The multiplier is obtained from the user input. While clicking the “execute” button the DataGrid will be refreshed to show the multiplication table based on the user input.
JS
var grid = new ej.grids.Grid({ dataSource: mdata, width: 400, columns: [ { field: 'multiplicand', headerText: 'Multiplicand', width: 100, textAlign: 'Right' }, { headerText: 'Multiplier', valueAccessor: setMultiplier, textAlign: 'Right', width: 100 }, { headerText: 'Product', valueAccessor: findProduct, width: 100, textAlign: 'Right' } ] }); grid.appendTo('#Grid'); function setMultiplier(field, data, column) { return multiplier; } function findProduct(field, data, column) { return data.multiplicand * multiplier; }; document.getElementById("execute").addEventListener("click", () => { multiplier = parseInt(document.getElementById('multiplier').value, 10); grid.refresh(); });
Output
Demo https://stackblitz.com/edit/multiplicationtable?file=index.js