...
|
Figure 2: Enable handsontable instance
...
| Code Block |
|---|
<script>
$(function(){
var orig_pool = []; // we will keep a copy of "removed" element for restoring later
var hot = FormUtil.getField("field1").data("hot");
source = hot.getSettings()['columns'][1]['source']; // we get all the dropdown option from column #1 of the table ("Continent"), call it "source"
// p.s, column count starts from 0. so column #1 = second column
hot.addHook('afterChange', function(change,type){ // set a hook / event listener to trigger after any change on the table
if(type == 'edit'){ // if the change type is of type "edit", we proceed
data = { // prepare the data object
source : source,
change : change,
orig_pool : orig_pool
}
if(change[0][3] != ''){ removeSource(data); } // if the changed value is not empty, we remove the data from the "source"
else{ addSource(data); } // otherwise, the change value is empty, meaning it is removed from the table
// we need to add it back to the "source"
}
})
})
function removeSource(data){
slice_index = data.source.indexOf(data.change[0][3]); // find the index of the continent in the "source" array
data.orig_pool.push(data.source.slice(slice_index,slice_index + 1)); // copy this value to our "original pool" of country
// for use later in addSource()
data.source.splice(data.source.indexOf(data.change[0][3]),1); // splice the value out from "source" array
}
function addSource(data){
data.orig_pool.splice(data.source.indexOf(data.change[0][2]),1) // splice the value out from "original pool" array
if(data.change[0][2] != ''){ // if the initial value of the cell is not empty,
data.source.push(data.change[0][2]); // we add the value back to "source" array
data.source.sort(); // sort the source array so it looks nice.
}
}
</script> |
Figure 3 : Add a Javascript in the Custom HTML - Properties - Configure Custom HTML
...
The value under the " Continent" table will only show the value that has not been selected by user. Hence, the selected value from the prior row will be hidden for the next row selection. ( Figure 4)
Figure 4 : Expected Outcome
...