Use custom-element inside details-template

[Charles]

I would like to use Aurelia custom-elements / data binding inside the details template.  For example:

or I would like to compose an element in there like so:

Can you give me an example of how I can implement such a solution where my "detailsTemplate" can show custom elements w/ binding based on the data from the grid?

[Seeni Sakthi Kumar Seeni Raj]

Hi Chalres,  

 

We can render detailstemplate using the following code example which utilizes the Aurelia template rendering concept.  

 

    <template> 

        <ej-grid e-data-source.two-way="gridData" e-details-template="#template" > 

   

         </ej-grid> 

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

            <div class="tabcontrol" id="Test"> 

                 <span>${EmployeeID}</span> 

            </div> 

        </script> 

    </template> 

 

Regards,  

Seeni Sakthi Kumar S. 

[Charles]

Ok, so I am closer to where I need to be.  However, the data context is EMPTY from inside the template.  Is there anything that needs to be done in the .js view model on the click event to get my data to show up?

[Charles]

So currently I'm trying this, and with the "text/x-jsrender" along with the {{:payload.ApprovalState}} shows that the payload variable has data, yet this aurelia style shows payload is empty :

<script id="detailsTemplate" type="text/template">

<div class="col">

Status: ${payload.ApprovalState}

div>

<div class="col">

Amount: ${payload.Amount / 100}

div>

<div class="col">

Date: ${payload.RequestedDateFormatted}

div>

script>

[Seeni Sakthi Kumar Seeni Raj]

Hi Charles, 

 

We can reproduce the problem at our end that the Aurelia custom elements were not rendered as expected. So, we have modified the solution as follows. Rendered the Aurelia component in the using the jsrender template and enhance them as Aurelia template in the detailsDataBound event of the Grid as follows.  

 

import {inject, TemplatingEngine} from 'aurelia-framework'; 

 

@inject(TemplatingEngine) 

 

export class Grid { 

    constructor(templatingEngine) { 

        this.templatingEngine = templatingEngine; 

        this.template = "#template" 

    } 

    letsEnhance(elem) { 

        let view=this.templatingEngine.enhance(elem); 

        view.attached(); 

    } 

 

    databound(e) { 

        this.letsEnhance(e.detailsElement[0]); 

    } 

} 

 

<template> 

    <div> 

        <ej-grid e-data-source.two-way="gridData" e-details-template="#template" e-on-details-data-bound.delegate="databound($event.detail)"> 

            <ej-column e-field="OrderID" e-header-text="Order ID" e-text-align="right"></ej-column> 

 

        </ej-grid> 

    </div> 

 

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

        <div class="col"> 

            Status: {{>name.firstName}} 

        </div> 

        <div class="col"> 

            Amount: {{:Freight /100}} 

        </div> 

        <a class="external-link" rel='nofollow' href.bind="{{>name.firstName}}">Blog</a> 

        <div show.bind="{{:Verfied}}"> 

            Hello, World! 

        </div> 

    </script> 

</template> 

 

We have also prepared a sample that can be downloaded from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/133240/ze/ejGrid623008565.zip 

 

Regards,  

Seeni Sakthi Kumar S.