Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
370
Angular Grid Row Editing multiple fields in same column
posted

I have a requirement where I have a single column "Sort" which has two separate Fields "Position" and "Direction". Is it possible to use cell.editValue.Position and cell.editValue.Direction which also submits the Cancel/Done options in grid editing. This somehow does not work for me.

<igx-column field="Sort" header="Sort" [dataType]="'number'">

<ng-template igxCellEditor let-cell="cell">

<igx-input-group>

<input igxInput [igxFocus]='true' name="units" [(ngModel)]="cell.editValue.Position" style="color: black" />

</igx-input-group>

<igx-input-group>

<input igxInput [igxFocus]='true' name="units" [(ngModel)]="cell.editValue.Direction" style="color: black" />

</igx-input-group>

</ng-template>

</igx-column>

Parents
No Data
Reply
  • 600
    Offline posted

    Hello Shahab,

    Thank you for posting in our community!

    I have been looking into your question and to ensure that it is addressed correctly, I need to ask for some additional information.

    Could you please clarify if the attached screenshot represents the desired outcome?

    Also, you have mentioned: Is it possible to use cell.editValue.Position and cell.editValue.Direction which also submits the Cancel/Done options in grid editing.

    Could you please elaborate further on the “also submits the Cancel/Done options in grid editing” part of the requirement? Do you mean that the edit values should be submitted/disregarded when clicking the Done/Cancel button?

    It is possible to submit the values when editing the column by using the configuration that you have provided since the IgxGrid supports Complex Data Binding. If you require using the IgxSelect component, I could suggest templating it insite the ng-template and binding it in a similar manner as the provided code snippet. Also, I believe that you will find the following topic here quite helpful on the matter.

    However, if you require a configuration that is similar to the one in the attached screenshot and you do not use row/cell editing, I would suggest using the igxCell template directive instead again with the IgxSelect component.

    Nevertheless, if these suggestions are not an accurate demonstration of what you are trying to achieve, answering the abovemetioned questions and providing any additional information on the exact requirements will be extremely helpful in further investigating this matter and providing you with a solution as soon as possible.

    Thank you for your cooperation. Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Software Developer

Children
No Data