We are using igx-combo in a cell editor within igx-grid and have run into an issue that we cannot figure out: how to get the existing display value from the cell to display in igx-combo when it enters edit mode?
A little background:
We are binding a set of records to the combo that have a numeric value and a string display value. The display value is stored in a different column within the row data, so the cell display configuration simply pulls that value when not in edit mode. Roughly:
<ng-template igxCell let-cell="cell"> <div>{{cell.rowData[col.displayColumnName]}}</span></div> </ng-template>
The cell editor is setup as follows (display-only properties removed):
<ng-template igxCellEditor let-cell="cell"> <igx-combo [(ngModel)]="cell.editValue" [data]="lookupLists[col.columnName]" [displayKey]="'Description'" [valueKey]="'LookupListID'"> </igx-combo> </ng-template>
The issue is that prior to editing, there is a value in the cell:
But when we enter edit mode on the cell, the value is not selected in the combo text area or in the dropdown:
After a little more experimentation, we realized that the issue is that igx-combo expects (and returns) an array of values, but we only have a single value available.
We are using the guidance in the combo documentation topic to only allow a single value to be selected, but that guidance does not include information on how we go about binding a single value to the grid.
We have tried changing both the oldValue in the args of the cellEditEnter method and setting the cell's editValue in that method, but neither are recognized.
We have verified that we can change the value from an array to a single value in the cellEdit method, but we do need to figure out how to assign the appropriate array so the combo shows the correct value.
Hello,
Thank you for posting on our forums.
Since your cell template is designed to contain value, it is expected that there will be value displayed prior editing:
Regarding why the value that is not selected, you will need to pass an array as cell value, so the combo can pick it up. In case you have a single value only, you can just pass an array with one string only.
Please check the following example where an igx-combo is set up in igx-grid with both igxCell and igxCellEditor templates:
https://stackblitz.com/edit/igx-grid-edit-mode-combo-da5qca?file=src%2Fapp%2Fgrid%2Fgrid-editing-sample%2Fgrid-editing-sample.component.html
Should you have any further questions, please let me know.
Sincerely,Tihomir TonevAssociate Software DeveloperInfragistics
I understand that the combo requires an array, what I don't understand is in which event this can be reliably sent.
The sample project that you sent only shows multiple selection, not selecting from a single value, so it unfortunately does not help with the problem we are having.
The data for this column comes out of a single numeric field so we clearly have to transform this value into an array prior to sending it to the combo which is the question we have.
And just to be clear, it is not at all possible to change the format of the underlying data to an array, it must be transformed in some cell or combo event.
Clarification on the last statement: our usage of the grid is general purpose and not defined ahead of time. We get schema in the form of a set of column definitions and an array of json objects and apply both of these to the grid. The set of columns can be changed at will by our customers and through configuration of security.
The data is extracted from the DB and written back to the DB via a generic API that services other UI components. The data also passed passed by the grid to other elements in the UI for various purposes.
These are the reasons we can't simply write a class or otherwise adjust data elements to contain an array.
Hello Lance,
The parseArray function is meant to set the displayValue for the cell and is all it does. It takes the objects from the array and extracts their values to a single string.
You don't need to have an array to pass an array. We don't expect the data to be in the same format, but data can be transformed. You can also bind the combo to array of strings, you just have to remove value/display key and it will work.
I have updated the sample as per your requirements. Please check it and let me know if you have any further questions.
https://stackblitz.com/edit/github-c1athv-cclgp9?file=src%2Fapp%2Fgrid%2Fgrid-editing-sample%2Fgrid-editing-sample.component.html
Sincerely,
Tihomir TonevAssociate Software DeveloperInfragistics
Unfortunately, I think you have completely missed the point of the question that we are asking in several different ways.
First, the data source for the combo is a number key and string display value. So the parseArray functionality doesn't help us solve the problem in any meaningful way.
Second, as I have pointed out, there is no array in the underlying data, so there is no array to parse. There is also no way that we can modify the underlying data to be or accept an array because it is a generic implementation. The provided sample only shows multiple selection, meaning that the underlying data is an array.
Third, we already have the appropriate means for handling the display value, we just need the appropriate mechanism within the grid to convert the single value to an array in order to populate the dropdown.
I have forked and updated your sample to show the precise problem:
https://stackblitz.com/edit/igx-grid-edit-mode-combo-fhpbic?file=src/app/grid/grid-editing-sample/grid-editing-sample.component.ts
It's not working 100% on save, but you will be able to get the idea of the problem.
Thank you for your reply.
I am not sure what you mean that the example is only multiple selection. The sample I linked have both single and multiple values.
First there is the template for the cell:
And then in the code the function returns string depending on single or multiple results(if multiple, coma separated).
This way the data will be formatted already, and when you enter edit mode and the combo initializes, it will have the data needed when it reads the binding with ngModel and relate it to the [data] object binded.
In the sample when you open the combo there are a lot of choices, as the array locations contains many. If you would change the following line to:
in ngOnit it will have only one choice because the array will have only one string. And should you need to transform the data to array of strings, because it comes in the form of numbers, you don't need combo events, as angulars lifecycle hooks are the one meant for this.
So if the data in the cell matches the data the combo is binded to, regardless of number of choices, it will be selected when the dropdown is opened.
This is how combo binding works, however if there is another issue, please let me know.