How to Ignore Blank Rows With Get Source Data

Tags: #<Tag:0x00007f51b8dd5750> #<Tag:0x00007f51b8dd5520>
#1

I’m trying to retrieve the data from the Handsontable using the “GetSourceData” function so I can save the results in the database. However, when I do so, the results include blank/null rows that were not filled out. How do I ignore those.

For example, if I have basic struture as shown below which defaults to 5 rows and the user only fills out row 1, how do I ignore the remaining rows when using the GetDataSource function? Or, should I pull the data a different way.

        const vHOT = new Handsontable(DivContainer, {
            rowHeaders: true,
            colHeaders: true,
            startCols: 6,
            startRows: 5,
            minRows: 5,
            minSpareRows: 1,
            height: 'auto',
            licenseKey: 'non-commercial-and-evaluation'
        });
#2

Hi @ptownbro

If the user is only filling the first row maybe it would be better to just execute the instance.getSourceDataAtRow(0). Reference: https://handsontable.com/docs/javascript-data-grid/api/core/#getsourcedataatrow

If, however, they can put data to any other rows as well I recommend checking the afterChange hook. It will point out indexes of the changes rows. Based on that you can execute the getSourceDataAtRow() separately for those two rows.

If you are looking for something else, please specify what action on the table is made and what would be the expected outcome.

#3

They can input in any number of rows - not just the first row. I just want to ignore rows that have not been used. Given your response, I’ll try the afterChange and getSourceDataAtRow for each row that has changed. Thanks. You can close this topic.

1 Like
#4

Handsontable works off of indexes so blank rows are necessary to maintain the correct order. You can loop through the data and look for blank rows when saving but you will need to assign the rowIndex to your data. When you pull data from the database you will need to recreate the blank rows. You can use https://handsontable.com/docs/javascript-data-grid/api/core/#isemptyrow to check if row is empty. Also, you can can use the following to create empty rows:

function mockNode(obj) {
  const fakeNode = {};

  for (let key of Object.keys(obj)) {
  	fakeNode[key] = null;
  }

  return fakeNode;
}
#5

Thank you for your input, @timeflys54321

@ptownbro please feel free to open a new thread when needed.

#6