Dropdown on edit gets an undefined

[Frédérique Josseaume]

Hello,

I'm struggling making the dropdown to behave correctly in a grid.
Here is the screenshot of the behavior on load, then on edit

Here is my html extact of my columns

<ng-container *ngIf="columns$ | async as columns">

<e-column

*ngFor="let column of columns"

[field]="column.field"

[headerText]="column.headerText"

[format]="column.format"

[validationRules]="column.validationRules"

[width]="config.columnWidth"

[editType]="column.editType"

[edit]="column.edit"

foreignKeyField="key"

foreignKeyValue="value"

textAlign="Center"

[valueAccessor]="valueAccessor"

></e-column>

</ng-container>

Here is my params impletementation

const data: object[] = this.equipmentAttribute.attribute.config["values"];

return {

params: {

dataSource: new DataManager(data),

fields: { text: "value", value: "key" },

showClearButton: true,

allowObjectBinding: true,

query: new Query()

}

};

ValueAccessor in case it's needed

public valueAccessor(fieldName: string, data, column) {

console.log("column", column);

if (typeof data[fieldName] === "object" && data[fieldName]) {

return data[fieldName].value;

}

}

I'm expecting to just fill the field/select the current selection since on load i get the key but i have to manipulate on the onQueryCellInfo to map the display value instead of the key.

seems it's not mapping automatically, my datasource is an array of key:value like in the exemple in the CustomerId and CustomerName

here is the api object i'm receiving

"config": {

                "type": "select",

                "values": [

                    {

                        "key": "dry_weather",

                        "value": "Temps sec"

                    },

                    {

                        "key": "emergency",

                        "value": "Urgence"

                    },

                    {

                        "key": "rain",

                        "value": "Pluie"

                    },

                    {

                        "key": "thaw",

                        "value": "Fonte des neiges"

                    },

                    {

                        "key": "scheduled_maintenance",

                        "value": "Réalisation de travaux planifiés"

                    }

                ]

            },

What did i get wrong?

[Dineshnarasimman Muthu]

Hi Frédérique Josseaume,

Greetings from Syncfusion Support.

We have reviewed your query about error thrown upon editing when custom dataSource is set to the dropdownedit using edit params. From the query, we understand that you need to edit the foriegnKeyColumn of the grid. As you are rendering columns dynamically using ngFor attribute, the foriegnKey property will be assigned to all the columns. We suggest you to set foreignKey property for the column which needs to be foreignKey column based on the condition. You can provide the foreign dataSource based on that dropdownedit will populate the data.

By setting dataSource to foreignKey column, it will display the data from that dataSource and it will be displayed in the items of the dropdownlist when editing.

 <ng-container *ngFor="let items of columns">

    <e-column

          *ngIf="items.field == 'ShipCity'"

          [field]="items.field"

          [headerText]="items.headerText"

          [isPrimaryKey]="items.isPrimaryKey"

          [width]="items.width"

          [editType]="items.editType"

          foreignKeyField="key"

          foreignKeyValue="value"

          [dataSource]="config.values"

          [valueAccessor]="valueAccessor"

          textAlign="Center"

        >

        </e-column>

 

Sample: https://stackblitz.com/edit/angular-q8t3hs

We have attached the documentation of foreignKey column implementation for your reference.

Documentation: https://helpej2.syncfusion.com/angular/documentation/grid/columns/foreign-key-column

We suspect that the custom data is not properly assigned as the value is not undefined when selecting the items of the dropdownlist. please provide the following information which will help us to validate further.

• Ensure us whether you are binding complex data to the grid. Please provide the example dataSource of your grid. As you have mentioned you are displaying the data initially using queryCellInfo please provide the queryCellInfo event code information and code information of other customization.

• Ensure us whether this issue occurs upon saving the record to the grid or upon entering edit state. Ensure us whether the dataSource is displayed in the dropdownlist or it returns undefined when selecting a value from the dropdownlist.

• Please replicate the issue in the sample which we attached by modifying it similar to your application. This will help us to understand your customization and resolve the issue quickly.

We highly appreciate your co-operation in providing these information.

Regards,

Dineshnarasimman M

[Frédérique Josseaume]

i found way to make it work without objectBinding but i get what you say so i will try it. 

Thank you :)