Buttons don't render in Grid Detail Template

[Mike Rowley]

I am trying to add buttons and some text to the Grid Detail Template, however they do not render with a size, even if I try to force the size through CSS they still render with 0x0 sizing.

Here is the grid

                                <ejs-grid id="Grid" load="onLoad" toolbarClick="toolbarClick" allowPaging="true" allowSorting="true" allowTextWrap="true" detailTemplate="#detailtemplate" detailDataBound="detailDataBound">

                                    <e-grid-pagesettings pageSize="25"></e-grid-pagesettings>

                                    <e-data-manager url="@Request.Path?handler=DataSource" adaptor="UrlAdaptor"></e-data-manager>

                                    <e-grid-editSettings allowAdding="true" allowDeleting="true" showDeleteConfirmDialog="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>

                                    <e-grid-columns>

                                        <e-grid-column field="ImportDate" headerText="Date" format="yyyy-MM-dd hh:mm a" width="200" minWidth="200" maxWidth="300"></e-grid-column>

                                        <e-grid-column field="ImportType" visible="false" headerText="Type" minWidth="75" maxWidth="125"></e-grid-column>

                                        <e-grid-column field="ImportTypeDescription" headerText="Type" minWidth="75" maxWidth="125"></e-grid-column>

                                        <e-grid-column field="PurgeProducts" headerText="Purge Products" minWidth="75" maxWidth="100" displayAsCheckBox="true" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="PurgeDocuments" headerText="Purge Docs" minWidth="75" maxWidth="100" displayAsCheckBox="true" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="PurgeStores" headerText="Purge Stores" minWidth="75" maxWidth="100" displayAsCheckBox="true" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="PurgeColors" headerText="Purge FanDecks" minWidth="85" maxWidth="100" displayAsCheckBox="true" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="CleanDatabase" headerText="Clean Database" displayAsCheckBox="true" minWidth="75" maxWidth="100" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="ImportUserName" headerText="Imported By" minWidth="100" maxWidth="150"></e-grid-column>

                                    </e-grid-columns>

                                </ejs-grid>

And here is the detailtemplate

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

    <div id="Export_Form" style="padding: 10px;background-color: #808080">

        <div class="form-row" >

            <div class="form-group col-md-3" style="height:28px">

                <ejs-button id="btnExportProducts" content="Export Products Backup" style="height:auto;width:auto;"></ejs-button>

            </div>

            <div class="form-group col-md-3">

                <ejs-button id="btnExportDocuments" content="Export Documents Backup"></ejs-button>

            </div>

            <div class="form-group col-md-3">

                <ejs-button id="btnExportStores" content="Export Stores Backup"></ejs-button>

            </div>

            <div class="form-group col-md-3">

                <ejs-button id="btnExportFanDecks" content="Export Fan Decks Backup"></ejs-button>

            </div>

        </div>

        <div class="form-row" >

            <div class="form-group col-md-3">

                <ejs-button id="btnExportImportFile" content="Export Import File"></ejs-button>

            </div>

            <div class="form-group col-md-3">

            </div>

            <div class="form-group col-md-3">

            </div>

            <div class="form-group col-md-3">

            </div>

        </div>

        <div class="form-row">

            <div class="form-group col-md-6">

                <label class="e-label">${Result}</label>

            </div>

        </div>

    </div>

</script>

In case it matter, here is my detailDataBound function which creates the onclick events:

    function detailDataBound(args) {

        var id = args.data.ID;

        $(args.detailElement).find("#btnExportProducts").onclick = function() {

            location.rel='nofollow' href = "@Request.Path?handler=DownloadBackup&ExportID=" + id +"&ExportType=0";

        };

        $(args.detailElement).find("#btnExportDocuments").onclick = function() {

            location.rel='nofollow' href = "@Request.Path?handler=DownloadBackup&ExportID=" + id +"&ExportType=1";

        };

        $(args.detailElement).find("#btnExportStores").onclick = function() {

            location.rel='nofollow' href = "@Request.Path?handler=DownloadBackup&ExportID=" + id +"&ExportType=2";

        };

        $(args.detailElement).find("#btnExportFanDecks").onclick = function() {

            location.rel='nofollow' href = "@Request.Path?handler=DownloadBackup&ExportID=" + id +"&ExportType=3";

        };

        $(args.detailElement).find("#btnExportImportFile").onclick = function() {

            location.rel='nofollow' href = "@Request.Path?handler=DownloadBackup&ExportID=" + id +"&ExportType=4";

        };

    }

[Thiyagu Subramani]

Hi Mike, 

Thanks for contacting Syncfusion forum.  

Based on your requirement you need to render the Syncfusion EJ2 button component in detailTemplate and need to perform some actions using its click event.  

So we have prepared sample based on that requirement and we suggest you to refer the below code, screenshot and sample link to achieve your requirement. 

<ejs-grid id="Grid" allowPaging="true" detailDataBound="detailDataBound" load="onLoad" detailTemplate="#detailtemplate" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 

 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

 

     . . . . . 

</ejs-grid> 

 

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

    <div id="Export_Form"> 

        <div class="form-row"> 

            <div class="form-group col-md-3" style="height:28px"> 

                <div id='btn'></div> 

            </div> 

        </div> 

    </div> 

</script> 

 

<script> 

    function detailDataBound(e) { 

        button = new ej.buttons.Button({ 

            content: "Export Products Backup", 

            isPrimary: true 

        }); 

        button.appendTo(e.detailElement.querySelector('#btn')); 

        button.element.onclick = function () { 

            console.log("Btn clicked") 

        } 

    } 

</script> 

Screenshot: 

 

 

 

Sample link:  https://www.syncfusion.com/downloads/support/forum/158572/ze/UrlAdaptor-CRUD-NormatEdit-1001330986 

For more reference, please refer to the below documentation. 

UG: https://ej2.syncfusion.com/aspnetcore/documentation/grid/row/#rendering-custom-component 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S