Create a dynamic select control on childgrid

[rhemasystems]

I have been able to create an input control on a child grid tool bar as below , how can I create a select dropdown control as well and populate with data from a service.
Please can someone assist me

[rhemasystems]

I would really appreciate any form of assistance
Thank you

[rhemasystems]

Any help from anyone please?

[wezmag]

In your LineItemListEditor.ts file, add below code.

I used existing Language module as an example.

private languageSelect: JQuery;

constructor(container: JQuery) {
    super(container);

    LanguageService.List({}, (response) => {
        this.languageSelect = $("<select></select>");
        this.languageSelect.append("<option></option>"); //for placeholder
        for (const item of response.Entities) {
            this.languageSelect.append(format("<option value='{0}'>{1}</option>", item.Id.toString(), item.LanguageName));
        }
        this.toolbar.element.append(this.languageSelect);
        this.languageSelect.select2(<any>{
            allowClear: true,
            placeholder: 'Please select a Language'
        });
    });
}

You can also use getLookupAsync

LanguageRow.getLookupAsync().then((lookup) => {
    this.languageSelect = $("<select></select>");
    this.languageSelect.append("<option></option>");
    for (let item of lookup.items) {
        this.languageSelect.append(format("<option value='{0}'>{1}</option>", item.Id.toString(), item.LanguageName));
    }
    this.toolbar.element.append(this.languageSelect);
    this.languageSelect.select2(<any>{
        allowClear: true,
        placeholder: 'Please select a Language'
    });
});

To get selected value

this.languageSelect.select2('val');

To get selected data (both value and text)

this.languageSelect.select2('data');

For other select2 usage, please visit https://select2.github.io/select2/

[wezmag]

You may also use Widget.create.

private languageSelect: LookupEditor;
private languageSelect2: Select2Editor<any, any>;

constructor(container: JQuery) {
    super(container);

    this.languageSelect = Widget.create({
        type: LookupEditor,
        options: {
            allowClear: true,
            lookupKey: LanguageRow.lookupKey,
        },
        element: (e) => {
            e.appendTo(this.toolbar.element)
        }
    });

    this.languageSelect2 = Widget.create({
        type: Select2Editor<any, any>,
        init: (w: Select2Editor<any, any>) => {
            LanguageService.List({}, response => {
                for (const item of response.Entities) {
                    w.addItem({
                        id: item.Id.toString(),
                        text: item.LanguageName
                   });
                }
            });
        },
        element: (e: JQuery) => {
            e.appendTo(this.toolbar.element);
        }
    });
}

To get selected value

this.languageSelect.value
this.languageSelect2.value

[sapster77]

@wezmag is there any way to catch the onClick event on the select2 dropdown? Like actually performing an action (calling another function and passing in the selected id) when the user selects an item on the list. As I see it in the above example you probably need to create another button that read the selected value (this.languageSelect2.value).

[rhemasystems]

Thank you so much wezmag, it worked perfectly.
My final concern is how to update the productname column with the selected value.
Thanks