Articles in this section
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

Multiplication Table implementation in DataGrid

Demo https://stackblitz.com/edit/multiplicationtable?file=index.js

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied