CardView — Smart UI JavaScript API

CardView — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CardView - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-card-view id="demo-cardview"></smart-card-view>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.cardview.js';

    const el = document.getElementById('demo-cardview');
    if (el) {

      el.columns = [
        { label: 'Name', dataField: 'name' },
        { label: 'Role', dataField: 'role' },
        { label: 'Email', dataField: 'email' }
      ];
      el.dataSource = [
        { name: 'Nancy Davolio', role: 'Manager', email: 'nancy@northwind.test' },
        { name: 'Andrew Fuller', role: 'Developer', email: 'andrew@northwind.test' }
      ];
      el.titleField = 'name';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: CardView   Framework: JavaScript   Selector: smart-card-view

API counts: 20 properties, 18 methods, 9 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: addFilter(), addRecord(), addSort(), beginEdit(), cancelEdit(), closePanel()

Common events: filter, sort, open, opening, close, closing

Module hint: smart-webcomponents/source/modules/smart.cardview.js

CardView creates Card-based layout. Supports Filtering, Sorting, Grouping, Editing and UI Virtualization.

Class

CardView

CardView

CardView creates Card-based layout. Supports Filtering, Sorting, Grouping, Editing and UI Virtualization.

Selector

smart-card-view

Quick picks

columnsdataSource

Properties

AaddNewButtonControls the visibility and functionality of the button used to add new cards to the interface. When enabled, users can click the button to create and add additional cards; when disabled, the button is hidden or inactive, preventing new card additions.
AallowDragEnables users to rearrange the order of cards within the interface by clicking and dragging individual cards to new positions. This drag-and-drop functionality provides an intuitive way to customize the card sequence.
AanimationSpecifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Setting it to other valid values enables the corresponding animation behavior.
CcardHeightSpecifies the height value assigned to each card component, determining how tall each card will appear within the user interface.
CcellOrientationSpecifies the layout direction of the card cells, determining whether they are arranged horizontally (side by side) or vertically (stacked one above the other) within the container. This setting controls the visual organization of the cards.
CcollapsibleEnables users to expand or collapse the card’s content, allowing for a more compact view when the content is hidden and revealing additional details when expanded.
CcolumnsSpecifies the configuration properties for table columns: label — Defines the display name or header text for the column as shown in the user interface. dataField — Specifies the key or property name in the data source that this column should display. icon — Allows you to assign an icon (e.g., as a URL or icon class) to be displayed in the column header or alongside cell values. formatSettings — Provides formatting options for the column's values, such as date/time formats, number precision, or custom display rules. formatFunction — Accepts a callback function to apply custom transformations or styling to the column's cell values before rendering. Click for more details. Property object's options:
  • dataField:string - Sets or gets the column's data source bound field.
  • dataType:string - Sets or gets the column's data type.
  • icon:any - Sets or gets the column's icon. Expects CSS class name.
  • image:boolean - Sets or gets the column's image visibility.
  • label:string - Sets or gets the text displayed in the column's header.
  • visible:boolean - Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
  • formatFunction:{ (settings: { template?: string, column?: any, record?: any, value?: any }): any } - Sets or gets the column's format function.
  • formatSettings:any - Sets or gets the column's format settings. You can use any of the build in formatting options or to NumberFormat object like that: 'Intl: { NumberFormat: { style: \'currency\', currency: \'EUR\' }}' or DateTimeFormat object like that: 'Intl: { DateTimeFormat: { dateStyle: \'full\' }}''
    • Property object's options:
    CcoverFieldSpecifies the data field that should be used as the cover image or primary visual representation for the item.
    CcoverModeProvides detailed information about the 'cover image fit' property, which defines how a cover image is resized or scaled to fit within its container. This property determines whether the image should fill, contain, cover, or be otherwise adjusted to cover the allotted space, often corresponding to CSS 'object-fit' values such as 'cover', 'contain', or 'fill'.
    DdataSourceSpecifies the origin or endpoint from which the item's data is retrieved for display within the card component. This property defines where the card fetches its content, such as a local data object, a remote API, or a database, ensuring the card displays up-to-date and relevant information.
    DdataSourceSettingsConfigures the grid's data source options, specifying how data should be loaded and managed when the dataSource property is assigned either an array of data objects or a remote data endpoint (URL). This includes settings for data retrieval, formatting, paging, sorting, and other data-related behaviors. Click for more details. Property object's options:
    • autoGenerateColumns:boolean - Sets or gets whether a column will be auto-generated.
    • childrenDataField:string - Sets or gets a children data field like 'children', 'items' in the data source. When this property is set, the dataAdapter will look for this data field when looping through the items. If it is found a hierarchical data source would be created.
    • root:string - Sets or gets the XML binding root.
    • sanitizeHTML:string - Sets or gets the XML binding root.
    • record:string - Sets or gets the XML binding record.
    • groupBy:string[] - Sets or gets the data fields to group by.
    • dataFields:{name: string, dataType: string}[] | string[] - Sets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string']
      • Property object's options:
      • name:string - Sets the dataField name.
      • map:string - Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.
      • dataType:string - Sets the dataField type.
    • dataSourceType:string - Sets or gets whether the data source type.
    • id:string - Sets or gets the dataAdapter's id
    • keyDataField:string - Sets or gets the key data field to be used for building the hierarchy. It is used in combination with the parentDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'
    • parentDataField:string - Sets or gets the parent data field to be used for building the hierarchy. It is used in combination with the keyDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'
    • mapChar:string - Sets the 'mapChar' data field of the record
    • virtualDataSource:any - Sets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.
    • virtualDataSourceOnExpand:any - Sets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, too
    EeditableEnables the functionality for users to edit the content of individual cards. When this option is active, users can modify card details such as titles, descriptions, and other editable fields directly within the card interface.
    HheaderPositionSets or retrieves the position of the header section within the component. The header typically includes interactive elements such as the Customize, Filter, Sort, and Search buttons, allowing users to tailor the content display, apply filters, change sorting options, and perform searches.
    LlocaleSets or retrieves the current locale (language and regional settings) to be used by the component. This is typically used together with the messages property, which provides localized text or translations for different locales. By specifying the locale, the component displays messages, labels, and other text elements in the appropriate language and format.
    MmessagesDefines or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages. This property works in conjunction with the locale property to enable localization, so you can provide translations for various UI elements based on the user's selected language or region. Use this option to specify or override default widget labels and messages for internationalization purposes.
    RrightToLeftDetermines or retrieves whether the element’s text direction is set to right-to-left (RTL), allowing proper alignment and rendering for languages and locales that use RTL scripts (such as Arabic or Hebrew). This ensures the element displays content correctly for users in RTL language environments.
    SscrollingProvides detailed configuration for how the element responds to user scrolling actions, specifying whether content scrolls automatically, remains stationary, or follows other predefined scrolling behaviors.
    TthemeSpecifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, spacing, and style variations, ensuring a consistent and cohesive look for the element within the user interface.
    TtitleFieldSpecifies the data field that should be used as the title, typically for labeling or displaying the main identifier of an item.
    UunlockKeySets or retrieves the unlockKey value, a unique key required to unlock and gain access to the product's full features or content. Use this property to assign a new unlock key or to obtain the current key in use.
    columns.dataField
    columns.dataType
    columns.formatFunction
    columns.formatSettings
    columns.icon
    columns.image
    columns.label
    columns.visible
    dataSourceSettings.autoGenerateColumns
    dataSourceSettings.childrenDataField
    dataSourceSettings.dataFields
    dataSourceSettings.dataSourceType
    dataSourceSettings.groupBy
    dataSourceSettings.id
    dataSourceSettings.keyDataField
    dataSourceSettings.mapChar
    dataSourceSettings.parentDataField
    dataSourceSettings.record
    dataSourceSettings.root
    dataSourceSettings.sanitizeHTML
    dataSourceSettings.virtualDataSource
    dataSourceSettings.virtualDataSourceOnExpand
    dataSourceSettings.dataFields.dataType
    dataSourceSettings.dataFields.map
    dataSourceSettings.dataFields.name

    Events

    CcloseThis event is triggered immediately when the window is closed by the user or programmatically, allowing scripts to execute any necessary cleanup operations or final actions before the window is terminated.
    CclosingThis event is triggered just before the window begins the closing process. It gives developers an opportunity to perform actions or prompt the user before the window actually closes. If you want to prevent the window from closing—for example, to confirm with the user or save data—you can call event.preventDefault() inside the event handler function. This will cancel the default close operation and keep the window open.
    DdragEndThis event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button (or touching and holding on a touchscreen) and then moving the card to a different position within the interface.
    DdraggingThis event is triggered continuously while the user is actively dragging the card element with their cursor or finger, allowing you to track the card's position and respond to movement in real time.
    DdragStartThis event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button or starting a touch gesture. It signals the beginning of the card's movement, allowing developers to implement custom behavior such as visual feedback or updating drag-related state.
    FfilterThis event is triggered whenever a user applies a filter to the data set, typically by selecting filter criteria or options in the interface. It signals that the displayed data has been updated based on the chosen filter parameters, allowing developers to execute additional logic in response, such as refreshing the view or fetching new data.
    OopenThis event is triggered immediately after the window has been successfully opened, allowing you to execute code in response to the window becoming visible and accessible to the user. It is typically used to initialize resources, update the user interface, or perform actions that should occur as soon as the window appears.
    OopeningThis event is fired just before the window is opened, giving you an opportunity to perform additional logic or checks. To prevent the window from opening, call event.preventDefault() within your event handler. If preventDefault() is not called, the window will open as usual. This allows you to control whether or not the window opening operation proceeds based on your custom criteria.
    SsortThis event is triggered whenever a sorting action is performed on the data set, such as when a user updates the sorting order of a table or list by clicking on a column header or selecting a sort option.

    Methods

    AaddFilterEnables advanced filtering functionality, allowing users to refine and display data based on specific criteria such as category, date range, status, or custom attributes. This feature improves data navigation and helps users quickly locate relevant information.
    AaddRecordCreates and inserts a new record into the database or data collection, initializing all required fields with the provided values.
    AaddSortEnables sorting functionality, allowing users to arrange data in ascending or descending order based on specified fields or columns. This feature enhances the user experience by making it easier to organize, locate, and analyze information within lists or tables.
    BbeginEditInitiates an edit transaction, allowing changes to be made to the data. This operation typically marks the start of a sequence where modifications can be performed, and may require committing or canceling the changes to finalize or discard the edits.
    CcancelEditTerminates the ongoing edit session and reverts any unsaved changes, ensuring that all modifications made during the current operation are discarded and the original state is restored.
    CclosePanelCloses any currently open header panel, such as a dropdown menu or navigation panel, ensuring that all header-related overlays are hidden from view.
    EendEditFinalizes the current editing session by committing all modifications made and persisting the changes to the data source or storage.
    EensureVisibleEnsures that a specified record is brought into view by automatically scrolling to its position on the page. If the operation is successful, the method returns the HTML element representing the card associated with that record, allowing for further manipulation or interaction within the DOM.
    OopenCustomizePanelOpens the "Customize Cards" dropdown panel, allowing users to access and modify card display settings.
    OopenFilterPanelDisplays the "Filter" header panel as a drop-down menu, allowing users to view and select filtering options for the current data set.
    OopenSortPanelDisplays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the current data view.
    RremoveFilterRemoves any active filters, displaying the full, unfiltered dataset.
    RremoveRecordDeletes a specific record from the database or data collection, permanently removing all associated data for that entry.
    RremoveSortDisables any active sorting on the data, reverting the items to their original order.
    SsetFilterEnhances and applies custom filter criteria to a specific column within the cardview. Accepts both single and multiple filter expressions, allowing for complex filtering logic using logical operators such as "and" and "or". For example, to filter the "lastName" column for values that contain either "burke" or "peterson", use: `cardview.setFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. The method also supports numeric filters (e.g., `GREATER_THAN 100`), a variety of comparison operators (such as `EQUALS`, `LESS_THAN`, `STARTS_WITH`, etc.), and can be used to combine different conditions for precise data selection.
    SsetLocaleSets the locale of a component.
    SshowColumnDisplays a single vertical column within the layout, typically used to organize content or interface elements in a structured manner. This column can contain text, images, or other components, and its appearance (such as width, alignment, and styling) can be customized through additional properties or CSS classes.
    SsortByApplies sorting to the CardView based on the specified data field. You can either add sorting by providing a valid sortOrder (such as 'asc' or 'desc'), or remove sorting from a column by setting the sortOrder parameter to null. This allows dynamic adjustment of CardView sorting criteria, enabling users to sort data as needed or clear sorting on individual columns.

    Properties

    addNewButtonControls the visibility and functionality of the button used to add new cards to the interface. When enabled, users can click the button to create and add additional cards; when disabled, the button is hidden or inactive, preventing new card additions.boolean

    Controls the visibility and functionality of the button used to add new cards to the interface. When enabled, users can click the button to create and add additional cards; when disabled, the button is hidden or inactive, preventing new card additions.

    Default value

    false
    Try a demo showcasing the addNewButton property.

    Examples

    Markup and runtime examples for addNewButton:

    HTML attribute:

    <smart-card-view add-new-button></smart-card-view>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-card-view');
el.addNewButton = false;

    Read the current value:

    const el = document.querySelector('smart-card-view');
const addNewButton = el.addNewButton;

    allowDragEnables users to rearrange the order of cards within the interface by clicking and dragging individual cards to new positions. This drag-and-drop functionality provides an intuitive way to customize the card sequence.boolean

    Enables users to rearrange the order of cards within the interface by clicking and dragging individual cards to new positions. This drag-and-drop functionality provides an intuitive way to customize the card sequence.

    Default value

    false
    Try a demo showcasing the allowDrag property.

    Examples

    Markup and runtime examples for allowDrag:

    HTML attribute:

    <smart-card-view allow-drag></smart-card-view>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-card-view');
el.allowDrag = false;

    Read the current value:

    const el = document.querySelector('smart-card-view');
const allowDrag = el.allowDrag;

    animationSpecifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Setting it to other valid values enables the corresponding animation behavior."none" | "simple" | "advanced"

    Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Setting it to other valid values enables the corresponding animation behavior.

    Allowed Values

    • "none" - animation is disabled
    • "simple" - ripple animation is disabled
    • "advanced" - all animations are enabled

    Default value

    "advanced"

    Examples

    Markup and runtime examples for animation:

    HTML:

    <smart-card-view animation="none"></smart-card-view>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-card-view');
el.animation = "simple";

    Read the current value:

    const el = document.querySelector('smart-card-view');
const animation = el.animation;

    cardHeightSpecifies the height value assigned to each card component, determining how tall each card will appear within the user interface.number | null

    Specifies the height value assigned to each card component, determining how tall each card will appear within the user interface.

    Full working example

    Minimal setup for cardHeight with the data and bindings you usually use together on this component.

    JavaScript — CardView with cardHeight:

    const dataSource = [
	{ name: 'Alpha card', description: 'First record', image: '' },
	{ name: 'Beta card', description: 'Second record', image: '' }
];

const columns = [
	{ label: 'Title', dataField: 'name' },
	{ label: 'Summary', dataField: 'description' }
];

const cards = new Smart.CardView('#myCards', {
	dataSource,
	columns,
	cardHeight: 220
});

    cellOrientationSpecifies the layout direction of the card cells, determining whether they are arranged horizontally (side by side) or vertically (stacked one above the other) within the container. This setting controls the visual organization of the cards."horizontal" | "vertical"

    Specifies the layout direction of the card cells, determining whether they are arranged horizontally (side by side) or vertically (stacked one above the other) within the container. This setting controls the visual organization of the cards.

    Default value

    "vertical"
    Try a demo showcasing the cellOrientation property.

    Full working example

    Minimal setup for cellOrientation with the data and bindings you usually use together on this component.

    JavaScript — CardView with cellOrientation:

    const dataSource = [
	{ name: 'Alpha card', description: 'First record', image: '' },
	{ name: 'Beta card', description: 'Second record', image: '' }
];

const columns = [
	{ label: 'Title', dataField: 'name' },
	{ label: 'Summary', dataField: 'description' }
];

const cards = new Smart.CardView('#myCards', {
	dataSource,
	columns,
	cellOrientation: 'horizontal'
});

    collapsibleEnables users to expand or collapse the card’s content, allowing for a more compact view when the content is hidden and revealing additional details when expanded.boolean

    Enables users to expand or collapse the card’s content, allowing for a more compact view when the content is hidden and revealing additional details when expanded.

    Default value

    false
    Try a demo showcasing the collapsible property.

    Examples

    Markup and runtime examples for collapsible:

    HTML attribute:

    <smart-card-view collapsible></smart-card-view>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-card-view');
el.collapsible = false;

    Read the current value:

    const el = document.querySelector('smart-card-view');
const collapsible = el.collapsible;

    columnsSpecifies the configuration properties for table columns: label — Defines the display name or header text for the column as shown in the user interface. dataField — Specifies the key or property name in the data source that this column should display. icon — Allows you to assign an icon (e.g., as a URL or icon class) to be displayed in the column header or alongside cell values. formatSettings — Provides formatting options for the column's values, such as date/time formats, number precision, or custom display rules. formatFunction — Accepts a callback function to apply custom transformations or styling to the column's cell values before rendering. Click for more details. Property object's options:
      {label?: string, dataField?: string, icon?: string, visible?: boolean, image?: boolean, formatSettings?: {formatString: string}, formatFunction?: (settings: {template?: string, column?: any, record?: any, value?:any}) => void}[]

      Specifies the configuration properties for table columns:



      label — Defines the display name or header text for the column as shown in the user interface.


      dataField — Specifies the key or property name in the data source that this column should display.


      icon — Allows you to assign an icon (e.g., as a URL or icon class) to be displayed in the column header or alongside cell values.


      formatSettings — Provides formatting options for the column's values, such as date/time formats, number precision, or custom display rules.


      formatFunction — Accepts a callback function to apply custom transformations or styling to the column's cell values before rendering.

      Properties

      dataFieldSets or gets the column's data source bound field.
      dataTypeSets or gets the column's data type.
      iconSets or gets the column's icon. Expects CSS class name.
      imageSets or gets the column's image visibility.
      labelSets or gets the text displayed in the column's header.
      visibleSets or gets whether the column is visible. Set the property to 'false' to hide the column.
      formatFunctionSets or gets the column's format function.
      formatSettingsSets or gets the column's format settings. You can use any of the build in formatting options or to NumberFormat object like that: 'Intl: { NumberFormat: { style: \'currency\', currency: \'EUR\' }}' or DateTimeFormat object like that: 'Intl: { DateTimeFormat: { dateStyle: \'full\' }}'' Click for more details. Property object's options:
        Try a demo showcasing the columns property.

        Full working example

        Minimal setup for columns with the data and bindings you usually use together on this component.

        JavaScript — CardView with columns:

        const dataSource = [
	{ name: 'Alpha card', description: 'First record', image: '' },
	{ name: 'Beta card', description: 'Second record', image: '' }
];

const columns = [
	{ label: 'Title', dataField: 'name' },
	{ label: 'Summary', dataField: 'description' }
];

const cards = new Smart.CardView('#myCards', {
	dataSource,
	columns
});

        dataFieldSets or gets the column's data source bound field.string

        Sets or gets the column's data source bound field.

        Default value

        ""

        Back to root property: columns

        Try a demo showcasing the dataField property.

        Read the nested value:

        const el = document.querySelector('smart-card-view');
const dataField = el.columns[0].dataField;

        dataTypeSets or gets the column's data type."string" | "date" | "boolean" | "number" | "array" | "any"

        Sets or gets the column's data type.

        Default value

        "string"

        Back to root property: columns

        Read the nested value:

        const el = document.querySelector('smart-card-view');
const dataType = el.columns[0].dataType;

        formatFunctionSets or gets the column's format function.{ (settings: { template?: string, column?: any, record?: any, value?: any }): any }

        Sets or gets the column's format function.

        Back to root property: columns

        Try a demo showcasing the formatFunction property.

        Read the nested value:

        const el = document.querySelector('smart-card-view');
const formatFunction = el.columns[0].formatFunction;

        formatSettingsSets or gets the column's format settings. You can use any of the build in formatting options or to NumberFormat object like that: 'Intl: { NumberFormat: { style: \'currency\', currency: \'EUR\' }}' or DateTimeFormat object like that: 'Intl: { DateTimeFormat: { dateStyle: \'full\' }}'' Click for more details. Property object's options:
          any

          Sets or gets the column's format settings. You can use any of the build in formatting options or to NumberFormat object like that: 'Intl: { NumberFormat: { style: \'currency\', currency: \'EUR\' }}' or DateTimeFormat object like that: 'Intl: { DateTimeFormat: { dateStyle: \'full\' }}''



          The formatSettings property's object value may have the following properties:
          • decimalPlaces: number - Sets the decimal places.
          • negativeWithBrackets: boolean - Sets the negativeWithBrackets property. Displays brackets around negative numbers
          • prefix: string - Sets the prefix of the formatted value.
          • sufix: string - Sets the sufix of the formatted value.
          • thousandsSeparator: number - Sets the thousands separator.
          • dateFormat: string - Sets the date format string.

          Back to root property: columns

          Try a demo showcasing the formatSettings property.

          Read the nested value:

          const el = document.querySelector('smart-card-view');
const formatSettings = el.columns[0].formatSettings;

          iconSets or gets the column's icon. Expects CSS class name.any

          Sets or gets the column's icon. Expects CSS class name.

          Default value

          ""

          Back to root property: columns

          Try a demo showcasing the icon property.

          Read the nested value:

          const el = document.querySelector('smart-card-view');
const icon = el.columns[0].icon;

          imageSets or gets the column's image visibility.boolean

          Sets or gets the column's image visibility.

          Default value

          false

          Back to root property: columns

          Try a demo showcasing the image property.

          Read the nested value:

          const el = document.querySelector('smart-card-view');
const image = el.columns[0].image;

          labelSets or gets the text displayed in the column's header.string

          Sets or gets the text displayed in the column's header.

          Default value

          ""

          Back to root property: columns

          Try a demo showcasing the label property.

          Read the nested value:

          const el = document.querySelector('smart-card-view');
const label = el.columns[0].label;

          visibleSets or gets whether the column is visible. Set the property to 'false' to hide the column.boolean

          Sets or gets whether the column is visible. Set the property to 'false' to hide the column.

          Default value

          true

          Back to root property: columns

          Read the nested value:

          const el = document.querySelector('smart-card-view');
const visible = el.columns[0].visible;

          coverFieldSpecifies the data field that should be used as the cover image or primary visual representation for the item.string

          Specifies the data field that should be used as the cover image or primary visual representation for the item.

          Default value

          "''"
          Try a demo showcasing the coverField property.

          Full working example

          Minimal setup for coverField with the data and bindings you usually use together on this component.

          JavaScript — CardView with coverField:

          const dataSource = [
	{ name: 'Alpha card', description: 'First record', image: '' },
	{ name: 'Beta card', description: 'Second record', image: '' }
];

const columns = [
	{ label: 'Title', dataField: 'name' },
	{ label: 'Summary', dataField: 'description' }
];

const cards = new Smart.CardView('#myCards', {
	dataSource,
	columns,
	coverField: 'image'
});

          coverModeProvides detailed information about the 'cover image fit' property, which defines how a cover image is resized or scaled to fit within its container. This property determines whether the image should fill, contain, cover, or be otherwise adjusted to cover the allotted space, often corresponding to CSS 'object-fit' values such as 'cover', 'contain', or 'fill'."fit" | "crop"

          Provides detailed information about the 'cover image fit' property, which defines how a cover image is resized or scaled to fit within its container. This property determines whether the image should fill, contain, cover, or be otherwise adjusted to cover the allotted space, often corresponding to CSS 'object-fit' values such as 'cover', 'contain', or 'fill'.

          Default value

          "crop"
          Try a demo showcasing the coverMode property.

          Examples

          Markup and runtime examples for coverMode:

          HTML:

          <smart-card-view cover-mode="crop"></smart-card-view>

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-card-view');
el.coverMode = "fit";

          Read the current value:

          const el = document.querySelector('smart-card-view');
const coverMode = el.coverMode;

          dataSourceSpecifies the origin or endpoint from which the item's data is retrieved for display within the card component. This property defines where the card fetches its content, such as a local data object, a remote API, or a database, ensuring the card displays up-to-date and relevant information.object

          Specifies the origin or endpoint from which the item's data is retrieved for display within the card component. This property defines where the card fetches its content, such as a local data object, a remote API, or a database, ensuring the card displays up-to-date and relevant information.

          Try a demo showcasing the dataSource property.

          Full working example

          Minimal setup for dataSource with the data and bindings you usually use together on this component.

          JavaScript — CardView with dataSource:

          const dataSource = [
	{ name: 'Alpha card', description: 'First record', image: '' },
	{ name: 'Beta card', description: 'Second record', image: '' }
];

const columns = [
	{ label: 'Title', dataField: 'name' },
	{ label: 'Summary', dataField: 'description' }
];

const cards = new Smart.CardView('#myCards', {
	dataSource,
	columns
});

          dataSourceSettingsConfigures the grid's data source options, specifying how data should be loaded and managed when the dataSource property is assigned either an array of data objects or a remote data endpoint (URL). This includes settings for data retrieval, formatting, paging, sorting, and other data-related behaviors. Click for more details. Property object's options:
             object

            Configures the grid's data source options, specifying how data should be loaded and managed when the dataSource property is assigned either an array of data objects or a remote data endpoint (URL). This includes settings for data retrieval, formatting, paging, sorting, and other data-related behaviors.

            Properties

            autoGenerateColumnsSets or gets whether a column will be auto-generated.
            childrenDataFieldSets or gets a children data field like 'children', 'items' in the data source. When this property is set, the dataAdapter will look for this data field when looping through the items. If it is found a hierarchical data source would be created.
            rootSets or gets the XML binding root.
            sanitizeHTMLSets or gets the XML binding root.
            recordSets or gets the XML binding record.
            groupBySets or gets the data fields to group by.
            dataFieldsSets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string'] Click for more details. Property object's options:
            • name:string - Sets the dataField name.
            • map:string - Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.
            • dataType:string - Sets the dataField type.
            dataSourceTypeSets or gets whether the data source type.
            idSets or gets the dataAdapter's id
            keyDataFieldSets or gets the key data field to be used for building the hierarchy. It is used in combination with the parentDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'
            parentDataFieldSets or gets the parent data field to be used for building the hierarchy. It is used in combination with the keyDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'
            mapCharSets the 'mapChar' data field of the record
            virtualDataSourceSets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.
            virtualDataSourceOnExpandSets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, too
            Try a demo showcasing the dataSourceSettings property.

            autoGenerateColumnsSets or gets whether a column will be auto-generated.boolean

            Sets or gets whether a column will be auto-generated.

            Default value

            false

            Back to root property: dataSourceSettings

            Examples

            Set a nested field on the element:

            const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].autoGenerateColumns = false;

            Read the nested value:

            const el = document.querySelector('smart-card-view');
const autoGenerateColumns = el.dataSourceSettings[0].autoGenerateColumns;

            childrenDataFieldSets or gets a children data field like 'children', 'items' in the data source. When this property is set, the dataAdapter will look for this data field when looping through the items. If it is found a hierarchical data source would be created.string

            Sets or gets a children data field like 'children', 'items' in the data source. When this property is set, the dataAdapter will look for this data field when looping through the items. If it is found a hierarchical data source would be created.

            Default value

            ""

            Back to root property: dataSourceSettings

            Examples

            Set a nested field on the element:

            const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].childrenDataField = "children";

            Read the nested value:

            const el = document.querySelector('smart-card-view');
const childrenDataField = el.dataSourceSettings[0].childrenDataField;

            dataFieldsSets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string'] Click for more details. Property object's options:
              {name: string, dataType: string}[] | string[]

              Sets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string']

              Properties

              dataTypeSets the dataField type.
              mapSets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.
              nameSets the dataField name.

              Back to root property: dataSourceSettings

              Try a demo showcasing the dataFields property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].dataFields = [id: number];

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const dataFields = el.dataSourceSettings[0].dataFields;

              dataTypeSets the dataField type."string" | "date" | "boolean" | "number" | "array" | "any"

              Sets the dataField type.

              Default value

              "string"

              Back to root property: dataSourceSettings

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const dataType = el.dataSourceSettings[0].dataFields[0].dataType;

              mapSets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.string

              Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.

              Default value

              ""

              Back to root property: dataSourceSettings

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const map = el.dataSourceSettings[0].dataFields[0].map;

              nameSets the dataField name.string

              Sets the dataField name.

              Default value

              ""

              Back to root property: dataSourceSettings

              Try a demo showcasing the name property.

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const name = el.dataSourceSettings[0].dataFields[0].name;

              dataSourceTypeSets or gets whether the data source type."array" | "json" | "xml" | "csv" | "tsv"

              Sets or gets whether the data source type.

              Default value

              "array"

              Back to root property: dataSourceSettings

              Try a demo showcasing the dataSourceType property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].dataSourceType = "json";

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const dataSourceType = el.dataSourceSettings[0].dataSourceType;

              groupBySets or gets the data fields to group by.string[]

              Sets or gets the data fields to group by.

              Default value

              []

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].groupBy = true;

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const groupBy = el.dataSourceSettings[0].groupBy;

              idSets or gets the dataAdapter's idstring

              Sets or gets the dataAdapter's id

              Default value

              ""

              Back to root property: dataSourceSettings

              Try a demo showcasing the id property.

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const id = el.dataSourceSettings[0].id;

              keyDataFieldSets or gets the key data field to be used for building the hierarchy. It is used in combination with the parentDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'string

              Sets or gets the key data field to be used for building the hierarchy. It is used in combination with the parentDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'

              Default value

              ""

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].keyDataField = "uid";

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const keyDataField = el.dataSourceSettings[0].keyDataField;

              mapCharSets the 'mapChar' data field of the recordstring

              Sets the 'mapChar' data field of the record

              Default value

              "."

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].mapChar = "uid";

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const mapChar = el.dataSourceSettings[0].mapChar;

              parentDataFieldSets or gets the parent data field to be used for building the hierarchy. It is used in combination with the keyDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'string

              Sets or gets the parent data field to be used for building the hierarchy. It is used in combination with the keyDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'

              Default value

              ""

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].parentDataField = "uid";

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const parentDataField = el.dataSourceSettings[0].parentDataField;

              recordSets or gets the XML binding record.string

              Sets or gets the XML binding record.

              Default value

              ""

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].record = "children";

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const record = el.dataSourceSettings[0].record;

              rootSets or gets the XML binding root.string

              Sets or gets the XML binding root.

              Default value

              ""

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].root = "children";

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const root = el.dataSourceSettings[0].root;

              sanitizeHTMLSets or gets the XML binding root."all" | "blackList" | "none"

              Sets or gets the XML binding root.

              Default value

              "blackList"

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-card-view');
el.dataSourceSettings[0].sanitizeHTML = "blackList";

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const sanitizeHTML = el.dataSourceSettings[0].sanitizeHTML;

              virtualDataSourceSets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.any

              Sets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.

              Back to root property: dataSourceSettings

              Try a demo showcasing the virtualDataSource property.

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const virtualDataSource = el.dataSourceSettings[0].virtualDataSource;

              virtualDataSourceOnExpandSets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, tooany

              Sets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, too

              Back to root property: dataSourceSettings

              Read the nested value:

              const el = document.querySelector('smart-card-view');
const virtualDataSourceOnExpand = el.dataSourceSettings[0].virtualDataSourceOnExpand;

              editableEnables the functionality for users to edit the content of individual cards. When this option is active, users can modify card details such as titles, descriptions, and other editable fields directly within the card interface.boolean

              Enables the functionality for users to edit the content of individual cards. When this option is active, users can modify card details such as titles, descriptions, and other editable fields directly within the card interface.

              Default value

              false
              Try a demo showcasing the editable property.

              Examples

              Markup and runtime examples for editable:

              HTML attribute:

              <smart-card-view editable></smart-card-view>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-card-view');
el.editable = false;

              Read the current value:

              const el = document.querySelector('smart-card-view');
const editable = el.editable;

              headerPositionSets or retrieves the position of the header section within the component. The header typically includes interactive elements such as the Customize, Filter, Sort, and Search buttons, allowing users to tailor the content display, apply filters, change sorting options, and perform searches."none" | "top" | "bottom"

              Sets or retrieves the position of the header section within the component. The header typically includes interactive elements such as the Customize, Filter, Sort, and Search buttons, allowing users to tailor the content display, apply filters, change sorting options, and perform searches.

              Default value

              "none"
              Try a demo showcasing the headerPosition property.

              Full working example

              Minimal setup for headerPosition with the data and bindings you usually use together on this component.

              JavaScript — CardView with headerPosition:

              const dataSource = [
	{ name: 'Alpha card', description: 'First record', image: '' },
	{ name: 'Beta card', description: 'Second record', image: '' }
];

const columns = [
	{ label: 'Title', dataField: 'name' },
	{ label: 'Summary', dataField: 'description' }
];

const cards = new Smart.CardView('#myCards', {
	dataSource,
	columns,
	headerPosition: 'top'
});

              localeSets or retrieves the current locale (language and regional settings) to be used by the component. This is typically used together with the messages property, which provides localized text or translations for different locales. By specifying the locale, the component displays messages, labels, and other text elements in the appropriate language and format.string

              Sets or retrieves the current locale (language and regional settings) to be used by the component. This is typically used together with the messages property, which provides localized text or translations for different locales. By specifying the locale, the component displays messages, labels, and other text elements in the appropriate language and format.

              Default value

              "en"
              Try a demo showcasing the locale property.

              Examples

              Markup and runtime examples for locale:

              HTML:

              <smart-card-view locale="de"></smart-card-view>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-card-view');
el.locale = "fr";

              Read the current value:

              const el = document.querySelector('smart-card-view');
const locale = el.locale;

              messagesDefines or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages. This property works in conjunction with the locale property to enable localization, so you can provide translations for various UI elements based on the user's selected language or region. Use this option to specify or override default widget labels and messages for internationalization purposes.object

              Defines or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages. This property works in conjunction with the locale property to enable localization, so you can provide translations for various UI elements based on the user's selected language or region. Use this option to specify or override default widget labels and messages for internationalization purposes.

              Default value




              "en": {

              "addFilter": "+ Add filter",

              "addImage": "Add",

              "and": "And",

              "apply": "Apply",

              "booleanFirst": "☐",

              "booleanLast": "☑",

              "cancel": "Cancel",

              "CONTAINS": "contains",

              "CONTAINS_CASE_SENSITIVE": "contains (case sensitive)",

              "coverField": "Cover field",

              "crop": "Crop",

              "customizeCards": "Customize cards",

              "dateFirst": "1",

              "dateLast": "9",

              "dateTabLabel": "DATE",

              "DOES_NOT_CONTAIN": "does not contain",

              "DOES_NOT_CONTAIN_CASE_SENSITIVE": "does not contain (case sensitive)",

              "draggedRecord": "Record {{id}}",

              "EMPTY": "empty",

              "ENDS_WITH": "ends with",

              "ENDS_WITH_CASE_SENSITIVE": "ends with (case sensitive)",

              "EQUAL": "equal",

              "EQUAL_CASE_SENSITIVE": "equal (case sensitive)",

              "filter": "Filter",

              "filteredByMultiple": "{{n}} filters",

              "filteredByOne": "1 filter",

              "find": "Find a field",

              "findInView": "Find in view",

              "firstBy": "Sort by",

              "fit": "Fit",

              "found": "{{nth}} of {{n}}",

              "from": "from",

              "GREATER_THAN": "greater than",

              "GREATER_THAN_OR_EQUAL": "greater than or equal",

              "imageUrl": "New image URL:",

              "incorrectStructure": "'dataSource' must be an instance of Smart.DataAdapter or an array of objects with key-value pairs.",

              "LESS_THAN": "less than",

              "LESS_THAN_OR_EQUAL": "less than or equal",

              "nextRecord": "Next record",

              "noCoverField": "No cover field",

              "noData": "No data to display",

              "noFilters": "No filters applied",

              "noMatches": "No matched records",

              "noSorting": "No sorting applied",

              "noResults": "No results",

              "NOT_EMPTY": "not empty",

              "NOT_EQUAL": "not equal",

              "NOT_NULL": "not null",

              "now": "Now",

              "NULL": "null",

              "numberFirst": "1",

              "numberLast": "9",

              "ok": "OK",

              "or": "Or",

              "pickAnother": "Pick another field to sort by",

              "previousRecord": "Previous record",

              "removeImage": "Remove",

              "sort": "Sort",

              "sortedByMultiple": "Sorted by {{n}} fields",

              "sortedByOne": "Sorted by 1 field",

              "STARTS_WITH": "starts with",

              "STARTS_WITH_CASE_SENSITIVE": "starts with (case sensitive)",

              "stringFirst": "A",

              "stringLast": "Z",

              "thenBy": "then by",

              "timeTabLabel": "TIME",

              "toggleVisibility": "Toggle field visibility",

              "where": "Where"

              }

              Try a demo showcasing the messages property.

              Examples

              Markup and runtime examples for messages:

              HTML:

              <smart-card-view messages="{"en": {"addFilter": "+ Add filter","addImage": "Add","and": "And","apply": "Apply","cancel": "Cancel","CONTAINS": "contains","CONTAINS_CASE_SENSITIVE": "contains (case sensitive)","coverField": "Cover field","crop": "Crop","customizeCards": "Customize cards","dateFirst": "1","dateLast": "9","dateTabLabel": "DATE","DOES_NOT_CONTAIN": "does not contain","DOES_NOT_CONTAIN_CASE_SENSITIVE": "does not contain (case sensitive)","draggedRecord": "Record "{{id}}"","EMPTY": "empty","ENDS_WITH": "ends with","ENDS_WITH_CASE_SENSITIVE": "ends with (case sensitive)","EQUAL": "equal","EQUAL_CASE_SENSITIVE": "equal (case sensitive)","filter": "Filter","filteredByMultiple": ""{{n}}" filters","filteredByOne": "1 filter","find": "Find a field","findInView": "Find in view","firstBy": "Sort by","fit": "Fit","found": ""{{nth}}" of "{{n}}"","from": "from","GREATER_THAN": "greater than","GREATER_THAN_OR_EQUAL": "greater than or equal","imageUrl": "New image URL:","incorrectStructure": "dataSource" must be an instance of Smart.DataAdapter or an array of objects with key-value pairs.","LESS_THAN": "less than","LESS_THAN_OR_EQUAL": "less than or equal","nextRecord": "Next record","noCoverField": "No cover field","noData": "No data to display","noFilters": "No filters applied","noMatches": "No matched records","noSorting": "No sorting applied","noResults": "No results","NOT_EMPTY": "not empty","NOT_EQUAL": "not equal","NOT_NULL": "not null","now": "Now","NULL": "null","numberFirst": "1","numberLast": "9","ok": "OK","or": "Or","pickAnother": "Pick another field to sort by","previousRecord": "Previous record","removeImage": "Remove","sort": "Sort","sortedByMultiple": "Sorted by "{{n}}" fields","sortedByOne": "Sorted by 1 field","STARTS_WITH": "starts with","STARTS_WITH_CASE_SENSITIVE": "starts with (case sensitive)","stringFirst": "A","stringLast": "Z","thenBy": "then by","timeTabLabel": "TIME","toggleVisibility": "Toggle field visibility","where": "Where"}}"></smart-card-view>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-card-view');
el.messages = {"de": {"apply": "Anwenden","cancel": "Stornieren"}};

              Read the current value:

              const el = document.querySelector('smart-card-view');
const messages = el.messages;

              rightToLeftDetermines or retrieves whether the element’s text direction is set to right-to-left (RTL), allowing proper alignment and rendering for languages and locales that use RTL scripts (such as Arabic or Hebrew). This ensures the element displays content correctly for users in RTL language environments.boolean

              Determines or retrieves whether the element’s text direction is set to right-to-left (RTL), allowing proper alignment and rendering for languages and locales that use RTL scripts (such as Arabic or Hebrew). This ensures the element displays content correctly for users in RTL language environments.

              Default value

              false
              Try a demo showcasing the rightToLeft property.

              Examples

              Markup and runtime examples for rightToLeft:

              HTML attribute:

              <smart-card-view right-to-left></smart-card-view>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-card-view');
el.rightToLeft = true;

              Read the current value:

              const el = document.querySelector('smart-card-view');
const rightToLeft = el.rightToLeft;

              scrollingProvides detailed configuration for how the element responds to user scrolling actions, specifying whether content scrolls automatically, remains stationary, or follows other predefined scrolling behaviors."physical" | "virtual" | "infinite" | "deferred"

              Provides detailed configuration for how the element responds to user scrolling actions, specifying whether content scrolls automatically, remains stationary, or follows other predefined scrolling behaviors.

              Default value

              "physical"
              Try a demo showcasing the scrolling property.

              Examples

              Markup and runtime examples for scrolling:

              HTML:

              <smart-card-view scrolling="infinite"></smart-card-view>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-card-view');
el.scrolling = "deferred";

              Read the current value:

              const el = document.querySelector('smart-card-view');
const scrolling = el.scrolling;

              themeSpecifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, spacing, and style variations, ensuring a consistent and cohesive look for the element within the user interface.string

              Specifies the theme to be applied to the element. The selected theme controls the overall visual appearance, including colors, fonts, spacing, and style variations, ensuring a consistent and cohesive look for the element within the user interface.

              Default value

              ""

              Examples

              Markup and runtime examples for theme:

              HTML:

              <smart-card-view theme="blue"></smart-card-view>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-card-view');
el.theme = "red";

              Read the current value:

              const el = document.querySelector('smart-card-view');
const theme = el.theme;

              titleFieldSpecifies the data field that should be used as the title, typically for labeling or displaying the main identifier of an item.string

              Specifies the data field that should be used as the title, typically for labeling or displaying the main identifier of an item.

              Default value

              ""
              Try a demo showcasing the titleField property.

              Examples

              Markup and runtime examples for titleField:

              HTML:

              <smart-card-view title-field="firstName"></smart-card-view>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-card-view');
el.titleField = "lastName";

              Read the current value:

              const el = document.querySelector('smart-card-view');
const titleField = el.titleField;

              unlockKeySets or retrieves the unlockKey value, a unique key required to unlock and gain access to the product's full features or content. Use this property to assign a new unlock key or to obtain the current key in use.string

              Sets or retrieves the unlockKey value, a unique key required to unlock and gain access to the product's full features or content. Use this property to assign a new unlock key or to obtain the current key in use.

              Default value

              ""

              Examples

              Markup and runtime examples for unlockKey:

              HTML:

              <smart-card-view unlock-key=""></smart-card-view>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-card-view');
el.unlockKey = "1111-2222-3333-4444-5555";

              Read the current value:

              const el = document.querySelector('smart-card-view');
const unlockKey = el.unlockKey;

              Events

              closeThis event is triggered immediately when the window is closed by the user or programmatically, allowing scripts to execute any necessary cleanup operations or final actions before the window is terminated.CustomEvent

              This event is triggered immediately when the window is closed by the user or programmatically, allowing scripts to execute any necessary cleanup operations or final actions before the window is terminated.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onClose

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for close using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-card-view')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

              closingThis event is triggered just before the window begins the closing process. It gives developers an opportunity to perform actions or prompt the user before the window actually closes. If you want to prevent the window from closing—for example, to confirm with the user or save data—you can call event.preventDefault() inside the event handler function. This will cancel the default close operation and keep the window open.CustomEvent

              This event is triggered just before the window begins the closing process. It gives developers an opportunity to perform actions or prompt the user before the window actually closes. If you want to prevent the window from closing—for example, to confirm with the user or save data—you can call event.preventDefault() inside the event handler function. This will cancel the default close operation and keep the window open.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onClosing

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for closing using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-card-view')?.addEventListener('closing', (event) => {
	// event handling code goes here.
})

              dragEndThis event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button (or touching and holding on a touchscreen) and then moving the card to a different position within the interface.CustomEvent

              This event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button (or touching and holding on a touchscreen) and then moving the card to a different position within the interface.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onDragEnd

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dragEnd using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-card-view')?.addEventListener('dragEnd', (event) => {
	// event handling code goes here.
})

              draggingThis event is triggered continuously while the user is actively dragging the card element with their cursor or finger, allowing you to track the card's position and respond to movement in real time.CustomEvent

              This event is triggered continuously while the user is actively dragging the card element with their cursor or finger, allowing you to track the card's position and respond to movement in real time.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onDragging

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dragging using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-card-view')?.addEventListener('dragging', (event) => {
	// event handling code goes here.
})

              dragStartThis event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button or starting a touch gesture. It signals the beginning of the card's movement, allowing developers to implement custom behavior such as visual feedback or updating drag-related state.CustomEvent

              This event is triggered when the user initiates a drag action on the card component, typically by clicking and holding the mouse button or starting a touch gesture. It signals the beginning of the card's movement, allowing developers to implement custom behavior such as visual feedback or updating drag-related state.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onDragStart

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for dragStart using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-card-view')?.addEventListener('dragStart', (event) => {
	// event handling code goes here.
})

              filterThis event is triggered whenever a user applies a filter to the data set, typically by selecting filter criteria or options in the interface. It signals that the displayed data has been updated based on the chosen filter parameters, allowing developers to execute additional logic in response, such as refreshing the view or fetching new data.CustomEvent

              This event is triggered whenever a user applies a filter to the data set, typically by selecting filter criteria or options in the interface. It signals that the displayed data has been updated based on the chosen filter parameters, allowing developers to execute additional logic in response, such as refreshing the view or fetching new data.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onFilter

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Try a demo showcasing the filter event.

              Examples

              Listen for filter using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-card-view')?.addEventListener('filter', (event) => {
	// event handling code goes here.
})

              openThis event is triggered immediately after the window has been successfully opened, allowing you to execute code in response to the window becoming visible and accessible to the user. It is typically used to initialize resources, update the user interface, or perform actions that should occur as soon as the window appears.CustomEvent

              This event is triggered immediately after the window has been successfully opened, allowing you to execute code in response to the window becoming visible and accessible to the user. It is typically used to initialize resources, update the user interface, or perform actions that should occur as soon as the window appears.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onOpen

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for open using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-card-view')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

              openingThis event is fired just before the window is opened, giving you an opportunity to perform additional logic or checks. To prevent the window from opening, call event.preventDefault() within your event handler. If preventDefault() is not called, the window will open as usual. This allows you to control whether or not the window opening operation proceeds based on your custom criteria.CustomEvent

              This event is fired just before the window is opened, giving you an opportunity to perform additional logic or checks. To prevent the window from opening, call event.preventDefault() within your event handler. If preventDefault() is not called, the window will open as usual. This allows you to control whether or not the window opening operation proceeds based on your custom criteria.

              • Bubbles Yes
              • Cancelable Yes
              • Interface CustomEvent
              • Event handler property onOpening

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Examples

              Listen for opening using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-card-view')?.addEventListener('opening', (event) => {
	// event handling code goes here.
})

              sortThis event is triggered whenever a sorting action is performed on the data set, such as when a user updates the sorting order of a table or list by clicking on a column header or selecting a sort option.CustomEvent

              This event is triggered whenever a sorting action is performed on the data set, such as when a user updates the sorting order of a table or list by clicking on a column header or selecting a sort option.

              • Bubbles Yes
              • Cancelable No
              • Interface CustomEvent
              • Event handler property onSort

              Arguments

              evCustomEvent

              Methods

              isDefaultPrevented

              Returns true if the event was prevented by any of its subscribers.

              Returns

              boolean true if the default action was prevented. Otherwise, returns false.

              preventDefault

              The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

              stopPropagation

              The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

              Try a demo showcasing the sort event.

              Examples

              Listen for sort using the pattern that matches your stack.

              DOM — listen on the custom element (use a specific selector if the page has more than one):

              document.querySelector('smart-card-view')?.addEventListener('sort', (event) => {
	// event handling code goes here.
})

              Methods

              addFilter( filters: string[], operator?: string): voidEnables advanced filtering functionality, allowing users to refine and display data based on specific criteria such as category, date range, status, or custom attributes. This feature improves data navigation and helps users quickly locate relevant information.

              Enables advanced filtering functionality, allowing users to refine and display data based on specific criteria such as category, date range, status, or custom attributes. This feature improves data navigation and helps users quickly locate relevant information.

              Arguments

              filtersstring[]

              Filter information

              operator?string

              Logical operator between the filters of different fields

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.addFilter("[['firstName', filterGroup]], 'and'");

              Try a demo showcasing the addFilter method.

              addRecord( recordId?: number | string, data?: any, position?: string): voidCreates and inserts a new record into the database or data collection, initializing all required fields with the provided values.

              Creates and inserts a new record into the database or data collection, initializing all required fields with the provided values.

              Arguments

              recordId?number | string

              The id of the record to add

              data?any

              The data of the record to add

              position?string

              The position to add the record to. Possible values: 'first' and 'last'.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.addRecord("",{"firstName":"Test Name","lastName":"Test Last Name"},"first");

              addSort( dataFields: [] | string, orderBy: [] | string): voidEnables sorting functionality, allowing users to arrange data in ascending or descending order based on specified fields or columns. This feature enhances the user experience by making it easier to organize, locate, and analyze information within lists or tables.

              Enables sorting functionality, allowing users to arrange data in ascending or descending order based on specified fields or columns. This feature enhances the user experience by making it easier to organize, locate, and analyze information within lists or tables.

              Arguments

              dataFields[] | string

              The data field(s) to sort by

              orderBy[] | string

              The sort direction(s) to sort the data field(s) by

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.addSort(["firstName","country"],"ascending");

              Try a demo showcasing the addSort method.

              beginEdit( recordId: number | string): voidInitiates an edit transaction, allowing changes to be made to the data. This operation typically marks the start of a sequence where modifications can be performed, and may require committing or canceling the changes to finalize or discard the edits.

              Initiates an edit transaction, allowing changes to be made to the data. This operation typically marks the start of a sequence where modifications can be performed, and may require committing or canceling the changes to finalize or discard the edits.

              Arguments

              recordIdnumber | string

              The id of the record to edit

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.beginEdit(8);

              Try a demo showcasing the beginEdit method.

              cancelEdit(): voidTerminates the ongoing edit session and reverts any unsaved changes, ensuring that all modifications made during the current operation are discarded and the original state is restored.

              Terminates the ongoing edit session and reverts any unsaved changes, ensuring that all modifications made during the current operation are discarded and the original state is restored.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.cancelEdit();

              Try a demo showcasing the cancelEdit method.

              closePanel(): voidCloses any currently open header panel, such as a dropdown menu or navigation panel, ensuring that all header-related overlays are hidden from view.

              Closes any currently open header panel, such as a dropdown menu or navigation panel, ensuring that all header-related overlays are hidden from view.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.closePanel();

              endEdit(): voidFinalizes the current editing session by committing all modifications made and persisting the changes to the data source or storage.

              Finalizes the current editing session by committing all modifications made and persisting the changes to the data source or storage.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.endEdit();

              Try a demo showcasing the endEdit method.

              ensureVisible( recordId: number | string): HTMLElementEnsures that a specified record is brought into view by automatically scrolling to its position on the page. If the operation is successful, the method returns the HTML element representing the card associated with that record, allowing for further manipulation or interaction within the DOM.

              Ensures that a specified record is brought into view by automatically scrolling to its position on the page. If the operation is successful, the method returns the HTML element representing the card associated with that record, allowing for further manipulation or interaction within the DOM.

              Arguments

              recordIdnumber | string

              The id of the record to scroll to

              ReturnsHTMLElement

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              const result = document.querySelector('smart-card-view')?.ensureVisible(5);

              Try a demo showcasing the ensureVisible method.

              openCustomizePanel(): voidOpens the "Customize Cards" dropdown panel, allowing users to access and modify card display settings.

              Opens the "Customize Cards" dropdown panel, allowing users to access and modify card display settings.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.openCustomizePanel();

              openFilterPanel(): voidDisplays the "Filter" header panel as a drop-down menu, allowing users to view and select filtering options for the current data set.

              Displays the "Filter" header panel as a drop-down menu, allowing users to view and select filtering options for the current data set.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.openFilterPanel();

              Try a demo showcasing the openFilterPanel method.

              openSortPanel(): voidDisplays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the current data view.

              Displays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the current data view.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.openSortPanel();

              Try a demo showcasing the openSortPanel method.

              removeFilter(): voidRemoves any active filters, displaying the full, unfiltered dataset.

              Removes any active filters, displaying the full, unfiltered dataset.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.removeFilter();

              Try a demo showcasing the removeFilter method.

              removeRecord( recordId: number | string): voidDeletes a specific record from the database or data collection, permanently removing all associated data for that entry.

              Deletes a specific record from the database or data collection, permanently removing all associated data for that entry.

              Arguments

              recordIdnumber | string

              The id of the record to remove

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.removeRecord(2);

              removeSort(): voidDisables any active sorting on the data, reverting the items to their original order.

              Disables any active sorting on the data, reverting the items to their original order.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.removeSort();

              Try a demo showcasing the removeSort method.

              setFilter( dataField: string, filter: string): voidEnhances and applies custom filter criteria to a specific column within the cardview. Accepts both single and multiple filter expressions, allowing for complex filtering logic using logical operators such as "and" and "or". For example, to filter the "lastName" column for values that contain either "burke" or "peterson", use: `cardview.setFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. The method also supports numeric filters (e.g., `GREATER_THAN 100`), a variety of comparison operators (such as `EQUALS`, `LESS_THAN`, `STARTS_WITH`, etc.), and can be used to combine different conditions for precise data selection.

              Enhances and applies custom filter criteria to a specific column within the cardview. Accepts both single and multiple filter expressions, allowing for complex filtering logic using logical operators such as "and" and "or". For example, to filter the "lastName" column for values that contain either "burke" or "peterson", use: `cardview.setFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. The method also supports numeric filters (e.g., `GREATER_THAN 100`), a variety of comparison operators (such as `EQUALS`, `LESS_THAN`, `STARTS_WITH`, etc.), and can be used to combine different conditions for precise data selection.

              Arguments

              dataFieldstring

              The data field name of the column to filter, e.g., 'firstName'.

              filterstring

              The filter expression(s) to apply. Examples include 'startsWith B', ['contains Andrew or contains Nancy'], or ['quantity', '<= 3 and >= 8']. Supported operators: '=', 'EQUAL', '<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL', 'starts with', 'STARTS_WITH', 'ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'NULL', 'NOT_NULL'.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.setFilter("firstName","startsWith B");

              Try a demo showcasing the setFilter method.

              setLocale( locale: string, messages?: any): voidSets the locale of a component.

              Sets the locale of a component.

              Arguments

              localestring

              The locale abbreviation. For example: 'de'.

              messages?any

              Object containing the locale messages.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.setLocale("'de'");

              showColumn( dataField: string): voidDisplays a single vertical column within the layout, typically used to organize content or interface elements in a structured manner. This column can contain text, images, or other components, and its appearance (such as width, alignment, and styling) can be customized through additional properties or CSS classes.

              Displays a single vertical column within the layout, typically used to organize content or interface elements in a structured manner. This column can contain text, images, or other components, and its appearance (such as width, alignment, and styling) can be customized through additional properties or CSS classes.

              Arguments

              dataFieldstring

              The data field of the column

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.showColumn("firstName");

              sortBy( dataField: string, sortOrder: string | null): voidApplies sorting to the CardView based on the specified data field. You can either add sorting by providing a valid sortOrder (such as 'asc' or 'desc'), or remove sorting from a column by setting the sortOrder parameter to null. This allows dynamic adjustment of CardView sorting criteria, enabling users to sort data as needed or clear sorting on individual columns.

              Applies sorting to the CardView based on the specified data field. You can either add sorting by providing a valid sortOrder (such as 'asc' or 'desc'), or remove sorting from a column by setting the sortOrder parameter to null. This allows dynamic adjustment of CardView sorting criteria, enabling users to sort data as needed or clear sorting on individual columns.

              Arguments

              dataFieldstring

              The data field of the column to sort, e.g., 'firstName'.

              sortOrderstring | null

              Sort order to apply: 'asc' for ascending, 'desc' for descending, or null to remove sorting.

              On the custom element in the DOM (narrow the selector, e.g. to #my-cardview, if you host multiple widgets):

              document.querySelector('smart-card-view')?.sortBy("firstName","asc");

              Try a demo showcasing the sortBy method.

              CSS Variables

              --smart-card-view-default-widthvar()

              Default value

              "1200px"

              Default width of CardView.

              --smart-card-view-default-heightvar()

              Default value

              "800px"

              Default height of CardView.

              --smart-card-view-header-heightvar()

              Default value

              "30px"

              Height of the CardView header

              --smart-card-view-cover-heightvar()

              Default value

              "var(--smart-carousel-default-height)"

              Height of CardView cover (carousel).

              --smart-card-view-vertical-offsetvar()

              Default value

              "15px"

              Vertical offset of CardView.

              --smart-card-view-column-min-widthvar()

              Default value

              "250px"

              Min width of CardView visual columns.

              --smart-card-view-gapvar()

              Default value

              "10px"

              Gap between CardView cards.

              --smart-card-view-add-new-button-sizevar()

              Default value

              "60px"

              Size of the 'Add new record' (+) button.

              --smart-data-view-paddingvar()

              Default value

              "10px"

              Padding of the CardView and Kanban

              --smart-data-view-customize-panel-widthvar()

              Default value

              "200px"

              Width of the CardView and Kanban customize panel (drop down).

              --smart-data-view-filter-panel-widthvar()

              Default value

              "550px"

              Width of the CardView and Kanban filter panel (drop down).

              --smart-data-view-sort-panel-widthvar()

              Default value

              "400px"

              Width of the CardView and Kanban sort panel (drop down).

              --smart-data-view-search-panel-widthvar()

              Default value

              "250px"

              Width of the CardView and Kanban search panel (drop down).