Category / Section
How to display the multiplication table of a number accepted from the user
1 min read
This article explains how to display the multiplication table of a number accepted from the user.
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 the multiplicand and two valueAccessor columns for the 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
Refer to the working sample for additional details and implementation: Sample
