Search results

Integrate other component inside the card in JavaScript Card control

You can integrate any component inside the card element. Here ListView component is placed inside the card for showcasing the To-Do list.

Source
Preview
index.html
index.ts
index.css
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Card Component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div style="margin: 50px;">
        <div id='container'>
            <div tabindex="0" class="e-card" id="basic">
                <div class="e-card-title">To-Do List</div>
                <div class="e-card-separator"></div>
                <div class="e-card-content">
                    <div id='element'></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
import { ListView } from '@syncfusion/ej2-lists';

//Define the array of JSON
let todoList: { [key: string]: Object }[] = [
    {  todoList: 'Pay Bills' },
    {  todoList: 'Call Chris' },
    {  todoList: 'Meet Andrew' },
    {  todoList: 'Visit Manager' },
    {  todoList: 'Customer Meeting' },
];

//Initialize ListView component
let listviewInstance: ListView = new ListView({
    dataSource: todoList,
    //Map the appropriate columns to fields property
    fields: { text: 'todoList' },
    showCheckBox: true,
});

//Render initialized ListView
listviewInstance.appendTo("#element");
#element {
    display: block;
    max-width: 400px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
    cursor: pointer;
}