use handsontable in hansontable

[tranvietha]

Dear all,

I found that, in handsontable, I can put another handsontable in cell of handsontable

https://docs.handsontable.com/0.24.1/demo-handsontable.html

I create handsontable look like demo above:

var $container = $("#example1grid");

$container.handsontable({ data: data, cells: function (row, col, prop) { var cellProperties = {};

    if (col == 2)
    {
        cellProperties.type = 'handsontable';
        manufacturerData = [
            {name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'},
            {name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'},
             {name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'},
            {name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'},
            {name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'},
            {name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}
        ];

        cellProperties.handsontable = {
             colHeaders: ['Marque', 'Country', 'Parent company'],
             data: manufacturerData,
              cells: function (row, col, prop) {
                     //alert(this.instance.getData()[row][col]);
                     return cellProperties;
              },
              afterSelection: function(r, c, r2, c2){
                     alert(this.getDataAtCell(r,c));
              }
        };
    }

    return cellProperties;
}

});

Now, when I select each cell in sub-handsontalbe, It will bind this value into cell of main-handsontable. However, I want to bind only value of column "Name" although I click on column "Country" or "Owner". Could I do it? If yes, how can I do it.

Thank all

[tranvietha]

I have solved my problem by using afterChange. If anyone also have same issue, pls try this code:

var valueSubTable = null; var rowChange = 0; var colChange = 0; var countCheck = 0;

$container.handsontable({ data: data, cells: function (row, col, prop) { var cellProperties = {};

if (col == 2)
{
    cellProperties.type = 'handsontable';
    manufacturerData = [
        {name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'},
        {name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'},
         {name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'},
        {name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'},
        {name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'},
        {name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}
    ];

    cellProperties.handsontable = {
         colHeaders: ['Marque', 'Country', 'Parent company'],
         data: manufacturerData,
          cells: function (row, col, prop) {
                 //alert(this.instance.getData()[row][col]);
                 return cellProperties;
          },
          afterChange: function(changes, source) {
        if (changes[0][0] == rowChange && changes[0][1] == colChange)
        {
            countCheck = countCheck + 1;
        }

        if (source == 'edit' && valueSubTable != null)
        {
            rowChange = changes[0][0];
                colChange = changes[0][1];

                if (countCheck == 0)
                   this.setDataAtCell(rowChange, colChange, valueSubTable);

            valueSubTable = null;
                countCheck = 0;
                            rowChange = 0;
                            colChange = 0;
        }
    },
          afterSelection: function(r, c, r2, c2){
                 valueSubTable = this.getDataAtCell(r,0);
          }
    };
}

return cellProperties;

} });

Thank all

[AMBudnik]

@tranvietha I'm closing this issue as is it solved but it's still visible in the browser to be checked by other users. Great you solved the case.