HI:
I can't implement a simple selection with igx-select control on grid column that returns the key value (numeric) with a selection of text .
like data = {id:1, city:'buenos aires'},{ id:2, city: 'la plata', ....}
can you help me?
Pablo
Hello Pablo,
We tested all samples before sending them and the previously attached sample is tested in Firefox and Chrome. If you could provide me more details regarding what exactly is not working I could take a look.
Additionally, this is just a sample of using igxSelect in igxGrid column. You are free to modify it per your requirement.
If you do not require the cell to be editable you could set its editable property to false. In this case, however, the igxSelect would still be active since we are retemplating the IgxCell. Otherwise, as I previously mentioned if yon require to have an igxSelect only in edit mode you could retemplate the IgxCellEditor instead of IgxCell and set the column editable property to true.
The IgxSelect value property gets/sets the component value.
By default, the select component will use the selected item's element innerText to be displayed in the input field. In cases with more complex item templates, you can explicitly set the text property to specify what to display in the input field when this item is selected. So, for example you need only the city name to be displayed in the input field of igxSelect item, you could set the text property to item.city.
The innerText of the igxSelect item component is the way each item would be represented into the drop-down, so if you modify it to {{item.city}} only the city values would be displayed. In order to demonstrate how the text property works I left it to {{item.id}}: {{item.city}} just for the purposes of the example.
Regarding your last requirement, my suggestion in case you require to update the grid's data is to use the igxSelect's onSelection that is emitted when item selection is changing, before the selection completes. In the event handler we could pass the event argument and grid's cell. The event argument contains a newSelection property which value would be the value of the selected item. Getting this value we could update the grid's cell with it.
In case you do not require to update the grid's data you could remove the two-way binding of the igxSelect component ngModel.
I have modified the previously provided sample and added a button that on click log the grid's data to the console. The sample could be found here.
Please test it on your side and if this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application, and attach it in this case or you could share a link to a Stackblitz project.
Additionally more information about IgxGridComponent properties and methods could be found here, and about the IgxSelect component properties and methods - here. Also in this topic in our documentation could be found more samples about using the IgxSelect component.
Let me know if I may be of any further assistance.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
He Teodosia
Sorry, but your example dont WORK!!
First, i dont need that cell be editable, i only need select from dropdown.
second: i dont need show id on selection, only text (simply select from key, value)
third and more important:: after select from dropdown the city no is assigned to datasource from grid!!!!
so that I would need to choose the city if then the data is not assigned?? ja ja I dont bealive!!
Sorry, but you test this example before send me?
I
Hello,
I have been looking into your question and created a sample application in order to demonstrate how such behavior could be achieved. As you can notice in the attached sample, I have retemplated the igxCell of the City column in order to add an igxSelect with described structure:
<igx-column field="City" header="City" [dataType]="'string'" width="25%" [editable]="true" [resizable]="true"> <ng-template igxCell let-cell="cell"> <igx-select [(ngModel)]="cell.value" #select style="width:100"> <igx-select-item *ngFor="let item of selectData" [value]="item.city" > {{item.id}}: {{item.city}} </igx-select-item> </igx-select> </ng-template> </igx-column>
Here you can find my sample for your reference.
However, please keep in mind that the grid data in the City column contains only the city's name and in case of sorting, for example, the values of this column would be sorted depending on the city (not the id).
Additionally, if you need a select only when editing a cell in this column you could retemlate the igxCellEditor instead of IgxCell.