CODEWITHSUNDEEP
angularprimeng
Kannan M
Kannan M

Reputation: 580

Datatable row expansion not working if any of the p-column already has a template to it

DataTableRowExpander does not work when a column has a template attached to it. Please see below code for reference.

                      <p-dataTable [value]="projects" expandableRows="true">
                            <p-column expander="true" style="width:22px"></p-column>
                            <p-column field="projectState" [sortable]="true" header="Status"></p-column>
                            <p-column field="bid" header="BU" [sortable]="true">
                                <template #col #project="rowData" class="col-md-1">
                                    {{GetBU(project[col.field])}}
                                </template>
                            </p-column>

                            <template #project >
                                <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
                                    <div class="ui-grid-row">
                                        <div class="ui-grid-col-9">
                                            <div class="ui-grid ui-grid-responsive ui-grid-pad">
                                                <div class="ui-grid-row">
                                                    <div class="ui-grid-col-2 label">Vin: </div>
                                                    <div class="ui-grid-col-10">{{project.projectState}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </p-dataTable>

Upvotes: 3

Views: 3098

Answers (1)

mike d
mike d

Reputation: 869

For anyone still experiencing this issue I was able to fix it by placing my row template before the column definitions:

<p-dataTable>
    <template let-item>
         <!-- ... -->
    </template>
    <p-column></p-column>
    <p-column>
        <template>
            <!-- ... -->
        </template>
    </p-column>
    <!-- ... -->
</p-dataTable>

Upvotes: 4

Related Questions