Dropdownlist not working in table header

[Frank Camarillo]

I have a several dropdownlists in a div that render fine. However, a dropdownlist in a Table>thead<th does not render at all. Is it possible to place dropdownlist in this element? 

This is my snippet:

  <table id='RecConstCoverage' class='table table-striped'>

            <thead>

                <tr class='headerRow'>

                    <th>COVERED ASSETS</th>

                    <th>COVERAGE PLAN</th>

                    <th>COST OF INSURANCE ANNUAL (QTRLY)</th>

                    <th>MINIMUM INCOME vs REQUIREMENT FROM PORTFOLIO (a)</th>

                    <th>MINIMUM ANNUAL INCOME FROM PORTFOLIO</th>

                    <th>

                        ANNUAL INCOME <ejs-dropdownlist id="AppreciationDDL" dataSource="@Model.ConstCoverageChoices.Appreciation" placeholder="SELECT" change="CalculateCoverage">

                            <e-dropdownlist-fields text="PercentText" value="PercentValue"></e-dropdownlist-fields>

                        </ejs-dropdownlist>

                    </th>

                </tr>

            </thead>

            <tbody>

            </tbody>

        </table>

[Sureshkumar P]

We have validated your shared information with a code example, we can render the dropdownlist component inside the table header element. we have created the sample based on your shared code example. Please find the sample in the attachment:

If still, you have faced the same issue, then please replicate the reported issue in the attached sample and revert us with a detailed issue replication procedure. These details will help us to provide an exact solution as earlier as possible.

Attachment: ASPCore_c9e23591.zip