Add table inside a cell

[Roberto]

Hello, I need to include a table inside a cell or a list of 3 columns inside a cell.

I created a template for the column, but I only get the first line of the subgrid

<script id="comotemplate" type="text/x-template">

   <table>

      <tr>

        <th></th>

        <th></th>

        <th></th>

      </tr>

      <tr>

        <td>${ComoPAs[0].descricao}</td>

        <td>${ComoPAs[0].percentual}</td>

        <td>${ComoPAs[0].status}</td>

      </tr>

    </table>

</script>

[Aishwarya Rameshbabu]

Hi Roberto,

Greetings from Syncfusion support.

Upon reviewing your query, we noticed that you are facing an issue with rendering an HTML table inside the Syncfusion Grid column template. We have created a sample based on the shared code example and tried to reproduce the reported issue but were unsuccessful. Please review the attached sample and screenshot for more details.

Screenshot:

If you are still encountering an issue, please provide the following details that would be helpful for us to further validate the issue:

1. Syncfusion package version you are currently using.

2. Complete Grid rendering code along with the associated event handler.

3. Type of data binding being used in the Grid (Remote or Local data).

4. If Remote data is being used, please share the adaptor details.

5. If possible, please share a simple issue replication sample or try to replicate it in the sample provided.

6. Please share a screenshot or a video demonstration of the issue replication.

Regards,

Aishwarya R

[Aishwarya Rameshbabu]

Hi Roberto,

Please find the working sample in the attachment.

Regards,

Aishwarya R

Attachment: 188189Sample_a28e677f.zip

[Roberto]

Hi,

My table inside the template there is many rows, so I need to do a loop do add new rows in the table inside cell.

something like this.

<script type="text/x-template" id="template">

 <table class="templateTable">

     <tr>

         <th></th>

         <th></th>

         <th></th>

     </tr>

 for (var i = 0; i < ComoPAs.length; i++) {

<tr>

        <td>${ComoPAs[i].descricao}</td>

        <td>${ComoPAs[i].percentual}</td>

        <td>${ComoPAs[i].status}</td>

</tr>

}

  </table>

</script>

thanks

[Aishwarya Rameshbabu]

Hi Roberto,

We have made changes to the sample as per your requirement. We have displayed the data in a table format in the Grid column by looping over it. The sample currently shows 5 rows, but you can display more rows by providing additional data. Please see the attached sample and code example for reference.

<script id="template" type="text/x-template">

<style>

.templateTable {

  width: 100%;

  border-collapse: collapse;

}

 

.templateTable th, .templateTable td {

  border: 1px solid #ddd !important;

  padding: 8px;

  text-align: left;

}

</style>

    <table class="templateTable">

        <tr>

            <th>Order ID</th>

            <th>Customer ID</th>

            <th>Freight</th>

        </tr>

        @foreach (var item in ViewBag.datasource)

        {

            <tr>

                <td>@item.OrderID</td>

                <td>@item.CustomerID</td>

                <td>@item.Freight</td>

            </tr>

        }

    </table>

</script>

 

Screenshot:

Sample: Please find in attachment.

If you are still experiencing difficulties, please provide the details we previously requested regarding the Syncfusion package version, Grid rendering code, and type of data binding. If possible, kindly share a simple sample demonstrating the issue or try to reproduce it in the provided sample.

Regards

Aishwarya R

Attachment: 188189UpdatedSample_f5353695.zip

[Roberto]

Hi, thanks. It is working well.

[Aishwarya Rameshbabu]

Hi Roberto,

You're welcome! Please feel free to contact us if you need any other assistance.

Regards

Aishwarya R