Dynamically Populate Dropdown Options for a DataTable Column in Popup Editor?

Forms Public Forms
1

Hello. I am trying to dynamically populate dropdown column options in a data table in Public Web Forms.

I have followed the guidance in your documentation here: DataTable — Public web forms

function populateColumn(widget, value) {
    widget.setDataSource({
        data: ['Category A', 'Category B', 'Category C']
    });
    //set value if one was select
    widget.value(value);
}

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

This code works great when in desktop mode. However, on mobile, it fails when editing a record in the popup editor.

The problem is that the object 'e' passed in the 'onEdit' action in the popup editor does not contain either the 'column' or 'widget' properties. There is a 'model' property holding the data, and a 'container' property that seems like a complicated kendoUI thing. I have tried spelunking in this, but have not been able to work out a solution on my own.

Is there a way to target the widget and set options for a particular field when in the popup editor? Or can you suggest another way to accomplish this?

Thanks in advance!

2

Wanted to add:

Even if configuring the grid 'editable' property to 'incell' instead of 'popup', this code still doesn't work on mobile. Editing occurs within the table rather than the popup, but the object passed to the 'edit' event is still missing the 'column' and 'widget' properties.

Disabling popup editing is undesirable on a mobile browser, so this would not be the best solution in any case, but I thought I'd mention that I investigated this option.

3

Hello @chs-web,

You can use the below code. It works in inline and in popup.

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);
            }
        }
    })
4

Thank you, Margarita, this worked perfectly. You guys are the best!

1 Like
5

Edit: Solved, I figured this out right after posting.

From the documentation for the Dropdown field, it appears that this contol is based on the Kendo UI ComboBox when the 'allow user value' option is set. So the following modification works fine:

const dropDown = e.container.find("input[name=Column1]").data("kendoComboBox");

Hi. Circling back on this because it appears this code is no longer working in popup mode for Datatable dropdown columns when the 'Allow user value' property is true. If this option is set, the following code returns a null value:

const dropDown = e.container.find("input[name=Column1]").data("kendoDropDownList");

Is there a modification that will enable this to work?

Thank you!