Dynamic cards

[Erik]

Hi,

Looking at your demo for EJ2 tileview cards (https://aspdotnetcore.syncfusion.com/Card/TileView#/material);

I would like to add a card for each row of a database's table, and fill them with data from said rows.

Do you have a documentation regarding this ?

Thanks

[Karthigeyan Krishnamurthi]

Hi Erik,

Thanks for contacting Syncfusion support.   

  

We have prepared below sample to create dynamic cards using the remote data source in button click action.  

http://www.syncfusion.com/downloads/support/directtrac/143016/ze/EJ2_Card-1412364363 

  

  

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

  

    <div class="e-card"> 

        <div class="e-card-title">${FirstName}</div> 

        <div class="e-card-header"> 

            <div class="e-card-header-caption"> 

                <div class="e-card-header-title">${Country}</div> 

                <div class="e-card-sub-title">${Title}</div> 

            </div> 

        </div> 

        <div class="e-card-content"> ${Notes}</div> 

    </div> 

  

</script> 

  

  

<script type="text/javascript"> 

  

  

    function Myclick() { 

  

  

        const SERVICE_URI ='https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Employees'; 

  

        // your database service using the EJ2 datamanager 

        new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataAdaptor }) 

            .executeQuery(new ej.data.Query()).then((e) => { 

  

                var result = e.result; 

                var TemplateFn = ej.base.compile(document.getElementById('template').innerHTML.trim()); 

                

                 // bind that result data to each cards 

  

                result.forEach(function (data, index) { 

                    card = TemplateFn(data); 

                    cardEle = document.getElementById('card_sample_' + (++index)); 

                    if (cardEle) { 

                        cardEle.appendChild(card[0]); 

                    } 

                }); 

            }); 

    } 

  

</script> 

  

  

Regards,
 

Karthigeyan

[Erik]

Hi Karthigeyan,

Thanks for your answer.

[Karthigeyan Krishnamurthi]

Hi Erik,

Thanks for your update. 

  

Regards,
 

Karthigeyan

[Garron Mosley]

Hi 

I'm looking for this in a Javascript ES5 sample. I have tried to download the sample provided but it seems restricted.

A ES5 example would be great.

Thank You

[Vinitha Devi Murugan]

Hi Erik, 

 

Sorry for the inconvenience.  

 

Based on your request, we have prepared the same sample in es5 and the same can be available in the link below. 

 

Sample: https://stackblitz.com/edit/card-sample-jnaj76?file=index.js  

 

Kindly try the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vinitha