Populate mobile datatable dropdown with JS

Forms SharePoint Online
1

Hi,

I am trying to populate a datatable dropdown with a variation of the below code that works on desktop.

fd.spRendered(function() {
    fd.control('DataTable1').$on('edit', function(e) {
        if (e.column.field === 'Category') {
            //pass widget + current Category value
            populateCategories(e.widget, e.model.Category);
        }
    })

});

function populateCategories(widget, value) {
    //will show as loading
    widget._showBusy();

    sp.web.lists.getByTitle('Categories').items
        .select('ID', 'Title')
        .get()
        .then(function(items) {
            //set options
            widget.setDataSource({
                data: items.map(function(i) { return i.Title })
            });

            //set value if one was select
            widget.value(value);
            //hide loading state
            widget._hideBusy();
        });
}

But, the dropdown doesnt update on mobile as seen below.

image

The error I recieve in the console is below.

image

Could you please provide code to populate the datatable dropdown on Mobile?

Thanks.

2

Dear @MattG,
Thank you for bringing this up to our attention - we've updated Data Table functionality, but didn't update the example in the documentation. We'll do it promptly, you can use the following code to work for both PC and mobile devices:

fd.control('DataTable1').$on('edit', function(e) {
        const populateDropDown = widget => widget.setDataSource({
            data: ['Apple', 'Banana', 'Pear']
        })

        const editMode = e.sender.getOptions().editable.mode;
        if (editMode === 'popup') {
            const dropDown = e.container.find("input[name=Column1]").data("kendoDropDownList");
            populateDropDown(dropDown);
        } else {
            if (e.column.field === 'Column1') {
                populateDropDown(e.widget);
            }
        }
    })