Dynamic Combo Boxes in a Datasheet

Webix JS
1

Hi there,

My issue is that after I populate an options value on a column of a datasheet I can no longer change the options based on other things going on. I have got the values to change by changing the options value of the column, but it creates major glitches with the UI.

                    on:{
                        'onChange': function() {
                            var columns = webix.toArray($$('timesheet_datatable').config.columns);
                            var activities_column = columns[1];

                            activities_column.options = [1,2,3];
                        }
2

Basically I need to pickup the options in real-time / dynamically.

3

Hi,

The best way is to use the onAfterEditStart() event and filter column options depending on any criteria (for example, the id of the data item):

http://webix.com/snippet/7877dee2

4

Thanks, appreciated.

5

Still can’t get this to work correctly, we really need to dynamically change the options on the popup based on the change of the job number. Attached is the whole code.

You will notice that it works well, but the issue is when you select an activity after selecting a job number it just blanks out for some reason.

function test(){ window.alert('Button was clicked.') } 
        function test_2(){
            window.alert('Combo event.')
        }

        var employees = [
            {id: 1, value: 'Dan Forsyth', employee_id: 100, union: 'Union 1'},
            {id: 2, value: 'Dave Forsyth', employee_id: 101, union: 'Union 2'},
            {id: 3, value: 'Blair Mullin', employee_id: 102, union: 'Union 3'}];

        var global_activity_codes = [
            {id: 1, value: 'Global 1'},
            {id: 2, value: 'Global 2'},
            {id: 3, value: 'Global 3'}
        ];

        var job_numbers = [
            {id: 1, value: '1000', activity_codes: [{id: '1000-1'}, {id: '1000-2'}, {id: '1000-3'}]},
            {id: 2, value: '2000', activity_codes: [{id: '2000-1'}, {id: '2000-2'}, {id: '2000-3'}]},
            {id: 3, value: '3000', activity_codes: [{id: '3000-1'}, {id: '3000-2'}, {id: '3000-3'}]}
        ];

        var activities = [
            {id: 1, value: 'Activity 1', job_number: 1},
            {id: 2, value: 'Activity 2', job_number: 2}
        ];

        function test_3(){
            return [Math.floor(Math.random() * 6) + 1]
        }

        var grid = webix.ui({
            rows: [
                {
                    view: "template",
                    type: "header", template: "Timesheet Entry"
                },
                {
                    view: 'datepicker',
                    date: new Date(),
                    label: 'Date',
                    timepicker: true,
                    value: new Date()
                },
                {
                    id: 'job_number',
                    view: 'combo',
                    placeholder: 'Job Number',
                    options: job_numbers,
                    value: '1000',
                    on:{
                        'onChange': function() {
                            var columns = webix.toArray($$('timesheet_datatable').config.columns);
                            var activities_column = columns[1];

                            activities_column.options =
                                    [
                                        {id: 3, value: 'three'},
                                        {id: 4, value: 'four'}
                                    ];

                            $$('timesheet_datatable').refreshColumns();
                        }
                    }
                },
                {
                    id: 'timesheet_datatable',
                    view: "datatable",
                    editable: true,
                    select: 'cell',
                    rules: {
                        'employee': webix.rules.isNotEmpty,
                        'activity': webix.rules.isNotEmpty,
                        'hours': function(hours) {
                            return hours > 0
                        }
                    },
                    on: {
                        'onAfterEditStop': function() {
                            var current_cell_id = this.getSelectedId();
                            var current_row = this.getItem(current_cell_id);

                            var current_employee_id = current_row['employee'];

                            if (current_employee_id == ''){
                                return 0
                            }

                            var current_employee = employees.find(function (x) {
                                return x.id == current_employee_id;
                            });

                            current_row['union'] = current_employee['union'];
                        }
                    },
                    columns: [
                        {
                            id: 'employee',
                            width: 300,
                            editor: 'combo',
                            options: employees
                        },
                        {id: 'activity', editor: 'combo', options: activities},
                        {id: 'union'},
                        {id: 'hours', editor:'text'}
                    ],
                    data: [
                        {id: 'row1', employee: '', activity: '', union: '', hours:0}
                    ]
                },
                {
                    id: 'add_button',
                    view: 'button',
                    value: 'Add',
                    click: function() {
                        var data_table = $$('timesheet_datatable');
                        data_table.add({
                            id: 0,
                            employee: '',
                            activity: '',
                            union: '',
                            hours: 0
                        })
                    }
                },
                {
                    id: 'submit_button',
                    view: 'button',
                    value: 'Submit'
                }
            ]
        });

        var submit_button = $$('submit_button');
        submit_button.attachEvent('onItemClick', test);
    </script>
</body>
6

Hmm, I think I should be using a Datacollection, and syncing.