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 04:59 AM

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 06:30 AM

Hi Karthigeyan,

Thanks for your answer.

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

Hi Erik,

Thanks for your update. 

GM Garron Mosley October 27, 2020 11:18 AM


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 03:57 AM

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