CardView JAVASCRIPT UI Component API

CardView Javascript API

Class

CardView

CardView

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

Selector

smart-card-view

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.
    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.
    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.
    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.
    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.
    TtitleFieldSpecifies the data field that should be used as the title, typically for labeling or displaying the main identifier of an item.

    Events

    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.
    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.
    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.
    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.
    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.
    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.
    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.

    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.
    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.

    Properties

    addNewButtonboolean

    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

    Example

    Set the addNewButton property. 

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

    Set the addNewButton property by using the HTML Element's instance. 

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

    Get the addNewButton property. 

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

    allowDragboolean

    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

    Example

    Set the allowDrag property. 

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

    Set the allowDrag property by using the HTML Element's instance. 

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

    Get the allowDrag property. 

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

    animation"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"

    Example

    Set the animation property. 

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

    Set the animation property by using the HTML Element's instance. 

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

    Get the animation property. 

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

    cardHeightnumber | null

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

    Example

    Set the cardHeight property. 

     <smart-card-view card-height='200'></smart-card-view>

    Set the cardHeight property by using the HTML Element's instance. 

     const cardview = document.querySelector('smart-card-view');
     cardview.cardHeight = 500;

    Get the cardHeight property. 

     const cardview = document.querySelector('smart-card-view');
     let cardHeight = cardview.cardHeight;

    cellOrientation"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"

    Example

    Set the cellOrientation property. 

     <smart-card-view cell-orientation='vertical'></smart-card-view>

    Set the cellOrientation property by using the HTML Element's instance. 

     const cardview = document.querySelector('smart-card-view');
     cardview.cellOrientation = 'horizontal';

    Get the cellOrientation property. 

     const cardview = document.querySelector('smart-card-view');
     let cellOrientation = cardview.cellOrientation;

    collapsibleboolean

    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

    Example

    Set the collapsible property. 

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

    Set the collapsible property by using the HTML Element's instance. 

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

    Get the collapsible property. 

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

    columns{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

    dataFieldstring

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

    Default value

    ""

    Get the dataField property. 

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

    dataType"string" | "date" | "boolean" | "number" | "array" | "any"

    Sets or gets the column's data type.

    Default value

    "string"

    Get the dataType property. 

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

    iconany

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

    Default value

    ""

    Get the icon property. 

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

    imageboolean

    Sets or gets the column's image visibility.

    Default value

    false

    Get the image property. 

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

    labelstring

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

    Default value

    ""

    Get the label property. 

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

    visibleboolean

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

    Default value

    true

    Get the visible property. 

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

    formatFunction{ (settings: { template?: string, column?: any, record?: any, value?: any }): any }

    Sets or gets the column's format function.

    Get the formatFunction property. 

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

    formatSettingsany

    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.

    Get the formatSettings property. 

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

    Example

    Set the columns property. 

     <smart-card-view columns='{label: "First Name", dataField: "firstName", icon: "firstName" }'></smart-card-view>

    Set the columns property by using the HTML Element's instance. 

     const cardview = document.querySelector('smart-card-view');
     cardview.columns = { label: "Time", dataField: "time", icon: "lastName", formatSettings: { "formatString": "hh:mm tt" }, formatFunction: function (settings) { settings.template = settings.value ? '☑' : '☐'; } };

    Get the columns property. 

     const cardview = document.querySelector('smart-card-view');
     let columns = cardview.columns;

    coverFieldstring

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

    Default value

    "''"

    Example

    Set the coverField property. 

     <smart-card-view cover-field='attachments'></smart-card-view>

    Set the coverField property by using the HTML Element's instance. 

     const cardview = document.querySelector('smart-card-view');
     cardview.coverField = null;

    Get the coverField property. 

     const cardview = document.querySelector('smart-card-view');
     let coverField = cardview.coverField;

    coverMode"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"

    Example

    Set the coverMode property. 

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

    Set the coverMode property by using the HTML Element's instance. 

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

    Get the coverMode property. 

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

    dataSourceobject

    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.

    Example

    Set the dataSource property. 

     <smart-card-view data-source='["item 1", "item 2"]'></smart-card-view>

    Set the dataSource property by using the HTML Element's instance. 

     const cardview = document.querySelector('smart-card-view');
     cardview.dataSource = '["new item 1", "new item 2"]';

    Get the dataSource property. 

     const cardview = document.querySelector('smart-card-view');
     let dataSource = cardview.dataSource;

    dataSourceSettingsobject

    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

    autoGenerateColumnsboolean

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

    Default value

    false

    Example

    Set the autoGenerateColumns property by using the HTML Element's instance. 

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

    Get the autoGenerateColumns property. 

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

    childrenDataFieldstring

    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

    ""

    Example

    Set the childrenDataField property by using the HTML Element's instance. 

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

    Get the childrenDataField property. 

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

    rootstring

    Sets or gets the XML binding root.

    Default value

    ""

    Example

    Set the root property by using the HTML Element's instance. 

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

    Get the root property. 

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

    sanitizeHTML"all" | "blackList" | "none"

    Sets or gets the XML binding root.

    Default value

    "blackList"

    Example

    Set the sanitizeHTML property by using the HTML Element's instance. 

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

    Get the sanitizeHTML property. 

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

    recordstring

    Sets or gets the XML binding record.

    Default value

    ""

    Example

    Set the record property by using the HTML Element's instance. 

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

    Get the record property. 

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

    groupBystring[]

    Sets or gets the data fields to group by.

    Default value

    []

    Example

    Set the groupBy property by using the HTML Element's instance. 

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

    Get the groupBy property. 

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

    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']

    Properties

    name
    map
    dataType

    namestring

    Sets the dataField name.

    Default value

    ""

    Get the name property. 

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

    mapstring

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

    Default value

    ""

    Get the map property. 

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

    dataType"string" | "date" | "boolean" | "number" | "array" | "any"

    Sets the dataField type.

    Default value

    "string"

    Get the dataType property. 

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

    Example

    Set the dataFields property by using the HTML Element's instance. 

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

    Get the dataFields property. 

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

    dataSourceType"array" | "json" | "xml" | "csv" | "tsv"

    Sets or gets whether the data source type.

    Default value

    "array"

    Example

    Set the dataSourceType property by using the HTML Element's instance. 

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

    Get the dataSourceType property. 

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

    idstring

    Sets or gets the dataAdapter's id

    Default value

    ""

    Get the id property. 

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

    keyDataFieldstring

    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

    ""

    Example

    Set the keyDataField property by using the HTML Element's instance. 

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

    Get the keyDataField property. 

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

    parentDataFieldstring

    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

    ""

    Example

    Set the parentDataField property by using the HTML Element's instance. 

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

    Get the parentDataField property. 

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

    mapCharstring

    Sets the 'mapChar' data field of the record

    Default value

    "."

    Example

    Set the mapChar property by using the HTML Element's instance. 

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

    Get the mapChar property. 

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

    virtualDataSourceany

    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.

    Get the virtualDataSource property. 

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

    virtualDataSourceOnExpandany

    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

    Get the virtualDataSourceOnExpand property. 

     const cardview = document.querySelector('smart-card-view');
     let virtualDataSourceOnExpand = cardview.dataSourceSettings[0].virtualDataSourceOnExpand;
    Try a demo showcasing the dataSourceSettings property.

    editableboolean

    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

    Example

    Set the editable property. 

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

    Set the editable property by using the HTML Element's instance. 

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

    Get the editable property. 

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

    headerPosition"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"

    Example

    Set the headerPosition property. 

     <smart-card-view header-position='top'></smart-card-view>

    Set the headerPosition property by using the HTML Element's instance. 

     const cardview = document.querySelector('smart-card-view');
     cardview.headerPosition = 'bottom';

    Get the headerPosition property. 

     const cardview = document.querySelector('smart-card-view');
     let headerPosition = cardview.headerPosition;

    unlockKeystring

    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

    ""

    Example

    Set the unlockKey property. 

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

    Set the unlockKey property by using the HTML Element's instance. 

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

    Get the unlockKey property. 

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

    localestring

    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"

    Example

    Set the locale property. 

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

    Set the locale property by using the HTML Element's instance. 

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

    Get the locale property. 

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

    messagesobject

    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"

    }

    Example

    Set the messages property. 

     <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>

    Set the messages property by using the HTML Element's instance. 

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

    Get the messages property. 

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

    rightToLeftboolean

    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.

    Example

    Set the rightToLeft property. 

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

    Set the rightToLeft property by using the HTML Element's instance. 

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

    Get the rightToLeft property. 

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

    themestring

    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

    ""
    Try a demo showcasing the theme property.

    Example

    Set the theme property. 

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

    Set the theme property by using the HTML Element's instance. 

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

    Get the theme property. 

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

    scrolling"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"

    Example

    Set the scrolling property. 

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

    Set the scrolling property by using the HTML Element's instance. 

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

    Get the scrolling property. 

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

    titleFieldstring

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

    Default value

    ""

    Example

    Set the titleField property. 

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

    Set the titleField property by using the HTML Element's instance. 

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

    Get the titleField property. 

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

    Events

    filterCustomEvent

    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.

    Example

    Set up the event handler of filter event. 

    const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('filter', function (event) {
	// event handling code goes here.
})

    sortCustomEvent

    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.

    Example

    Set up the event handler of sort event. 

    const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('sort', function (event) {
	// event handling code goes here.
})

    openCustomEvent

    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.

    Example

    Set up the event handler of open event. 

    const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('open', function (event) {
	// event handling code goes here.
})

    openingCustomEvent

    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.

    Example

    Set up the event handler of opening event. 

    const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('opening', function (event) {
	// event handling code goes here.
})

    closeCustomEvent

    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.

    Example

    Set up the event handler of close event. 

    const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('close', function (event) {
	// event handling code goes here.
})

    closingCustomEvent

    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.

    Example

    Set up the event handler of closing event. 

    const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('closing', function (event) {
	// event handling code goes here.
})

    dragStartCustomEvent

    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.

    Example

    Set up the event handler of dragStart event. 

    const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('dragStart', function (event) {
	// event handling code goes here.
})

    draggingCustomEvent

    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.

    Example

    Set up the event handler of dragging event. 

    const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('dragging', function (event) {
	// event handling code goes here.
})

    dragEndCustomEvent

    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.

    Example

    Set up the event handler of dragEnd event. 

    const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('dragEnd', function (event) {
	// event handling code goes here.
})

    Methods

    addFilter( filters: string[], operator?: string): void

    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


    Invoke the addFilter method.

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

    addRecord( recordId?: number | string, data?: any, position?: string): void

    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'.


    Invoke the addRecord method.

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

    addSort( dataFields: [] | string, orderBy: [] | string): void

    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


    Invoke the addSort method.

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

    beginEdit( recordId: number | string): void

    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


    Invoke the beginEdit method.

    const cardview = document.querySelector('smart-card-view');
