Detail Template width sometimes too large

[Mohamed BENNOUR]

Hi Team,

We would like to have the detail template size to 100% of the screen but after renderer, detail template depends on colspan like this:

<td class="e-detailcell" _ngcontent-fbl-c19="" colspan="41">

Depends on the colspan number, users have to scroll to see the view. Even if we force width size nothing change.

How can we change width size from the template and set it to 100% of the view size or any other size ?

Regards,

Mohamed

[Balaji Sekar]

Hi Mohamed, 

 

Greetings from Syncfusion. 

 

Query: How can we change width size from the template and set it to 100% of the view size or any other size ? 

 

We have detail template sample in our sample browser in which we have rendered the template as table and showed the data in each cells. We have used 100% for the template table itself. The size for the detail cell will be allocated based on the colspan value and we can’t set 100% width for the detail cell . Instead of that we can use 100% or any other values to the template tag which may be div or anything else and you see the template content in the view port itself without scrolling.  We have shared the sample for your reference. 

 

Code Snippet:  

App.component.html 

 

<ng-template #detailTemplate let-data> 

            <table class="detailtable" width="100%"> 

                <colgroup> 

                    <col width="35%"> 

                    <col width="35%"> 

                    <col width="30%"> 

                </colgroup> 

                <tbody> 

                    <tr> 

                        <td rowspan="4" style="text-align: center;"> 

                            <img class='photo' src="./assets/grid/images/{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}" /> 

                        </td> 

                        <td> 

                            <span style="font-weight: 500;">First Name: </span> {{data.FirstName}} 

                        </td> 

                        <td> 

                            <span style="font-weight: 500;">Postal Code: </span> {{data.PostalCode}} 

                        </td> 

                    </tr> 

                    <tr> 

                        <td> 

                            <span style="font-weight: 500;">Last Name: </span> {{data.LastName}} 

                        </td> 

                        <td> 

                            <span style="font-weight: 500;">City: </span> {{data.City}} 

                        </td> 

                    </tr> 

                   <tr> 

                        <td> 

                            <span style="font-weight: 500;">Title: </span> {{data.Title}} 

                        </td> 

                        <td> 

                            <span style="font-weight: 500;">Phone: </span> {{data.HomePhone}} 

                        </td> 

                    </tr> 

                    <tr> 

                        <td> 

                            <span style="font-weight: 500;">Address: </span> {{data.Address}} 

                        </td> 

                        <td> 

                            <span style="font-weight: 500;">HireDate: </span> {{format(data.HireDate)}} 

                        </td> 

                    </tr> 

                </tbody> 

            </table> 

        </ng-template> 

 

 

Sample Link: https://stackblitz.com/edit/angular-qvwjyj-ce5w58?file=app.component.html 

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar. 

[Mohamed BENNOUR]

Hi Balaji !

We try your stackblitz sample and we don't understand how to use it in our case. The detailTemplate always need to be scrolled to see it (as you can see in the gif).

Is there a tips any other solution to get a fixed element (detail) fully visible without scroll navigation ?

Regards,

Attachment: GRID_detailTemplate_b79a4b85.7z

[Balaji Sekar]

Hi Mohamed, 

We have validated your query with provided the information. DetailTemplate feature rendered on the every rows in the Grid it is bounded the DOM element based on colSpan(whole columns count basis) property. In below code example, we have defined the width(50%) in the DetailTemplate and it is shown the template with mentioned value. 

[app.component.html] 

 <ejs-grid #grid [dataSource]='data' id='Grid'> 

        <ng-template #detailTemplate let-data> 

            <table class="detailtable" width="50%" style="border:1px solid red"> 

             .         .        .        . 

            </table> 

        </ng-template> 

    </ejs-grid> 

Sample link: https://stackblitz.com/edit/angular-qvwjyj-skxgrx?file=app.component.html 

Regards, 

Balaji Sekar.