We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dynamic cards


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 ?


5 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team March 1, 2019 09:59 AM UTC

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.  
<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 class="e-card-content"> ${Notes}</div> 
<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) { 

ER Erik March 1, 2019 11:30 AM UTC

Hi Karthigeyan,

Thanks for your answer.

KK Karthigeyan Krishnamurthi Syncfusion Team March 1, 2019 11:42 AM UTC

Hi Erik,

Thanks for your update. 

GM Garron Mosley October 27, 2020 04:18 PM UTC


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

VD Vinitha Devi Murugan Syncfusion Team November 3, 2020 08:57 AM UTC

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. 
Kindly try the above sample and get back to us if you need any further assistance. 

Live Chat Icon For mobile
Up arrow icon