This post shows how to bind to the Grid Web Component events. The code below initializes the Grid instance and binds to the 'click' event. Within the event handler, we can get details about which part of the Grid was clicked - Cell, Row or Column. This is achieved by utilizing the 'event.path' array. It is also important to note that each Data Grid Column has 'data-field' attribute and each Row has 'data-id' attribute. The data source, which is used in the example is available in the 'data.js' file from the download package.

 Smart('#grid', class {
      get properties() {
           return {
                dataSource: new Smart.DataAdapter(
                {
                     dataSource: getCountriesData(),
                     dataFields:
                     [
                          'ID: number',
                          'Country: string',
                          'Area: number',
                          'Population_Urban: number',
                          'Population_Rural: number',
                          'Population_Total: number',
                          'GDP_Agriculture: number',
                          'GDP_Industry: number',
                          'GDP_Services: number',
                          'GDP_Total: number'
                     ]
                }),
                columns: [
                     'Country',
                     'Area',
                     'Population_Rural',
                     'Population_Total',
                     'GDP_Total'
                ]
           }
      }
 });
 window.onload = function() {
  grid.addEventListener('click', function(event){
     const path = event.path;
     let cell = null;
     let row = null;
     let column = null;
     for(let i = 0; i < path.length; i++) {
       const node = path[i];
       if (node.nodeName === 'SMART-GRID-CELL') {
         cell = node;
       }
       if (node.nodeName === 'SMART-GRID-ROW') {
         row = node;
       }
       if (node.nodeName === 'SMART-GRID-COLUMN')      {
         column = node;
       }
     }
     if (row) {
       alert(row.getAttribute('data-id'));
     }
     if (column) {
       alert(column.getAttribute('data-field'));
     }
     if (cell) {
       alert(cell.innerText);
     }
  });
 }