CardView JAVASCRIPT UI Component API

CardView Javascript API

Class

CardView

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

Properties

addNewButtonboolean

Toggles the button for adding new cards.

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

Allows reordering by dragging cards.

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"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

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

Describes the height for each card.

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"

Describes the orientation of the card cells.

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

Allows collapsing the card content.

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}[]

Describes the columns properties:

label - Sets the column name
dataField - Sets the dataField name
icon - Sets the icon for the column
formatSettings - Sets the settings about the format for the current column
formatFunction - Function for customizing the value

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;

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

Describes which data field to be set as cover.

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"

Describes the cover image fit property.

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

Determines the data source for the item that will be displayed inside the card.

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

Sets the grid's data source settings when the dataSource property is set to an Array or URL.

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

Allows the edit option for the cards.

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 gets the header position. The header contains the Customize, Filter, Sort, and Search buttons.

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;

localestring

Sets or gets the locale. Used in conjunction with the property messages.

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

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

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

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

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

Determines the theme. Theme defines the look of the element

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"

Describes the scrolling behavior of the element.

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

Describes which data field to be set as title.

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 when a filter has been applied.

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 when sorting has been applied.

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 when the window is opened.

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 triggered when the window is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

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 when the window is closed.

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 when the window is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

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 starts dragging the card.

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 when the user is dragging the card.

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 dragged the card.

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

Adds filtering

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

Adds a new record

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

Adds sorting

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

Begins an edit operation

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

Ends the current edit operation and discards changes

Invoke the cancelEdit method.

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

closePanel(): void

Closes any open header panel (drop down)

Invoke the closePanel method.

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

endEdit(): void

Ends the current edit operation and saves changes

Invoke the endEdit method.

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

ensureVisible( recordId: number | string): HTMLElement

Makes sure a record is visible by scrolling to it. If succcessful, the method returns the HTML element of the record's card.

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" header panel (drop down)

Invoke the openCustomizePanel method.

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

openFilterPanel(): void

Opens the "Filter" header panel (drop down)

Invoke the openFilterPanel method.

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

openSortPanel(): void

Opens the "Sort" header panel (drop down)

Invoke the openSortPanel method.

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

removeFilter(): void

Removes filtering

Invoke the removeFilter method.

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

removeRecord( recordId: number | string): void

Removes a record

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

Removes sorting

Invoke the removeSort method.

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

showColumn( dataField: string): void

Shows a column

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

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

CardView Javascript API

addNewButtonboolean

Default value

Example

allowDragboolean

Default value

Example

animation"none" | "simple" | "advanced"

Default value

Example

cardHeightnumber | null

Example

cellOrientation"horizontal" | "vertical"

Default value

Example

collapsibleboolean

Default value

Example

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}[]

Properties

dataFieldstring

Default value

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

Default value

iconany

Default value

imageboolean

Default value

labelstring

Default value

visibleboolean

Default value

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

formatSettingsany

Example

coverFieldstring

Default value

Example

coverMode"fit" | "crop"

Default value

Example

dataSourceobject

Example

dataSourceSettingsobject

Properties

autoGenerateColumnsboolean

Default value

Example

childrenDataFieldstring

Default value

Example

rootstring

Default value

Example

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

Default value

Example

recordstring

Default value

Example

groupBystring[]

Default value

Example

dataFields{name: string, dataType: string}[] | string[]

Properties

namestring

Default value

mapstring

Default value