cardview.beginEdit(8);

    cancelEdit(): void

    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.


    Invoke the cancelEdit method.

    const cardview = document.querySelector('smart-card-view');
cardview.cancelEdit();

    closePanel(): void

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


    Invoke the closePanel method.

    const cardview = document.querySelector('smart-card-view');
cardview.closePanel();

    endEdit(): void

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


    Invoke the endEdit method.

    const cardview = document.querySelector('smart-card-view');
cardview.endEdit();

    ensureVisible( recordId: number | string): HTMLElement

    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

    Invoke the ensureVisible method.

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

    openCustomizePanel(): void

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


    Invoke the openCustomizePanel method.

    const cardview = document.querySelector('smart-card-view');
cardview.openCustomizePanel();

    openFilterPanel(): void

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


    Invoke the openFilterPanel method.

    const cardview = document.querySelector('smart-card-view');
cardview.openFilterPanel();

    openSortPanel(): void

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


    Invoke the openSortPanel method.

    const cardview = document.querySelector('smart-card-view');
cardview.openSortPanel();

    removeFilter(): void

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


    Invoke the removeFilter method.

    const cardview = document.querySelector('smart-card-view');
cardview.removeFilter();

    removeRecord( recordId: number | string): void

    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


    Invoke the removeRecord method.

    const cardview = document.querySelector('smart-card-view');
cardview.removeRecord(2);

    removeSort(): void

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


    Invoke the removeSort method.

    const cardview = document.querySelector('smart-card-view');
cardview.removeSort();

    showColumn( dataField: string): void

    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


    Invoke the showColumn method.

    const cardview = document.querySelector('smart-card-view');
cardview.showColumn("firstName");

    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).