Autocomplete With List of Objects

[alexis Escala]

Hello, I have the following problem:

I have a grid with multiples columns, the following definition is about the status column:

{
label: 'Status', dataField: 'custom', width: 120, editor: {
template: '',
onInit(row, column, editor) {
const dropDownList = (editor.firstElementChild);

dropDownList.dataSource = [{ "value": 10, "label": "UNFULFILLED" }, { "value": 11, "label": "LUMP" }, { "value": 12, "label": "BOUGHT" }, { "value": 13, "label": "VIRTUAL" }, { "value": -2, "label": "NEW" }, { "value": -3, "label": "ESTIMATED" }, { "value": -5, "label": "QUOTE" }, { "value": 0, "label": "APPROVED" }, { "value": 2, "label": { "value": 11, "label": "LUMP" } }, { "value": 3, "label": "DENIED" }, { "value": 4, "label": "PROCESS" }, { "value": 1, "label": "REQUESTED" }, { "value": 7, "label": "HOLIDAY" }, { "value": 8, "label": "EXPIRED" }, { "value": 9, "label": "CANCELLED" }, { "value": 15, "label": "DECLINED" }, { "value": 14, "label": "DENIEDPDN" }];
dropDownList.dropDownAppendTo = 'body';
dropDownList.selectedValues = [{ "value": 10, "label": "UNFULFILLED" }];
},
onRender(row, column, editor) {
(editor.firstElementChild).selectedValues = [{ "value": 11, "label": "LUMP" }];
},
getValue() {
return this.firstElementChild.selectedValues[0].description;
}
},
}

Questions:
1 ) dropdownList.selectedValues doesn’t show the item selected when the grid is render.
2) When I click in some cell, the list of datasource is emty.
3) I need to know how I can put the selected value in each status cell and.

• This topic was modified 2 years, 7 months ago by alexis Escala.
• This topic was modified 2 years, 7 months ago by alexis Escala.
• This topic was modified 2 years, 7 months ago by alexis Escala.
• This topic was modified 2 years, 7 months ago by alexis Escala.

[admin]

Hi,

selectedValues expects strings/numbers, not objects. The items of the DropDownList/ComboBox can be strings or objects with label/value fields. The values are always strings or numbers. I would suggest you to look at https://www.htmlelements.com/demos/grid/editing-cascading/. The example shows how to create such an editor.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[alexis Escala]

Thanks, I didn’t know that, but I have the following question:

{
label: ‘Status’, dataField: ‘custom’, width: 120, editor: {
template: ‘<smart-combo-box></smart-combo-box>’,
onInit(row, column, editor) {
const dropDownList = (editor.firstElementChild);

dropDownList.dataSource = [{ “value”: 10, “label”: “UNFULFILLED” }, { “value”: 11, “label”: “LUMP” }, { “value”: 12, “label”: “BOUGHT” }, { “value”: 13, “label”: “VIRTUAL” }, { “value”: -2, “label”: “NEW” }, { “value”: -3, “label”: “ESTIMATED” }, { “value”: -5, “label”: “QUOTE” }, { “value”: 0, “label”: “APPROVED” }, { “value”: 2, “label”: { “value”: 11, “label”: “LUMP” } }, { “value”: 3, “label”: “DENIED” }, { “value”: 4, “label”: “PROCESS” }, { “value”: 1, “label”: “REQUESTED” }, { “value”: 7, “label”: “HOLIDAY” }, { “value”: 8, “label”: “EXPIRED” }, { “value”: 9, “label”: “CANCELLED” }, { “value”: 15, “label”: “DECLINED” }, { “value”: 14, “label”: “DENIEDPDN” }];
dropDownList.dropDownAppendTo = ‘body’;
},
onRender(row, column, editor) {
},
getValue() {
return this.firstElementChild.selectedValues[0].description;
}
},
}

In this case, I don’t have nothing in selectedValues but the grid doesn’t show the list of items in the cell, which is the problem?
When you say that the selectedValues expects a string, in this case, should be in onRender or onInit?

The other question is, if I need to put { “value”: 7, “label”: “HOLIDAY” } as selected value,the value in this case is a number, the selectedvalues accept a number also?
Ex: .selectedValue = [“7”] or .selectedValue = [7], always is a array??

[admin]

Hi alexis,

I think that this part of the code is wrong: this.firstElementChild.selectedValues[0].description. The reason is that there is no description field in the data source, and the other reason is that you may not have a selected value, too. This means that this.firstElementChild.selectedValues[0] is undefined.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts