CardView - Documentation | www.HtmlElements.com

Overview

Smart.CardView represents a control for displaying tabular data. Each record of the data is represented by a data card which can contain multiple data fields and also show cover image(s) and a title.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.cardview.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class.
    • smart.cardview.js - the JS file containing the definition for the element.
    • smart.button.js
    • smart.card.js
    • smart.carousel.js
    • smart.checkbox.js
    • smart.sortable.js
    • smart.date.js
    • smart.draw.js
    • smart.math.js
    • smart.numeric.js
    • smart.dropdownlist.js
    • smart.listbox.js
    • smart.tooltip.js
    • smart.calendar.js
    • smart.timepicker.js
    • smart.datetimepicker.js
    • smart.filter.js
    • smart.input.js
    • smart.complex.js
    • smart.numerictextbox.js
    • smart.gridpanel.js
    • smart.data.js
    • smart.scrollbar.js
    • smart.switchbutton.js
    • smart.window.js

Usage

  • Import a module

    With this approach, we import a module and create the web component by using the Smart function. The #cardView is a smart-card-view tag.

    import { smartCardView } from "../../source/modules/smart.cardview.js";
    
    Smart('#cardView', class {
        get properties() {
            return {
                dataSource: new Smart.DataAdapter(
                    {
                        dataSource: generateData(50),
                        dataFields:
                            [
                                'firstName: string',
                                'lastName: string',
                                'birthday: date',
                                'country: string',
                                'attachments: string'
                            ]
                    }),
                columns: [
                    { label: 'First Name', dataField: 'firstName', icon: 'firstName' },
                    { label: 'Last Name', dataField: 'lastName', icon: 'lastName' },
                    { label: 'Birthday', dataField: 'birthday', icon: 'birthday', formatSettings: { formatString: 'd' } },
                    { label: 'Country', dataField: 'country', icon: 'country' },
                    { label: 'Attachments', dataField: 'attachments', image: true }
                ],
                coverField: 'attachments',
                titleField: 'firstName'
            };
        }
    });
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() {
    
    }
    
    Using the Smart function is optional. You can use const cardView = document.querySelector("#cardView"); and set the properties like that:
    const cardView = document.querySelector("#cardView");
    
    cardView.dataSource = new Smart.DataAdapter(
        {
            dataSource: generateData(50),
            dataFields:
                [
                    'firstName: string',
                    'lastName: string',
                    'birthday: date',
                    'country: string',
                    'attachments: string'
                ]
        });
    cardView.columns = [
        { label: 'First Name', dataField: 'firstName', icon: 'firstName' },
        { label: 'Last Name', dataField: 'lastName', icon: 'lastName' },
        { label: 'Birthday', dataField: 'birthday', icon: 'birthday', formatSettings: { formatString: 'd' } },
        { label: 'Country', dataField: 'country', icon: 'country' },
        { label: 'Attachments', dataField: 'attachments', image: true }
    ];
    cardView.coverField = 'attachments';
    cardView.titleField = 'firstName';
    
  • Import a module, Init on Demand

    The following imports the web component's module and creates it on demand, when the document is ready. The #cardView is a DIV tag.

    import { smartCardView } from "../../source/modules/smart.cardview.js";
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() {
        const cardView = new smartCardView('#cardView', {
            dataSource: new Smart.DataAdapter(
                {
                    dataSource: generateData(50),
                    dataFields:
                        [
                            'firstName: string',
                            'lastName: string',
                            'birthday: date',
                            'country: string',
                            'attachments: string'
                        ]
                }),
            columns: [
                { label: 'First Name', dataField: 'firstName', icon: 'firstName' },
                { label: 'Last Name', dataField: 'lastName', icon: 'lastName' },
                { label: 'Birthday', dataField: 'birthday', icon: 'birthday', formatSettings: { formatString: 'd' } },
                { label: 'Country', dataField: 'country', icon: 'country' },
                { label: 'Attachments', dataField: 'attachments', image: true }
            ],
            coverField: 'attachments',
            titleField: 'firstName'
        });
    }
    
  • Load scripts

    The following code adds the custom element to the page.

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href=../../source/styles/smart.default.css" type="text/css" />
        <script type="text/javascript" src="../../source/smart.element.js"></script>
        <script type="text/javascript" src="../../source/smart.button.js"></script>
        <script type="text/javascript" src="../../source/smart.card.js"></script>
        <script type="text/javascript" src="../../source/smart.carousel.js"></script>
        <script type="text/javascript" src="../../source/smart.checkbox.js"></script>
        <script type="text/javascript" src="../../source/smart.sortable.js"></script>
        <script type="text/javascript" src="../../source/smart.date.js"></script>
        <script type="text/javascript" src="../../source/smart.draw.js"></script>
        <script type="text/javascript" src="../../source/smart.math.js"></script>
        <script type="text/javascript" src="../../source/smart.numeric.js"></script>
        <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script>
        <script type="text/javascript" src="../../source/smart.listbox.js"></script>
        <script type="text/javascript" src="../../source/smart.tooltip.js"></script>
        <script type="text/javascript" src="../../source/smart.calendar.js"></script>
        <script type="text/javascript" src="../../source/smart.timepicker.js"></script>
        <script type="text/javascript" src="../../source/smart.datetimepicker.js"></script>
        <script type="text/javascript" src="../../source/smart.filter.js"></script>
        <script type="text/javascript" src="../../source/smart.input.js"></script>
        <script type="text/javascript" src="../../source/smart.complex.js"></script>
        <script type="text/javascript" src="../../source/smart.numerictextbox.js"></script>
        <script type="text/javascript" src="../../source/smart.gridpanel.js"></script>
        <script type="text/javascript" src="../../source/smart.data.js"></script>
        <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
        <script type="text/javascript" src="../../source/smart.switchbutton.js"></script>
        <script type="text/javascript" src="../../source/smart.window.js"></script>
        <script type="text/javascript" src="../../source/smart.cardview.js"></script>
    </head>
    <body>
        <smart-card-view></smart-card-view>
    </body>
    </html>
    

    Note how smart.element.js is declared before everything else. This is mandatory for all custom elements.

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const cardView = document.createElement('smart-card-view');

