Grid DetailTemplate with element Tab

[Patrik Volka]

Good day,

I want to create a DetailTemplate that will contain a TAB element.

The TAB element is shown in the DetailTemplate but its content is not displayed correctly.

I'd like to see detailed information with $ {...}, but I'm sorry.

The source code and the result are attached to the video.

How should I proceed?

Thank you and I greet you

Attachment: Grid_DetailTemplate_With_Tab_7e09eaf6.zip

[Madhu Sudhanan P]

Hi Patrik Volka, 

 

Thanks for contacting Syncfusion support. 

 

Query : I want to create a DetailTemplate that will contain a TAB element, but its content is not displayed correctly. How should I proceed? 

You have put your code for ‘detailTabContent1’ outside of the SCRIPT tag which will not complied and executed is the cause of the issue. Please put your code within the <script> tag. We have prepared a sample based on your query.  

 

Please find the below code example, sample link and documentation link for your reference. 

[Index.cshtml] 

<div> 

    <ejs-grid id="Grid" dataSource=@ViewBag.DataSource detailDataBound="detailDataBound" allowPaging="true" detailTemplate="#detailtemplate"> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" width="140"></e-grid-column> 

            . . . . 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

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

    <div> 

        <div class="detail-tab"></div> 

    </div> 

    <div style="display:none"> 

        <div id="detailTabContent1"> 

            <div> 

                ${ShipName} 

            </div> 

        </div> 

        . . . .  

    </div> 

</script> 

<script> 

    function detailDataBound(e) { 

        var content1 = document.getElementById('detailTabContent1'); 

        . . . . 

        detailTab = new ej.navigations.Tab({ 

            items: [ 

                { header: { 'text': 'Name' }, content: content1 }, 

                . . . . 

            ] 

        }); 

        detailTab.appendTo(e.detailElement.querySelector('.detail-tab')); 

    } 

</script> 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/detailTemplate-648095196  

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/row.html#detail-template  

Regards, 

Madhu Sudhanan P 

[Patrik Volka]

Thanks for warning about the correct #detailTab encoding, it's working properly.

[Madhu Sudhanan P]

Hi Patrik, 

Thanks for the update. We are glad that your requirement has been achieved.  

Regards, 

Madhu Sudhanan P