On Handsontable, if there is similar columns header, then the first columns cell value is auto copied to other similar cell

Question

Whenever I enter a value in the first cell, then the same value is auto copied to the same name header cell. How can we stop this? I tried to google this issue but didn't found any suitable solution.

Here is the code:

$.ajax({
    type: "POST",
    async: false,
    url: url,
    data: data,
    success: function (res)
    {
        grid = new Handsontable(container, {
            data: [],
            rowHeaders: true,
            autowidth: false,
            autoRowSize:true,
            maxRows: 100,
            minRows: 15,
            width: 'auto',
            height: 420,
            stretchH: 'all', //this is used to cover the full div
            overflow: 'hidden',

        colHeaders: res.data.header,
            columns: res.data.renderer,
            fillHandle: {
                autoInsertRow: false
            },
        minSpareRows: 1,               
        });        
    }
});

Update Here is the json used for creating headers and list

<iframe src="https://pastebin.com/embed_iframe/ind7Savd" style="border:none;width:100%"></iframe>

Lawabiding

Can you post the data response? – Earpiece

what if you change the header name? like multiline 1 and multiline 2 ! – Mideast

@AhmadHajjar its working fine if i change the header name. But it need to be same. – Lawabiding

@Earpiece There is no post response. Am getting this duplication on filling the sheet. – Lawabiding

@SudhanshuSaxena can you post res.data.header and res.data.renderer? – Earpiece

Headers can have a same name, I guess you have same data value in columns jsfiddle.net/fuobfe3L – Leavenworth

issue with your data or your having same data for those 2 columns.....try to provide your input data – Absurd

@Leavenworth Yeah...It need to be same...the real problem is both values will have to different from each. – Lawabiding

Could you please share the full script to better understand the problem? – Yeoman

SudhanshuSaxena I think what @Leavenworth conveyed is correct. If you think it is not correct then do post your sample data so that we get to know why his implementation is wrong. – Chairwoman

@Earpiece posted the json used – Lawabiding

the iframe returns an error: ERROR, PASTE ID IS INVALID, OR PASTE HAS BEEN REMOVED! please send the proper data... anyways, I think the problem is, that a javascript object can not contain the same key twice... so you need to do some kind of mapping to get it working... hard to tell without the data model though – Crackle

@Crackle thanks for your concern but now it's solved outside of stack overfly – Lawabiding

@SudhanshuSaxena please post here the answer for all community – Works

Answer 1

headers can contain duplicate same name column but because JSON object {} cannot contain duplicate keys we can assign data to different key and use it under same header name

