[Custom cell template]

[Ciprian-Catalin]

Hello,

I want to implement some custom template for the grid in this way:

Each property of one row from the grid contains as value an array of ids, based on which I want to populate three dropdowns in each cell of the row, corresponding to one property of the object row.

For example:

row1 = {

prop1: ['a', 'b', 'c]

prop2: ['d', 'e', 'f']

}

the result row from the grid for this object should have two columns: prop1 and prop2. 

prop1 cell should have 3 dropdowns which will be 'a', 'b' and 'c' values 

prop2 cell should have 3 dropdowns which will be 'd', 'e' and 'f' values

Is it possible to match the values from the array for each column to three custom controls in each cell?

This is my code, but this approach is not working. 

<ejs-grid

            #grid

            height='500'

            locale="it"

            [dataSource]='dataForGrid'

            [allowSorting]="true"

            [allowTextWrap]='true'

            [allowPaging]="true"

            [toolbar]='toolbarOptions'

            [editSettings]='editSettings'

            [resizeSettings]="resizeSettings"

            (actionComplete)="actionComplete($event)">

            <e-columns>

                <e-column field="id" [isPrimaryKey]="true" [visible]="false"></e-column>

                <e-column field="descr" headerText="" width="50"></e-column>

                <e-column *ngFor="let column of columnsMetadata"

                    [width]="25"

                    [field]=column.name

                    [headerText]=column.name>

                    <ng-template #template1 let-data>

                        <div>

                            <ejs-dropdownlist class="e-outline e-small" placeholder="Provincia" [(ngModel)]="data[column.name][0]"></ejs-dropdownlist>

                        </div>

                    </ng-template>

                    <ng-template #template2 let-data>

                        <div>

                            <ejs-dropdownlist class="e-outline e-small" placeholder="Provincia" [(ngModel)]="data[column.name][1]"></ejs-dropdownlist>

                        </div>

                    </ng-template>

                    <ng-template #template3 let-data>

                        <div>

                            <ejs-dropdownlist class="e-outline e-small" placeholder="Provincia" [(ngModel)]="data[column.name][2]"></ejs-dropdownlist>

                        </div>

                    </ng-template>

                </e-column>

            </e-columns>

        </ejs-grid>

[Pavithra Subramaniyam]

Hi Ciprian-Catalin,

Greetings from Syncfusion.

To understand your expectations clearly, could you please share the below details which will be helpful for us to provide a better solution as early as possible?

1. What is the issue you are facing with the current code in which you are rendering 3 DropDownList components?
2. Share the screenshot
3. Share an example for the Grid data “dataForGrid”.
4. Share a pictorial representation of your expected UI.

Regards,

Pavithra S

[Ciprian-Catalin]

The dataForGrid is an array of objects with this type:

the object's properties will be the columns in the data grid. Each property has as value an array of guids which represents the value for each dropdown I want to display in the cell. The UI should look like this:

In the code snippet provided in the question I tried to assign each value from the property value array to a dropdown, but my approach doesn't work. Is there a way to achieve this behavior?

[Pavithra Subramaniyam]

Hi Ciprian-Catalin,

Thanks for sharing the details.

You can achieve your requirement by rendering the DropDownList component inside a single ng-template with “#template” attribute. Please refer to the below code example and sample link for more information.

<e-column *ngFor="let column of columnsMetadata" [width]="25" [field]="column.name" [headerText]="column.name">

  <ng-template #template let-data>

    <div>

      <ejs-dropdownlist class="e-outline e-small" placeholder="Provincia" [(ngModel)]="data[column.name][0]"

        [dataSource]="data[column.name]"></ejs-dropdownlist>

    </div>

    <div>

      <ejs-dropdownlist class="e-outline e-small" placeholder="Provincia" [(ngModel)]="data[column.name][1]"

        [dataSource]="data[column.name]"></ejs-dropdownlist>

    </div>

    <div>

      <ejs-dropdownlist class="e-outline e-small" placeholder="Provincia" [(ngModel)]="data[column.name][2]"

        [dataSource]="data[column.name]"></ejs-dropdownlist>

    </div>

  </ng-template>

</e-column>

 

https://stackblitz.com/edit/angular-8nhkne-cxzqo1?file=src%2Fapp.component.html

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Ciprian-Catalin]

Thank you

[Suganya Gopinath]

Please get back to us for further assistance in future. 

We are marking this ticket as solved.