No Data displayed after column formating

Tags: #<Tag:0x00007f8b26714ab8>
#1

Hi there

I use a array as data source and everything works fine until i try to format the columns with:

,colHeaders: [“ID”, “NAME”, “DESCRIPTION”, “KATEGORIE”],
columns: [
{ type: ‘numeric’, readOnly: true},
{ type: ‘text’, readOnly: false},
{ type: ‘text’, readOnly: false},
{
type: ‘dropdown’,
source: [‘POI’, ‘SNAPSHOT’, ‘Verified Store’, ‘Kids’, ‘Adult’]
}
],

After that, no data is displayed anymore and the array is empty.

I know, i know, but two questions more:
1:
hiddenColumns: {
rows: [1],
indicators: false
},

Has no effect. Why?
2: Is there a way to seperate the internal value and the diplayed text in a dropdown?
A while ago you publish that fiddle http://jsfiddle.net/handsoncode/ed5hbL8L/ but its not working anymore. Is there a more elegant way inside handsontable?

Thx a bunch in advance

#2

Hi @dev3

If you use object data then you need to add ‘data’ parameter to your columns.

  1. Example without data https://jsfiddle.net/handsoncode/a16Lemq4/1/
  2. Example with data https://jsfiddle.net/handsoncode/a16Lemq4/2/

And hiddenColumns has to use columns, not rows

hiddenColumns: {
columns: [1],
indicators: false
},

Updated example https://jsfiddle.net/handsoncode/fhrco3qa/

#3

Aleksandra, you are fantastic!

Thx a lot

PS : Is it possible to seperate data and displayed text in a dropdown similar to html?

Something like

<select name="cars" id="cars">
  <option value="volvo">Volvo Car</option>
  <option value="saab">Saab is dead</option>
  <option value="mercedes">Mercedes Benz</option>
</select>

possible?

#4

Where do you plan to add that dropdown (a cell; a header; in a menu), @dev3 ?

#5

In all the cells of a specific column.

I’m working with data from a GeoJSON with points which contains numbers that stands for category names, example:
10 = POI
20 = SNAPSHOT and so on.
I build a data array for handontable while these points are added to the leaflet map as markers.
I use the handsontable spreadsheet to edit the feature properties of these points.
Because i control leaflet out of handsontable (and vice versa) i want to keep the data coherent and so the easiest way is to display the category names in the spreadsheet without change the data of the array. Sorry for writing a little bit confuse…

#6

The basic dropdown cell type has to have an array of strings or numbers as the source value. However, you convert it. Do you get that data as HTML or maybe JSON?

#7

I get the data as a JSON and i build a array for the handsontable within a leaflet function (onEachFeature) like :

tableEditArray = [];
            var Tabellen_Layer = L.geoJson(POIdata2edit, {
                onEachFeature: function (feature, layer) {
                    tableEditArray.push(feature.properties);
                }
            })

For a new entry:
var neuer_eintrag = {
location_id: newID,
location_name: ‘Name’,
location_desc: ‘Beschreibung’,
_location_type_id: 10
};
tableEditArray.push(neuer_eintrag);

Is there is a possibility to build that array with two entries for the dropdown, the displayed data and the internal data? That would be also perfect for multi language support.

#8

More questions:
Is it possible to highlight the whole row after a search function and not just the first cell?
Is it possible to search within a hidden column and then highlite the row?

#9

We do not support a key-value dropdown yet. But I have an example that can help you to build one https://jsfiddle.net/handsoncode/f0b41jug/
You’d just need to adjust the logic to use your JSON as a source.

Answering further questions.

Ad.2.
Is it possible to highlight the whole row after a search function and not just the first cell?
The background is added via className. If you add it (for example via setCellMeta() method) you are able to highlight any cell.

Ad.3.
Is it possible to search within a hidden column and then highlite the row?
The search result also includes hidden data so the answer is ‘yes’. Here https://jsfiddle.net/handsoncode/Lpsrejuf/ is a demo that you can use to adjust this functionality. The 2018 value is hidden in the 2nd column and 2nd row. If you type it to the search whole 2nd row becomes yellow.

#10

Thank you very much!

The suggested key-value solution is not very elegant compared to the rest of the lib. I wait for a release to come with a more elegant way…

Ad2 + Ad3:
In your fiddle if you search for more than one query, all the rows stay highlited.
Is there a elegant way to un-highlite the cells before the search to ‘erease’ the old results?

#11

A highlight is a className with a colorful background. To remove the highlight you need to remove the className. It can be done by calling setCellMeta(row_index, column_index, 'className', null) like here https://jsfiddle.net/handsoncode/nc3s5kt1/

#12