How can I implement a dependent drop down menu in an uitable?

Hello together,

I want to create an app with a uitable inside. The table has two drop down columns where the user should be able to choose a main category in column 1 and a subcategory in column 2. The subcategory is depending on the selection in column 1, i.e. if the user change a cell in column 1 the drop down list in the neighbour cell in column 2 has to adapt. I couldn't figure out how to change the dropdown list in single cell of a table or how to do a workaround for this problem. I am confident that there must be a solution as I can even create this behaviour of dependent drop down menues in excel.

Here is a little example, if needed I can provide more code from the app.

Thanks a lot. Regards

Tilo

MainCat = {'A1' 'A2'};
A1_Cat = {'A1_1' 'A1_2' 'A1_3'};
A2_Cat = {'A2_1' 'A2_2' 'A2_3' 'A2_4'};

col1 = categorical({'';'';''},MainCat);
col2 = {'';'';''};        % categories will be created when there is a selection in col1

tab = table(col1,col2);
uitab = uitable(uf,'Data',tab,'ColumnEditable',true);

function DataTableDisplayDataChanged(app, event)
    % code here:
    % 1) choose A1_cat or A2_cat depending on the selection in the cell of column 1
    % 2) Implement a drop down option in the neighbour cell in column 2 with the correct subcategory
end

Answer 1

[Kanishk]

Hi @till21

You can create a "uitable" with a column depending on another in MATLAB App designer by leveraging the "CellEditCallback" to dynamically update the options in the second dropdown based on the selection in the first. To create dropdowns in columns, we can use categorical values in table and use the callback to modify the second column. I configured the table with values in the 'startup' function and added the callback.

function startupFcn(app)
    MainCat = categorical({'A1', 'A2'});
    A1_Cat = categorical({'A1_1', 'A1_2', 'A1_3'});
    A2_Cat = categorical({'A2_1', 'A2_2', 'A2_3', 'A2_4'});
    app.subcatMap = containers.Map;
    app.subcatMap('A1') = A1_Cat;
    app.subcatMap('A2') = A2_Cat;

    tData = table(repmat({MainCat(1)}, 5,1), repmat({A1_Cat(1)},5,1), 'VariableNames', {'MainCat', 'SecCat'});
    app.UITable = uitable(app.GridLayout, "Data", tData, 'ColumnEditable', true);
    app.UITable.Layout.Row = 1;
    app.UITable.Layout.Column = 1;

    app.UITable.RowName = {};
    app.UITable.Position = [132 139 302 185];
    
        
    % Assign the callback to the UITable
    app.UITable.CellEditCallback = @(src, event) UITableCellEdit(app, event);
end

In the callback function, identify the row which has been modified and update the values of second column.

function UITableCellEdit(app, event)
    indices = event.Indices;
    if indices(2) == 1
        selectedCategory = event.NewData;
        subcategories = app.subcatMap(string(selectedCategory));
        
        app.UITable.Data.SecCat{indices(1)} = subcategories(1);
    end

end

I am also attaching the app with the answer for better assistance.

You can learn more about 'categorical' values and 'CellEditCallback' using the following commands to access MATLAB documentations.

web(fullfile(docroot, 'matlab/ref/categorical.html'))
web(fullfile(docroot, 'matlab/ref/uitable.html#br5rl9k_sep_bvboy7l-1-CellEditCallback'))