Append it to the DOM:
document.body.appendChild(cardView);

Remove it from the DOM:
cardView.parentNode.removeChild(cardView);

Set a property:
cardView.propertyName = propertyValue;

Get a property value:
const propertyValue = cardView.propertyName;

Invoke a method:
cardView.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

cardView.addEventListener(eventName, eventHandler);

Remove Event Listener:
cardView.removeEventListener(eventName, eventHandler, true);

Cover and Title Fields

Smart.CardView displays the data passed to the dataSource property from the data fields present in the columns property/array. Some data fields can be highlighted in the form of card cover and title by setting the properties coverField and titleField respectively.

To be able to set a data field as a coverField, its respective column entry must have image set to true. The expected value of an "image" data field is a string that represent a list of image URLs, e.g.: "../../images/travel/34.jpg, ../../images/travel/17.jpg, ../../images/travel/1.jpg". The size of images in the cards' cover carousel can be set via the property coverMode to 'crop' or 'fit'.

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href=../../source/styles/smart.default.css" />
    <script type="text/javascript" src="../../source/smart.element.js"></script>
    <script type="text/javascript" src="../../source/smart.button.js"></script>
    <script type="text/javascript" src="../../source/smart.card.js"></script>
    <script type="text/javascript" src="../../source/smart.carousel.js"></script>
    <script type="text/javascript" src="../../source/smart.checkbox.js"></script>
    <script type="text/javascript" src="../../source/smart.sortable.js"></script>
    <script type="text/javascript" src="../../source/smart.date.js"></script>
    <script type="text/javascript" src="../../source/smart.draw.js"></script>
    <script type="text/javascript" src="../../source/smart.math.js"></script>
    <script type="text/javascript" src="../../source/smart.numeric.js"></script>
    <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script>
    <script type="text/javascript" src="../../source/smart.listbox.js"></script>
    <script type="text/javascript" src="../../source/smart.tooltip.js"></script>
    <script type="text/javascript" src="../../source/smart.calendar.js"></script>
    <script type="text/javascript" src="../../source/smart.timepicker.js"></script>
    <script type="text/javascript" src="../../source/smart.datetimepicker.js"></script>
    <script type="text/javascript" src="../../source/smart.filter.js"></script>
    <script type="text/javascript" src="../../source/smart.input.js"></script>
    <script type="text/javascript" src="../../source/smart.complex.js"></script>
    <script type="text/javascript" src="../../source/smart.numerictextbox.js"></script>
    <script type="text/javascript" src="../../source/smart.gridpanel.js"></script>
    <script type="text/javascript" src="../../source/smart.data.js"></script>
    <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
    <script type="text/javascript" src="../../source/smart.switchbutton.js"></script>
    <script type="text/javascript" src="../../source/smart.window.js"></script>
    <script type="text/javascript" src="../../source/smart.cardview.js"></script>
    <script type="text/javascript" src="../../source/smart.tickintervalhandler.js"></script>
    <script type="text/javascript" src="../../source/smart.tank.js"></script>
    <script type="text/javascript" src="../../source/smart.slider.js"></script>
    <script type="text/javascript">
        function generateData(length) {
            const sampleData = [],
                firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'],
                lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'],
                countries = ['Bulgaria', 'USA', 'UK', 'Singapore', 'Thailand', 'Russia', 'China', 'Belize'];

            for (let i = 0; i < length; i++) {
                const row = {};

                row.firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
                row.lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
                row.birthday = new Date(Math.round(Math.random() * (2018 - 1918) + 1918), Math.round(Math.random() * 11), Math.round(Math.random() * (31 - 1) + 1));
                row.country = countries[Math.floor(Math.random() * countries.length)];
                row.attachments = [`../../images/travel/${Math.floor(Math.random() * 36) + 1}.jpg, ../../ images / travel / ${Math.floor(Math.random() * 36) + 1}.jpg`];

                sampleData[i] = row;
            }

            return sampleData;
        }

        Smart('#cardView', class {
            get properties() {
                return {
                    dataSource: new Smart.DataAdapter(
                        {
                            dataSource: generateData(50),
                            dataFields:
                                [
                                    'firstName: string',
                                    'lastName: string',
                                    'birthday: date',
                                    'country: string',
                                    'attachments: string'
                                ]
                        }),
                    columns: [
                        { label: 'First Name', dataField: 'firstName', icon: 'firstName' },
                        { label: 'Last Name', dataField: 'lastName', icon: 'lastName' },
                        { label: 'Birthday', dataField: 'birthday', icon: 'birthday', formatSettings: { formatString: 'd' } },
                        { label: 'Country', dataField: 'country', icon: 'country' },
                        { label: 'Attachments', dataField: 'attachments', image: true }
                    ],
                    coverField: 'attachments',
                    titleField: 'firstName'
                };
            }
        });
    </script>
