GridProps
Represents the props of the native Vue Grid component by Kendo UI.
alternatePerGroup?
boolean
When set to true it sets the alternating of the rows per groups so each group could start
with the same color row. There is a known limitation when virtual scrolling with groups and
alternatePerGroup set to true- there may be a slight flicker of the alternating rows in
groups with larger amount of items - in this case we would rather recommend
using rowTemplates and set the row alternating based on the data or dataItems.
cancel?
(event: GridCancelEvent) => void
Fires when the user triggers a canceling operation from a cell.
cellRender?
(h: any, defaultRendering: VNode | null, props: GridCellProps, listeners: any) => VNode | string | null
Defines the custom rendering of the cell. Accepts a Vue component, a render function, or a slot name.
(see example).
cellclick?
(event: any) => void
Fires when the user clicks a cell.
columnMenu?
boolean | any
Defines if the column menu will be shown for the column.
Accepts Boolean, a Vue component, a render function, or a slot name
columnVirtualization?
boolean
Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered.
columnreorder?
(event: GridColumnReorderEvent) => void
Fires when columns are reordered.
columnresize?
(event: GridColumnResizeEvent) => void
Fires when a column is resized
columns?
GridColumnProps[] | null
Sets the properties of the columns that are used by the Grid.
dataItems?
any[] | DataResult | null
Sets the data of the Grid (see example). If you use paging,
the data option has to contain only the items for the current page.
datastatechange?
(event: GridDataStateChangeEvent) => void
Fires when the data state of the Grid is changed.
detail?
null | any GridDetailRowPropsFires when the data state of the Grid is changed
Specifies a custom rendering that will be cloned and rendered inside the detail rows
of the currently expanded items (see example.
Accepts a Vue component, a render function, or a slot name.
An item will be rendered as expanded if the value of its expandField is true.
edit?
(event: GridEditEvent) => void
Fires when the user triggers an edit operation from a cell.
editField?
string
Specifies the name of the field which will provide a Boolean representation of the edit state of the current item (more information and examples).
expandField?
string
Specifies the name of the field which will provide a Boolean representation of the expanded state of the item (see example.
expandchange?
(event: GridExpandChangeEvent) => void
Fires when the user tries to expand or collapse a row.
filter?
CompositeFilterDescriptor
The descriptor by which the data is filtered
(more information and examples).
Affects the values and buttons in the FilterRow of the Grid.
filterCellRender?
(h: any, defaultRendering: VNode | null, props: GridCellProps, listeners: any) => VNode | string | any
Defines the custom rendering of the filter cell. Accepts a Vue component, a render function, or a slot name.
filterable?
boolean
Enables the filtering of the columns with their field option set
(more information and examples).
filterchange?
(event: GridFilterChangeEvent) => void
Fires when the Grid filter is modified through the UI (more information and examples). You have to handle the event yourself and filter the data.
group?
GroupDescriptor[]
The descriptors by which the data will be grouped (more information and examples).
groupable?
GridGroupableSettings | boolean
Determines if grouping by dragging and dropping the column headers is allowed (more information and examples).
groupchange?
(event: GridGroupChangeEvent) => void
Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data (more information and examples).
headerCellRender?
(h: any, defaultRendering: VNode | null, props: GridCellProps, listeners: any) => VNode | string | any
Defines the custom rendering of the header cell. Accepts a Vue component, a render function, or a slot name.
headerselectionchange?
(event: GridHeaderSelectionChangeEvent) => void
Fires when the user clicks the checkbox of a column header whose field matches selectedField.
(see example).
itemchange?
(event: GridItemChangeEvent) => void
Fires when the user changes the values of the item.
The event is not debounced and fires on every onChange event of the input in the current EditCell.
(more information and examples).
pageSize?
number
Defines the page size that is used by the Grid pager (see example). Required by the paging functionality.
pageable?
GridPagerSettings | any
Configures the pager of the Grid (see example).
The available options are:
buttonCount: Number—Sets the maximum numeric buttons count before the buttons are collapsed.info: Boolean—Toggles the information about the current page and the total number of records.type: PagerType—Accepts thenumeric(buttons with numbers) andinput(input for typing the page number) values.pageSizes: BooleanorArray<number>—Shows a menu for selecting the page size.previousNext: Boolean—Toggles the Previous and Next buttons.responsive: Boolean— Defines if the pager will be responsive. Defaults totrue.
pagechange?
(event: GridPageChangeEvent) => void
Fires when the page of the Grid is changed (see example). You have to handle the event yourself and page the data.
remove?
(event: GridRemoveEvent) => void
Fires when the user triggers a removal operation from a cell.
reorderable?
boolean
If set to true, the user can reorder columns by dragging their
header cells (see example.
resizable?
boolean
If set to true, the user can resize columns by dragging the edges (resize handles) of their
header cells (see example.
rowHeight?
number
Defines the row height and forces an equal height to all rows (see example).
rowRender?
string | (h: any, defaultRendering: VNode | null, dafaultSlots: any, props: any, listeners: any) => VNode
Defines the custom rendering of the row. Accepts a Vue component, a render function, or a slot name.
rowclick?
(event: GridRowClickEvent) => void
Fires when the user clicks a row.
rowdblclick?
(event: GridRowClickEvent) => void
Fires when the user double clicks a row.
scroll?
(event: Event) => void
Fires when Grid is scrolled.
save?
(event: GridSaveEvent) => void
Fires when the user triggers a saving operation from a cell.
scrollable?
Defines the scroll mode that is used by the Grid (see example.
The available options are:
none—Renders no scrollbar.scrollable—This is the default scroll mode. It requires the setting of theheightoption.virtual—Displays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content.
selectedField?
string
Specifies the name of the field which will provide a Boolean representation of the selected state of the item (see example).
selectionchange?
(event: GridSelectionChangeEvent) => void
Fires when the user tries to select or deselect a row (see example).
skip?
number
Defines the number of records that will be skipped by the pager (see example). Required by the paging functionality.
sort?
SortDescriptor[]
The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
sortable?
Enables the sorting for the columns with their field option set
(see example).
sortchange?
(event: GridSortChangeEvent) => void
Fires when the sorting of the Grid is changed (see example). You have to handle the event yourself and sort the data.
style?
any
Represents the style HTML attribute.
take?
number
Alias of the pageSize property. If take is set, pageSize will be ignored.
total?
number
Defines the total number of data items in all pages (see example). Required by the paging functionality.
