Populating dropdown column in a datatable

Hi All,

I must be missing something as I am struggling to get a dropdown option to work in a datatable.

I have added a default datatable to a form and added a second column, I have kept the default names, DataTable1, Column1 and Column2.

I have pasted the code below into the Javascript Editor.

fd.rendered(function() {
    fd.control('DataTable1').$on('edit', function(e) {
        console.log(e)
        if (e.column.field === "Column1") {
            //pass widget + current column value
            console.log(e.model);
            populateColumn(e.widget, e.model.Column1);
        }
    })

});

function populateColumn(widget, value) {

    widget.setDataSource({
        data: ['Category A', 'Category B', 'Category C']
    });

    //set value if one was select
    widget.value(value);
}

Saved the form, refreshed the preview but the form never shows the dropdown options in Column1 as per example, Work with Data Table using JS on Plumsail Forms (public forms) — Public web forms.

Please could you advise as to what I'm doing wrong?

Regards

Mark

Hello @mloveridge,

The code is correct and should work.

Is that a complete code you are using? Are you getting any errors in the browser console(F12)?

Could you please share export the form so I could check it on my side.

Hi @mnikitina

It is the only code I have on the form, I have created another test form in the desktop designer with just the elements required. F12 returns the following error.

TypeError: Cannot read property 'setDataSource' of null
at populateColumn (eval at e._executeCustomJavaScript (app.js:39), <anonymous>:70:12)
at a.eval (eval at e._executeCustomJavaScript (app.js:39), <anonymous>:62:13)
at Ve (app.js:55)
at a.e.$emit (app.js:55)
at init.edit (25.8667d8c7839be2100ada.js:1)
at init.trigger (1.ac4c27de03b159676c40.js:1)
at init.editCell (25.8667d8c7839be2100ada.js:1)
at init._editModel (25.8667d8c7839be2100ada.js:1)
at init.addRow (25.8667d8c7839be2100ada.js:1)
at HTMLAnchorElement.<anonymous> (25.8667d8c7839be2100ada.js:1)

Please see exported file.

DataTableTest.xfds (4.4 KB)

Regards

Mark

Hello @mloveridge,

Thank you for the exported form.

You need to change the column type to Dropdown to be able to populate column options.
image

Hi @mnikitina

Doh! Sorry such a silly oversight...

At this time I guess the dropdown entries have to be defined in the javascript and can not be dynamically pulled from a Excel document like a standard dropdown element?

Regards

Mark

1 Like

Hello @mloveridge,

In Web designer, Excel file uploaded to OneDrive can be used as a source Drop Down, Single Choice (radio buttons), and Multiple Choice (checkboxes) fields.

You can find more information in our blog post:

Hi @mnikitina

I am using the method that is documented on other elements on the form but I was referring to dropdown menu's in a datatable specifically as data source is not an option that I can see. You can add a static list or use javascript as long as you remember to change the type to dropdown, a little prod a myself!?

Regards

Mark

Hello @mloveridge,

Yes, there is currently no data source selection available for a dropdown column in the DataTable control.

Would you consider a paid support for adding this feature? Please contact us via [email protected] for more information.