var dataObject = [
  {
    id: 1,
    flag: 'EUR',
    currencyCode: 'EUR',
    currency: 'Euro',
    level: 0.9033,
    units: 'EUR / USD',
    asOf: '08/19/2019',
    date1: '01',
    date2: 'date01',
    onedChng: 0.0026
  },
  {
    id: 2,
    flag: 'JPY',
    currencyCode: 'JPY',
    currency: 'Japanese Yen',
    level: 124.3870,
    units: 'JPY / USD',
    asOf: '08/19/2019',
    date1: '02',
    date2: 'date02',
    onedChng: 0.0001
  },
  {
    id: 3,
    flag: 'GBP',
    currencyCode: 'GBP',
    currency: 'Pound Sterling',
    level: 0.6396,
    units: 'GBP / USD',
    asOf: '08/19/2019',
    date1: '03',
    date2: 'date03',
    onedChng: 0.00
  },
  {
    id: 4,
    flag: 'CHF',
    currencyCode: 'CHF',
    currency: 'Swiss Franc',
    level: 0.9775,
    units: 'CHF / USD',
    asOf: '08/19/2019',
    date1: '04',
    date2: 'date04',
    onedChng: 0.0008
  },
  {
    id: 5,
    flag: 'CAD',
    currencyCode: 'CAD',
    currency: 'Canadian Dollar',
    level: 1.3097,
    units: 'CAD / USD',
    asOf: '08/19/2019',
    date1: '05',
    date2: 'date05',
    onedChng: -0.0005
  },
  {
    id: 6,
    flag: 'AUD',
    currencyCode: 'AUD',
    currency: 'Australian Dollar',
    level: 1.3589,
    units: 'AUD / USD',
    asOf: '08/19/2019',
    date1: '05',
    date2: 'date05',
    onedChng: 0.0020
  },
  {
    id: 7,
    flag: 'NZD',
    currencyCode: 'NZD',
    currency: 'New Zealand Dollar',
    level: 1.5218,
    units: 'NZD / USD',
    asOf: '08/19/2019',
    date1: '06',
    date2: 'date06',
    onedChng: -0.0036
  },
  {
    id: 8,
    flag: 'SEK',
    currencyCode: 'SEK',
    currency: 'Swedish Krona',
    level: 8.5280,
    units: 'SEK / USD',
    asOf: '08/19/2019',
    date1: '07',
    date2: 'date07',
    onedChng: 0.0016
  },
  {
    id: 9,
    flag: 'NOK',
    currencyCode: 'NOK',
    currency: 'Norwegian Krone',
    level: 8.2433,
    units: 'NOK / USD',
    asOf: '08/19/2019',
    date1: '08',
    date2: 'date08',
    onedChng: 0.0008
  },
  {
    id: 10,
    flag: 'BRL',
    currencyCode: 'BRL',
    currency: 'Brazilian Real',
    level: 3.4806,
    units: 'BRL / USD',
    asOf: '08/19/2019',
    date1: '09',
    date2: 'date09',
    onedChng: -0.0009
  },
  {
    id: 11,
    flag: 'CNY',
    currencyCode: 'CNY',
    currency: 'Chinese Yuan',
    level: 6.3961,
    units: 'CNY / USD',
    asOf: '08/19/2019',
    date1: '10',
    date2: 'date10',
    onedChng: 0.0004
  },
  {
    id: 12,
    flag: 'RUB',
    currencyCode: 'RUB',
    currency: 'Russian Rouble',
    level: 65.5980,
    units: 'RUB / USD',
    asOf: '08/19/2019',
    date1: '11',
    date2: 'date11',
    onedChng: 0.0059
  },
];
var currencyCodes = ['EUR', 'JPY', 'GBP', 'CHF', 'CAD', 'AUD', 'NZD', 'SEK', 'NOK', 'BRL', 'CNY', 'RUB', 'INR', 'TRY', 'THB', 'IDR', 'MYR', 'MXN', 'ARS', 'DKK', 'ILS', 'PHP'];
var flagRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  var currencyCode = value;
  while (td.firstChild) {
    td.removeChild(td.firstChild);
  }
  if (currencyCodes.indexOf(currencyCode) > -1) {
    var flagElement = document.createElement('DIV');
    flagElement.className = 'flag ' + currencyCode.toLowerCase();
    td.appendChild(flagElement);
  } else {
    var textNode = document.createTextNode(value === null ? '' : value);

    td.appendChild(textNode);
  }
};
var hotElement = document.querySelector('#hot');
var hotElementContainer = hotElement.parentNode;
var hotSettings = {
  data: dataObject,
  columns: [
    {
      data: 'id',
      type: 'numeric',
      width: 40
    },
    {
      data: 'flag',
            renderer: flagRenderer
    },
    {
      data: 'currencyCode',
      type: 'text'
    },
    {
      data: 'currency',
      type: 'text'
    },
    {
      data: 'level',
      type: 'numeric',
      numericFormat: {
        pattern: '0.0000'
      }
    },
    {
      data: 'units',
      type: 'text'
    },
    {
      data: 'asOf',
      type: 'date',
      dateFormat: 'MM/DD/YYYY'
    },
    {
      data: 'date1',
      type: 'text',
    },
    {
      data: 'date2',
      type: 'text',
    },
    {
      data: 'onedChng',
      type: 'numeric',
      numericFormat: {
        pattern: '0.00%'
      }
    }
  ],
  stretchH: 'all',
  width: 805,
  autoWrapRow: true,
  height: 487,
  maxRows: 22,
  rowHeaders: true,
  colHeaders: [
    'ID',
    'Country',
    'Code',
    'Currency',
    'Level',
    'Units',
    'Date',
    'Date',
    'Date',
    'Change'
  ],
  columnSorting: {
    indicator: true
  },
  autoColumnSize: {
    samplingRatio: 23
  },
  language: 'en-US'
};
var hot = new Handsontable(hotElement, hotSettings);

Chancechancel