CardView
CardView creates Card-based layout. Supports Filtering, Sorting, Grouping, Editing and UI Virtualization.
Selector
smart-card-view
Properties
addNewButtonboolean
Toggles the button for adding new cards.
Default valuefalse
allowDragboolean
Allows reordering by dragging cards.
Default valuefalse
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
cardHeightnumber | null
Describes the height for each card.
cellOrientationOrientation
Describes the orientation of the card cells.
Default valuevertical
collapsibleboolean
Allows collapsing the card content.
Default valuefalse
columnsCardViewColumn[]
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
coverFieldstring
Describes which data field to be set as cover.
Default value"''
coverModeCardViewCoverMode
Describes the cover image fit property.
Default valuecrop
dataSourceany
Determines the data source for the item that will be displayed inside the card.
editableboolean
Allowes the edit option for the cards.
Default valuefalse
headerPositionCardViewHeaderPosition
Describes the header positions of the elements.
Default valuenone
messagesany
Describes the header positions of the elements.
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"
}
onRecordInsertedany
Callback function, used when record is inserted.
onRecordRemovedany
Callback function, used when record is removed.
scrollingScrolling
Describes the scrolling behavior of the element.
Default valuephysical
titleFieldstring
Describes which data field to be set as title.
Default value"
onfilter((this: Window, ev: Event) => any) | null
This event is triggered when the filtering apply button in the header menu is clicked.
Arguments
evEvent
onsort((this: Window, ev: Event) => any) | null
This event is triggered when the sorting apply button in the header menu is clicked.
Arguments
evEvent
onopen((this: Window, ev: Event) => any) | null
This event is triggered when the window is opened.
Arguments
evEvent
onopening((this: Window, ev: Event) => any) | null
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.
Arguments
evEvent
onclose((this: Window, ev: Event) => any) | null
This event is triggered when the window is closed.
Arguments
evEvent
onclosing((this: Window, ev: Event) => any) | null
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.
Arguments
evEvent
ondragstart((this: Window, ev: Event) => any) | null
This event is triggered when the user starts dragging the card.
Arguments
evEvent
ondragging((this: Window, ev: Event) => any) | null
This event is triggered when the user is dragging the card.
Arguments
evEvent
ondragend((this: Window, ev: Event) => any) | null
This event is triggered when the user dragged the card.
Arguments
evEvent
Methods
addFilter( filters: string[], operator?: string): void
Adds filtering
Arguments
filtersstring[]
Filter information
operator?string
Logical operator between the filters of different fields
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'.
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
beginEdit( recordId: number | string): void
Begins an edit operation
Arguments
recordIdnumber | string
The id of the record to edit
cancelEdit(): void
Ends the current edit operation and discards changes
closePanel(): void
Closes any open header panel (drop down)
endEdit(): void
Ends the current edit operation and saves changes
ensureVisible( recordId: number | string): void
Makes sure a record is visible by scrolling to it
Arguments
recordIdnumber | string
The id of the record to scroll to
openCustomizePanel(): void
Opens the "Customize cards" header panel (drop down)
openFilterPanel(): void
Opens the "Filter" header panel (drop down)
openSortPanel(): void
Opens the "Sort" header panel (drop down)
removeFilter(): void
Removes filtering
removeRecord( recordId: number | string): void
Removes a record
Arguments
recordIdnumber | string
The id of the record to remove
removeSort(): void
Removes sorting
showColumn( dataField: string): void
Shows a column
Arguments
dataFieldstring
The data field of the column
CardViewColumn
Properties
dataFieldstring
Sets or gets the column's data source bound field.
Default value"
iconany
Sets or gets the column's icon. Expects CSS class name.
Default value
imageboolean
Sets or gets the column's image visibility.
Default value
labelstring
Sets or gets the text displayed in the column's header.
Default value"
visibleboolean
Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
Default valuetrue
formatFunction{(): void}
Sets or gets the column's format function.
Default value
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\' }}''