Dynamic Combobox creation in Grid

[jeetParticipant]

Hello,

I have tried to create a custom dropdown in a grid by taking the reference of below link.

https://www.jqwidgets.com/angular/angular-grid/#https://www.jqwidgets.com/angular/angular-grid/angular-grid-customdropdownlistcolumn.htm

By using it, Dropdown is displaying but all values are not displaying in the dropdown source.

For Example.

My DropDown Has 3 Values.
1) Test 1
2) Test 2
3) Test 3

In Grid data, only Test 1 and Test 2 options are selected, Test 3 option is not selected in any data. In this scenario, it is only showing me 3 options. Test 1, Test 2 and blank(I didn’t add blank option.)

When we assign Test 3 value to any record, In the dropdown it is displaying 4 values. Test 1, Test 2, Test 3, and blank (I didn’t add blank value.)

Some of my grid has no value for the field. So I think it is showing me the options based on the data available in grid.

Below is my some code.
————– Code is to create multiple sources and adaptors ————————-
dropDownColums.forEach(element => {
let sourceValue = this.getDropdownSourceForGrid(element.baseColumnName);
let dropDownSource = new DropDownSource();
dropDownSource.source = new DropDownConfiguration();
dropDownSource.baseColumnName = element.baseColumnName;
dropDownSource.source.localdata = sourceValue;

this.dropDownSourceList.push(dropDownSource);

let dataAdapter: any = {};
dataAdapter.baseColumnName = element.baseColumnName;
dataAdapter.adaptor = new jqx.dataAdapter(dropDownSource.source, { autoBind: true });
this.dropDownSourceAdapter.push(dataAdapter);
});

——————————————————————————————

—————- Creating Grid Source and Columns —————————————-

if (element.dropDownSourceID > 0) {
this.source.datafields.push({
name: element.baseColumnName,
value: element.baseColumnName,
values: {
source: this.getRecords(element.baseColumnName),
value: ‘value’,
name: ‘label’
}
});
} else {
this.source.datafields.push({
name: element.baseColumnName,
type: this.getDataType(element.dataType)
});
}

initColumns.push({
text: this.isEnglish ? element.defaultDisplayName : element.defaultDisplayNameFrench,
datafield: element.baseColumnName,
displayfield: element.baseColumnName,
columntype: ‘dropdownlist’,
createeditor: (row: number, value: any, editor: any): void => {
editor.jqxDropDownList({
width: ‘99%’,
height: 27,
source: this.getAdaptor(element.baseColumnName),
displayMember: ‘label’,
valueMember: ‘value’
});
},
width: element.columnPixelSize === 0 ? 200 : element.columnPixelSize
});

—————————————————————————————-

public getRecords(baseColumnName) {

let adapter = this.dropDownSourceAdapter.find(x => x.baseColumnName === baseColumnName);
if (adapter) {
return adapter.adaptor.records;
}
}

public getAdaptor(baseColumnName) {
let adapter = this.dropDownSourceAdapter.find(x => x.baseColumnName === baseColumnName);
if (adapter) {
return adapter.adaptor;
}
}

Could you please help me to solve this problem?

Thank you in advance.

[HristoParticipant]

Hello jeet,

The provided samples looks good on first sight but it will be better if use them in one example.
Could you provide us with one simplified example that demonstrates your case?
Is there any error message in the console?

It is possible to have some records with empty value.
You could check this as you implement in the “beforeLoadComplete” callback of the jqxDataAdapter and replace the unwanted value with desired one.
If you have only these three values why you make so complicated example add one simple array with these values.
Please, provide us with an testable example as a base for this you could use that demo.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts