Different dropdown values based on another cell

Getting help Issues
1

I could not find a solution for this. I have table with four rows and each row should display different dropdown depending another cell. For example If cell data is A I need to set data in another cell from getting source
source: this.drpdwnData.filter(x => x[‘dropdown’] == ‘A’)[0][‘val’].split(’,’)
If cell data is B then I need to get source :source: this.drpdwnData.filter(x => x[‘dropdown’] == ‘B’)[0][‘val’].split(’,’)

Please help me to achieve this

2

More details:
Currently cell renders the data like this. But my requirement is If cell value is A source will be like as shown in below. If cell value is B then source will be B.
{data: ‘VPAfter’, width: ‘75px’, source: this.drpdwnData.filter(x => x[‘dropdown’] == ‘A’)[0][‘val’].split(’,’), renderer: this.selectBoxRenderer, editor: false, type: ‘dropdown’},

selectBoxRenderer = function (instance, td, row, col, prop, value, cellProperties) {

    var param = false;;
    if (td.innerHTML === undefined || td.innerHTML === null || td.innerHTML === "") {
        param = true;
    }

    var flag = cellProperties.readOnly;
    if (flag) {
        td.innerHTML = '';
        $(td).addClass('htDimmed');
        return td;
    } else {

        $(td).css({
            overflow: 'visible'
        });
        var selectbox = "<select id='" + col + "multi-select" + instance.container.parentElement.id + "-" + row + "' class='multi-select' multiple='multiple' >";
        var options = '';
        var possibleVals = cellProperties.source;
        var currentVals;
                    
        if (value == null)
            currentVals = [];
        else
            currentVals = value.split(';');
        for (var x = 0; x < possibleVals.length; x++) {
            if (currentVals.indexOf(possibleVals[x]) != -1)
                options = options + "<option value = '" + possibleVals[x] + "' selected> " + possibleVals[x] + " </option>"
            else
                options = options + "<option value = '" + possibleVals[x] + "'> " + possibleVals[x] + " </option>"
        }
        selectbox = selectbox + options + '</select>';
                    
        td.innerHTML = selectbox;
        //if ($('#'+col + 'multi-select' + instance.container.parentElement.id + '-' + row).parent().parent().click == null)
        selectChange(col + 'multi-select' + instance.container.parentElement.id + '-' + row, instance, row, col, param);
        //alert(instance);
        return td;
    }
};
3

Hi @madanmame

we describe the same topic on our blog https://handsontable.com/blog/articles/2016/4/expand-your-app-with-cell-dependencies There’s also an example with dropdown https://jsfiddle.net/handsoncode/e5tn7ogL/1/

4

Hi @madanmame

How’s the progress on your cell dependencies task?