</head>
<body>
    <smart-card-view id="cardView"></smart-card-view>
</body>
</html>

Demo

Resizing

Smart.CardView is built upon the CSS Grid Layout technology which allows the component to seemlessly resize and recalculate the necessary number of cards per row. This makes CardView particularly useful when viewed on mobile devices.

Editing

When the property editable is set to true, card data can be modified in an edit dialog. Editor elements are dynamically created based on dataSource and columns settings. The edit dialog also allows directly navigating to other cards by pressing the "Previous record" and "Next record" buttons in its header.

Demo

Customization, Filtering, Sorting, and Searching

When the CardView header is enabled (headerPosition is set to 'top' or 'bottom'), four buttons for card customization become available:

  1. "Customize cards" - allows changing the cover field, the cover crop mode, reordering columns, and toggling their visibility.
  2. "Filter" - allows filtering the CardView data by multiple data fields and criteria.
  3. "Sort" - allows sorting the CardView data by multiple data fields.
  4. Search icon - allows searching and highlighting items that contain specified keywords.

Collapsible Cards

By enabling the collapsible option, cards can be collapsed and expanded by clicking the arrow next to the card's title.

Demo

Scrolling

Smart.CardView offers four scrolling modes (configurable through the property scrolling):

  • 'physical' - default scrolling.
  • 'deferred' - when scrolling, view is not updated until the scrollbar's thumb is released.
  • 'virtual' - server-bound scrolling. Loads records on demand when the element is scrolled to their position.
  • 'infinite' - server-bound scrolling. Loads only some records initially. Additional records are dynamically loaded when the scrollbar reaches the bottom of the element.

Dragging Cards

When the property allowDrag is set to true, cards can be reordered by dragging and dropping.

Demo

Methods

Smart.CardView has the following methods:

  • addFilter(filters, operator) - adds filtering.
  • addRecord(recordId, data,position) - adds a new record.
  • addSort(dataFields, orderBy) - adds sorting.
  • beginEdit(recordId) - begins an edit operation.
  • cancelEdit() - ends the current edit operation and discards changes.
  • closePanel() - closes any open header panel (drop down).
  • endEdit() - ends the current edit operation and saves changes.
  • ensureVisible(recordId) - makes sure a record is visible by scrolling to it.
  • hideColumn(dataField) - hides a column.
  • openCustomizePanel() - opens the "Customize cards" header panel (drop down).
  • openFilterPanel() - opens the "Filter" header panel (drop down).
  • openSortPanel() - opens the "Sort" header panel (drop down).
  • removeFilter() - removes filtering.
  • removeRecord(recordId) - removes a record.
  • removeSort() - removes sorting.
  • showColumn(dataField) - shows a column.