CardView JAVASCRIPT UI Component API

CardView Javascript API

Class

CardView

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

Selector

smart-card-view

Properties

Events

Methods

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'

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;

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

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.

Default value

""

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\' }}''

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;

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;

onRecordInsertedfunction | null

Callback function, used when record is inserted.

Example

Set the onRecordInserted property.

 <smart-card-view on-record-inserted='function(recordId, data, position, commit) { }'></smart-card-view>

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

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

Get the onRecordInserted property.

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

onRecordRemovedfunction | null

Callback function, used when record is removed.

Example

Set the onRecordRemoved property.

 <smart-card-view on-record-removed='function(recordId, commit) { }'></smart-card-view>

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

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

Get the onRecordRemoved property.

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

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

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