Nested detail template with tab controls

[Javier A Aguilera]

I have a grid with a detail template; inside this detail template i have a tab control with multiple tabs; one of the tabs have a grid control with a detail template, this nested template includes another tab control. The second tab control is not working.

Can u help me with this?

Attachment: example_214dc2ee.rar

[Rajapandi Ravi]

Hi Javier, 

We checked the code example and found that you are binding a detailDataBound function as string type which was not the correct format to binding the function in Javascript.  

If you bind the function as string type then it will not triggers your function. It was the cause of the issue. Please refer the below screenshot for more information. 

Screenshot: 

 

To overcome the issue, we suggest you to follow the below way to achieve your requirement. Please refer the below code example for more information. 

Index.cshtml 

 

<script> 

    function detailtemplateClientesDataBound(e) { 

 

        var CatalogoContactosClientesGrid = new ej.grids.Grid({ 

            dataSource: dataContactos, 

            foreignKeyField: ["ClienteID"], 

            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

            actionBegin: "onActionBeginCatalogoContactosClientesGrid", 

            detailTemplate: "#detailtemplateContactoClientes", 

            detailDataBound: ContactosDetailDataBound,              //removed the string 

            load: function (args) { 

                this.query = new ej.data.Query().where("ClienteID", 'equal', e.data.ClienteID) 

            }, 

            columns: [ 

                { field: 'ContactoClienteID', visible: false, isPrimaryKey: true, isIdentity: true }, 

                { field: 'ClienteID', visible: false, defaultValue: e.data.ClienteID }, 

                { field: 'Nombre', headerText: 'Nombre' }, 

                { field: 'ApellidoPaterno', headerText: 'Apellido Paterno' }, 

                { field: 'ApellidoMaterno', headerText: 'Apellido Materno' } 

            ] 

        }); 

        CatalogoContactosClientesGrid.appendTo(e.detailElement.querySelector('.contactosCliente')); 

 

        detailTab = new ej.navigations.Tab(); 

         detailTab.appendTo(e.detailElement.querySelector('.detailTemplateCliente')); 

    } 

 

function ContactosDetailDataBound(obj) { 

                  .  .  .  .  .  .  .                                                 //Now this function gets triggered 

                  .  .  .  .  .  .  . 

   } 

Regards, 

Rajapandi R 

[Javier A Aguilera]

Wow, i can´t believe it. 

Thanks, it works like a champ =)

[Rajapandi Ravi]

Hi Javier, 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance 

Regards 

Rajapandi R