[REACT] Conditionally Combo Input Store Items

[tjmeal]

Dear all,

I would like to create a combo input > which will show 2 different store data based on some other column's value.

Please see the video i have attached here for better understanding.

listA = [1, 2, 3,4]
listB = [5,6,7,8]

Column A and Column B >

If column A has value 1 > Column B should show listA
if column A has value 2 > Column B should show listB

How can i achieve such behaviour ?

Thanks a lot in advance.

[marcio]

Hey tjmeal,

Thanks for reaching out.

To achieve this behavior, you can use the startCellEdit event of the grid to dynamically change the store of the Combo based on the value of another column. Here's a basic example of how you can implement this:

const listA = [1, 2, 3, 4];
const listB = [5, 6, 7, 8];

const grid = new Grid({
    columns: [
        { text: 'Column A', field: 'columnA' },
        { 
            text: 'Column B', 
            field: 'columnB', 
            editor: {
                type: 'combo',
                store: new Store({ data: listA }) // Default store
            }
        }
    ],
    listeners: {
        startCellEdit({ editorContext }) {
            const { record, editor } = editorContext;
            const columnAValue = record.columnA;

            if (columnAValue === 1) {
                editor.inputField.store.data = listA;
            } else if (columnAValue === 2) {
                editor.inputField.store.data = listB;
            }
        }
    }
});

This code sets up a grid with two columns, and when editing starts in Column B, it checks the value of Column A and updates the Combo's store accordingly.

You can see a live example here https://codepen.io/marciogurka/pen/vEERerz.