Grid JAVASCRIPT UI Component API

Grid Javascript API

Class

Grid

Grid

Data Grid UI Component that covers everything from paging, sorting, grouping, filtering, and editing to row and column virtualization, right-to-left layout, export to Excel and PDF and Accessibility.

Selector

smart-grid

Properties

AappearanceAn object containing settings related to the grid's appearance. Click for more details. Property object's options:
  • alternationStart:number - Starting row index of alternating colors.
  • alternationEnd:number - Ending row index of alternating colors.
  • alternationCount:number - number of row color alternations.
  • allowColumnStickyPosition:boolean - Enables sticky columns.
  • allowHover:boolean - Enables row hover effect. Applies a hover style to the cells.
  • allowHeaderHover:boolean - Enables header hover effect. Applies a hover style to the headers.
  • allowRowToggleAnimation:boolean - Enables row toggle animation. This animation starts when you expand/collapse a row in TreeGrid/Grouping mode.
  • allowRowDetailToggleAnimation:boolean - Enables row detail toggle animation. This animation starts when you expand/collapse a row in TreeGrid/Grouping mode.
  • allowSortAnimation:boolean - Enables sorting animation. Data records are sorted with animation, when sorting is applied.
  • allowColumnLabelAnimation:boolean - Enables column label animation. The label is moved to 'left' with animation, when the column header's drop-down button is displayed on hover or sorting is applied.
  • allowColumnMenuAnimation:boolean - Enables column menu animation. When you click on the column header's drop-down button, the menu is animated.
  • allowColumnSortButtonAnimation:boolean - Enables column sort button animation. When you click on a sortable column to change the sort order, the sort button is animated.
  • allowColumnActionButtonAnimation:boolean - Enables column action button animation. The drop-down button displayed on column header hover is optionally animated.
  • allowColumnFilterButtonAnimation:boolean - Enables column filter button animation.
  • autoShowColumnSortButton:boolean - If enabled, automatically shows column sort button. The sort button is displayed only when the column is sorted. If the property's value is false, sort button will be always displayed to indicate that sorting is possible.
  • autoShowColumnActionButton:boolean - If enabled, automatically shows column action button.
  • autoShowColumnFilterButton:boolean - If enabled, automatically shows column filter button.
  • autoGenerateRowLabelMode:string - Generates labels as 'numbers' or 'letters'. This property affects the rendering of the row header.
  • autoGenerateColumnLabelMode:string - Generates labels as 'numbers' or 'letters. This property affects the rendering of the column header.
  • displayLoadingIndicator:boolean - Sets the visibility of the loading indicator. This is the Loading... image displayed in the Grid while loading data.
  • loadingIndicatorPlaceholder:string - Sets the loading indicator label. This is the Text displayed while loading data.
  • placeholder:string - Sets the placeholder of the Grid. The placeholder is displayed when the Grid is empty.
  • sortAnimationDuration:number - Sets the duration of sorting animation. This property is related to the allowSortAnimation property.
  • showRowHeader:boolean - Shows or hides Row header.
  • showTreeRowHeader:boolean - Shows or hides Row headers. In TreeGrid, the non-leaf tree items are displayed as normal rows. If this property is set to true, they are displayed as headers similar to the grouping rendering.
  • showRowHeaderNumber:boolean - Shows row indexes in the row header. The showRowHeader property should be true
  • showRowHeaderEditIcon:boolean - Shows edit icon when a cell or row is in edit state.
  • showRowHeaderSelectIcon:boolean - Shows select icon when the pointer is over the row header cell.
  • showRowHeaderFocusIcon:boolean - Shows focus icon on cell or row focus.
  • showRowHeaderDragIcon:boolean - Shows drag icon on the row header.
  • showColumnHeaderLines:boolean - Shows column header lines.
  • showColumnHeaderDragIcon:boolean - Shows drag icon on the column header when drag is enabled. The icon is displayed when you move the mouse cursor to the column header's left edge.
  • showColumnLines:boolean - Shows column lines.
  • showRowLines:boolean - Shows row lines.
  • showColumnGroupLines:boolean - Shows lines between columns in column groups.
  • showColumnGroupCellLines:boolean - Shows lines between cells in column groups.
  • showColumnGroupsInColumnPanel:boolean - Shows column groups in the Hide columns panel. Column groups and columns are shown in a tree-like structure. When the property is set to false, the column groups are not displayed and the column labels contain the column group name.
  • showFilterColumnBackground:boolean - Shows filtered column background, when filter is applied.
  • showSortColumnBackground:boolean - Shows sorted column background, when sorting is applied.
  • showFrozenColumnBackground:boolean - Shows frozen column background, when the Grid has frozen columns.
  • showSelectionOnTop:boolean - Shows the selection on top of all other styles.
  • showColumnSortButton:boolean - Shows column sort button.
  • showColumnFilterButton:boolean - Shows column filter button.
  • showColumnDescriptionButton:boolean - Shows column description button. The button's style is customizable through the Grid CSS.
  • showColumnIcon:boolean - Shows column icon within the column's header.
  • showColumnCustomButton:boolean - Shows column custom button. User-defined button shown in the column header.
  • showColumnActionButton:boolean - Shows column action button. This is the drop-down button displayed in the column header.
  • showTooltips:boolean - Shows tooltips when user hovers columns or cells.
  • showHorizontalScrollBarOnFixedColumns:boolean - Shows horizontal scrollbar on fixed columns.
  • showVerticalScrollBarOnFixedColumns:boolean - Shows vertical scrollbar on fixed columns.
  • showTodayDateAsString:boolean - Shows the today's date as 'Today' vs '7/8/2022'. When the property is set to false, it will display the date.
AaiAn object containing settings related to the grid's AI integration. Click for more details. Property object's options:
  • model:string - The AI model used for text generation or other AI-powered features.
  • maxTokens:number - The maximum number of tokens (words/characters) the AI can generate in a single request
  • temperature:number - Controls the randomness of AI output. Lower values produce more focused results; higher values are more creative.
  • url:string - The endpoint URL for sending AI requests, typically your backend proxy to OpenAI or another provider.
  • key:string - The API key used to authenticate requests to the AI provider.
BbehaviorAn object containing settings related to the grid's behavior. Click for more details. Property object's options:
  • allowColumnAutoSizeOnDoubleClick:boolean - Auto-Resize on double-click of a column's right border.
  • allowRowAutoSizeOnDoubleClick:boolean - Auto-Resize on double-click of a row's bottom border.
  • allowRowReorder:boolean - Determines whether row reorder is enabled.
  • allowColumnReorder:boolean - Determines whether column reorder is enabled.
  • allowColumnFreeze:boolean - Determines whether column freeze with drag and drop is enabled. When other columns are frozen/pinned, drag the column to the existing frozen area. When no columns are pinned, drag the column to the edge of the grid and wait for approximately one second. The grid will then assume you want to freeze/pin and create a frozen/pinned area and place the column into it.
  • allowMouseWheel:boolean - Determines whether the scrolling with mouse wheel is enabled.
  • columnResizeMode:string - Sets the column resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size
  • rowResizeMode:string - Sets the row resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size
CcurrentUserSets or gets the id of the current user. Has to correspond to the id of an item from the users property/array. Depending on the current user, different privileges are enabled. If no current user is set, privileges depend on the element's properties.
CcolumnHeaderDescribes the column header settings.
CclipboardThe clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations.. Click for more details. Property object's options:
  • enabled:boolean - Sets or gets whether the property is enabled.
  • copyHeadersToClipboard:boolean - Sets or gets whether the copy the column headers to the clipboard.
  • autoFillMode:string - Sets or gets whether the copy-pasted values will be auto-filled by using automatic pattern detection. This is used in the Drag&Drop Multiple Cells selection. none does nothing. copy just copies the cells. 'fillSeries' detects and automatically fills the values. For example, if the selection has '1, 2' and the possible positions are more, the pasted values would be '1, 2, 3, 4, etc.
  • onPasteValue:{(args: {value: any, oldValue: any, dataField: string, id: string | number}): void} - Sets or gets a callback on paste.
CcolumnsThe columns property is used to describe all columns displayed in the grid. Click for more details. Property object's options:
  • align:string - Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'
  • allowExport:boolean - Sets or gets whether the column can be exported.
  • allowGroup:boolean - Sets or gets whether the column can be grouped.
  • allowHide:boolean - Sets or gets whether the column can be hidden.
  • allowSelect:boolean | null - Sets or gets whether the column can be selected.
  • allowEdit:any - Sets or gets whether the column can be edited. The property can be 'boolean' i.e accept true and false values. To dynamically determine which cells are editable, a callback function can be supplied to the 'allowEdit' property. For example: allowEdit: (id, dataField, value, data) => { return value === 'Cappuccino'; }
  • allowSort:boolean - Sets or gets whether the column can be sorted.
  • allowHeaderEdit:boolean - Sets or gets whether the column can be edited, when header editing is enabled.
  • allowFilter:boolean - Sets or gets whether the column can be filtered.
  • allowReorder:boolean - Sets or gets whether the column can be reordered.
  • allowResize:boolean - Sets or gets whether the column can be resized.
  • allowNull:boolean - Sets or gets whether the column can have 'null' values.
  • cardHeight:number - Sets or gets the cell's height in card view mode.
  • cellsFormat:string - Sets or gets the column's cells format. This property is used for applying a formatting to the cell values. Number format strings:
    'd' - decimal numbers.
    'f' - floating-point numbers.
    'n' - integer numbers.
    'c' - currency numbers.
    'p' - percentage numbers.

    For adding decimal places to the numbers, add a number after the formatting stri

    For example: 'c3' displays a number in this format $25.256
    Built-in Date formats:
    // short date pattern
    'd' - 'M/d/yyyy',
    // long date pattern
    'D' - 'dddd, MMMM dd, yyyy',
    // short time pattern
    't' - 'h:mm tt',
    // long time pattern
    'T' - 'h:mm:ss tt',
    // long date, short time pattern
    'f' - 'dddd, MMMM dd, yyyy h:mm tt',
    // long date, long time pattern
    'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
    // month/day pattern
    'M' - 'MMMM dd',
    // month/year pattern
    'Y' - 'yyyy MMMM',
    // S is a sortable format that does not vary by culture
    'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

    Date format strings:
    'd'-the day of the month;
    'dd'-the day of the month
    'ddd'-the abbreviated name of the day of the week
    'dddd'- the full name of the day of the week
    'h'-the hour, using a 12-hour clock from 1 to 12
    'hh'-the hour, using a 12-hour clock from 01 to 12

    'H'-the hour, using a 24-hour clock from 0 to 23
    'HH'- the hour, using a 24-hour clock from 00 to 23
    'm'-the minute, from 0 through 59
    'mm'-the minutes,from 00 though59
    'M'- the month, from 1 through 12
    'MM'- the month, from 01 through 12
    'MMM'-the abbreviated name of the month
    'MMMM'-the full name of the month
    's'-the second, from 0 through 59
    'ss'-the second, from 00 through 59
    't'- the first character of the AM/PM designator
    'tt'-the AM/PM designator
    'y'- the year, from 0 to 99
    'yy'- the year, from 00 to 99
    'yyy'-the year, with a minimum of three digits
    'yyyy'-the year as a four-digit number;
    'yyyyy'-the year as a four-digit number.
  • cellsAlign:string - Sets or gets the column's cells alignment. Accepts: 'left', 'right' and 'center'
  • cellsWrap:boolean - Sets or gets the column's cells wrapping. Accepts: true or false.
  • cellsVerticalAlign:string - Sets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'
  • className:string - Sets or gets the column's header CSS class name. You can apply multiple CSS class names by separating them with space.
  • cellsClassName:any - Sets or gets the column's cells CSS class name(s). The property can be used with string and function. You can apply multiple CSS class names by separating them with space or you can return a CSS class name(s) when you use it as a function. The function gets called with the following parameters: index - row's index, dataField - column's data field, cellValue - current cell's value, rowData - current row's data, row - GridRow object. Ex: cellsClassName: (index, dataField, value, rowData, row) => { if (index === 0) { return 'cell-class-1' } }
  • cellsCSSRules:any - Sets or gets the column's cells CSS class rules. Different CSS class names are conditionally applied. Example: label: 'Quantity', dataField: 'quantity', editor: 'numberInput', cellsClassRules: { 'one': settings => settings.value > 5, 'two': settings => settings.value <5, 'three': settings => settings.value === 3 }. The settings object contains the following properties: index, value, dataField, row, api.
  • columnGroup:string - Sets the name of the column group.
  • dataField:string - Sets or gets the column's data source bound field.
  • dataType:string - Sets or gets the column's data type. Any of the following value is valid: 'string', 'number', 'int', 'date', 'bool', 'object', 'any'
  • displayField:string - Sets or gets the column's data source bound field which will be displayed to the user. When the property is not set, it is equal to the 'dataField'.
  • description:string - Sets or gets the column's description. The description of the column is displayed in the column's header, when the end-user moves the pointer over the description button. 'showDescriptionButton' property determines whether the description button is visible.
  • dataSet:any - Sets or gets custom data object related to the column.
  • element:HTMLElement - Gets the HTML Element. The property returns null when the Column is not in the View.
  • editor:string | {template?: string, settings?: any, onInit?: any, onRender?: any, setValue?: any, getValue?: any} - Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): void', 'onRender(int row, string column, object editor, object rowData): void', 'setValue(object value): void' and 'getValue(object value): any' callback functions.
  • freeze:string | boolean - Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far).
  • filter:string - Sets or gets the filter of the column. Example: ['contains Andrew or contains Nancy']. Example with numeric filter ['quantity', '<= 3 and >= 8']. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - ['EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']. Example with a string filter applied to a string column - ['CONTAINS' 'burke' or 'CONTAINS' 'peterson']. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
  • filterMenuMode:string - Sets or gets the filter menu mode of the column. In 'basic' mode, a single input is displayed in the filter menu. In 'default' mode, two input options are available for more precise filtering. In 'excel' mode, checked list with unique values is displayed.
  • filterEditor:any - Sets or gets the column's filter editor. The value is an object with the following possible options: template: string, condition: string, onInit: any - callback function for init purposes, min: number, max: number, minLength: number, maxLength: number
  • formatFunction:{(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, oldValue?: any, value?: any, template?: any}): void} - 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:
    • formula:string - Sets or gets the column's formula. The formula you set will be applied to all cells. Example: COL(Name) & '-' & COL(Price) or IF(COL(Price) * COL(Quantity) > 5, 'Yes', 'No')
    • group:string - Sets or gets the column's group.
    • getCellValue:any - This function allows you to provide custom cell values, which will be displayed in the column's cells. The grid passes 3 arguments to the function - row id, column's dataField and row's data.
    • getFilterPanel:any - Gets the column's filter panel. The function should return HTMLElement which will represent the filter UI panel displayed in the filter menu. The function works in combination with updateFilterPanel
    • icon:string - Sets or gets the column's icon. Expects CSS class name.
    • label:string - Sets or gets the text displayed in the column's header.
    • labelTemplate:string | HTMLTemplateElement | HTMLElement | {(label: string): string} - Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
    • minWidth:number - Sets or gets the minimum width.
    • rowSpan:{(cellValue: any, rowIndex: number, data: any): number} - Sets or gets the column's rowSpan function. Allows you to dynamically span cells.
    • relationId:string - Sets or gets the relation id in the dataSourceSettings.relations. The 'relationField' property should be set.
    • relationField:string - Sets or gets the relation field in the dataSourceSettings.relations. The 'relationId' property should be set.
    • sortOrder:string | null - Sets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null.
    • sortIndex:number - Sets or gets the sort index of the column. Accepts an integer value. This property can be used to get or set the column's sort index when sorting mode is 'many'.
    • sortComparator:any - Sets or gets a custom 'sortComparator' function. It can be used for implementing custom sorting. Ex: sortComparator: (value1, value2) => { if (value1 === value2) return 0; return value1 <value2; }
    • showActionButton:boolean - Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.
    • showIcon:boolean - Sets or gets whether the column's header icon is displayed.
    • showDescriptionButton:boolean - Sets or gets whether the column's header description button is displayed.
    • width:string | number - Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.
    • template:string | HTMLTemplateElement | HTMLElement | {(row: GridRow, column: GridColumn, cell: GridCell, oldValue: any, value: any, template: any): void} - Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images', 'checklist', 'attachments', 'sparklines', 'richText', 'color', 'rating', 'duration', 'startDate', 'dueDates'. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.
    • templateSettings:any - Sets or gets additional settings related to the column's template. For example, when the template is 'sparklines', the templateSettings could be an object which defines has 'type' - 'bar', 'column', 'line' or 'pie'. If you want to apply a custom color, you can add the 'colorFunction: function(value) { } and return a custom color as a 'hex' string or a 'tooltipFormatFunction: function(value) {}' which returns a formatted tooltip string. Additional properties are 'min', 'max', 'gap' and 'strokeWidth'.
    • validationRules:[] | null - Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.
      • Property object's options:
      • verticalAlign:string - Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'
      • summary:string[] - Sets or gets the column summary. The property should be set to an array with the following possible values: 'sum', 'min', 'max', 'avg', 'count', 'median', 'stdev', 'stdevp', 'var', 'varp'.
      • updateFilterPanel:any - Updates the column's filter panel. The function works in combination with getFilterPanel
      • visible:boolean - Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
      CcontextMenuContext Menu is the drop-down menu displayed after right-clicking a Grid row. It allows you to delete row, edit cell or row depending on the edit mode. The 'contextMenuItemCustom' dataSource option allows you to add custom menu item to the context menu. You can replace the context menu by using the 'selector' property and setting it to ID of a Smart.Menu component. Click for more details. Property object's options:
      • enabled:boolean - Sets or gets whether the context menu is enabled. If the value is false, the context menu will not be displayed, when user right clicks on a row.
      • customContextMenuItems:[] - Sets an array of custom context menu items to be displayed in the context menu.
      • dataSource:object - Sets the data sources to the context menu.
        • Property object's options:
        • contextMenuItemDelete:object - Describes the delete item.
        • contextMenuItemEdit:object - Describes the edit item.
        • contextMenuItemCustom:object - Describes the custom item.
      • selector:string - Sets the ID or CSS Class of a Smart.Menu component to be used as a context menu for the Grid.
      • width:number - Sets the width of the context menu.
      • height:number | null - Sets the height of the context menu.
      CcolumnMenuColumn Menu is the drop-down menu displayed after clicking the column header's drop-down button, which is displayed when you hover the column header. It allows you to customize column settings. For example: Sort, Filter or Group the Grid by the current column. Click for more details. Property object's options:
      • autoClose:boolean - Automatically closes the column menu.
      • dataSource:object - Sets the data sources to the column menu.
        • Property object's options:
        • columnMenuCustomizeType:object - Describes the settings of the column menu customize type
        • columnMenuItemRename:object - Describes the settings of the column menu item rename.
        • columnMenuItemEditDescription:object - Describes the settings of the column menu item edit description.
        • columnMenuItemClone:object - Describes the settings of the column menu item duplicate.
        • columnMenuItemInsertLeft:object - Describes the settings of the column menu item insert left.
        • columnMenuItemInsertRight:object - Describes the settings of the of the column menu item insert right.
        • columnMenuItemSortAsc:object - Describes the settings of the column menu item sort ascending.
        • columnMenuItemSortDesc:object - Describes the settings of the column menu item sort descending.
        • columnMenuItemSort:object - Describes the settings of the column menu item to add sorting.
        • columnMenuItemRemoveSort:object - Describes the settings of the column menu item remove sort.
        • columnMenuItemFilter:object - Describes the settings of the column menu item filter.
        • columnMenuItemRemoveFilter:object - Describes the settings of the column menu item remove filter.
        • columnMenuItemGroupBy:object - Describes the settings of the column menu item group by.
        • columnMenuItemRemoveGroupBy:object - Describes the settings of the column menu item group by.
        • columnMenuItemHide:object - Describes the settings of the column menu item hide.
        • columnMenuItemDelete:object - Describes the settings of the column menu item delete.
      • visible:boolean - Gets the visibility of the column menu. Returns true, when the column menu is visible.
      • enabled:boolean - Sets or gets whether the column menu is enabled. If the value is false, the column menu will not be displayed, when user hovers the column.
      • width:number - Sets the width of the column menu.
      • height:number | null - Sets the height of the column menu.
      CcolumnGroupsDescribes the settings of the column groups. Click for more details. Property object's options:
      • label:string - Sets the label.
      • labelTemplate:string | HTMLTemplateElement | HTMLElement | {(label: string): string} - Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
      • align:string - Sets the align.
      • name:string - Sets the name of the column group.
      • parentGroup:string - Sets the name of the parent column group.
      • verticalAlign:string - Sets the vertical align.
      DdropDownModedropDownMode
      CconditionalFormattingSets or gets details about conditional formatting to be applied to the Grid's cells. Click for more details. Property object's options:
      • column:string - The data field of a numeric column to format. Set 'all' to format all numeric columns.
      • condition:string - The formatting condition.
      • firstValue:number - The value to compare by. When condition is 'between', this is the start (from) value.
      • fontFamily:string - The fontFamily to apply to formatted cells.
      • fontSize:string - The fontSize to apply to formatted cells.
      • highlight:string - The background color to apply to formatted cells.
      • secondValue:number - When condition is 'between', this is the end (to) value. Otherwise, this value is not used.
      • text:string - The text color to apply to formatted cells.
      CchartingSets the Grid Charting Data Visualization. Click for more details. Property object's options:
      • enabled:boolean - Sets or gets whether charting is enabled.
      • colorScheme:string - Sets or gets the charting colors. Accepts the 'colorScheme' values of our Chart component.
      • appendTo:string | HTMLElement - Sets or gets the chart's container.
      • dialog:object - Sets or gets the charting dialog.
        • Property object's options:
        • header:string - Sets or gets the dialog header.
        • height:number - Sets or gets the dialog height.
        • width:number - Sets or gets the dialog width.
        • left:string | number - Sets or gets the dialog Left position.
        • top:string | number - Sets or gets the dialog Top position.
        • enabled:boolean - Sets or gets whether the dialog is enabled.
        • visible:boolean - Gets whether the dialog is displayed.
      CcheckBoxesSets the TreeGrid checkboxes.
      DdataExportSets the Grid Data Export options. Click for more details. Property object's options:
      • header:boolean - Sets whether the columns header will be exported.
      • filterBy:object - Sets whether the export uses the applied filters.
      • groupBy:object - Sets the groups of the exported data.
      • style:object - Sets a custom style object of the dataExport.
      • fileName:string - Sets the exported file's name.
      • pageOrientation:string - Sets the page orientation, when exporting to PDF.
      • expandChar:string - Sets the expand char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
      • collapseChar:string - Sets the collapse char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
      • view:boolean - Exports only the visible data of the Grid.
      • viewStart:number | null - Determines the start row index that will be exported or printed. 'view' should be set to true
      • viewEnd:number | null - Determines the end row index that will be exported or printed. 'view' should be set to true
      • rowIds:(string | number)[] | null - An array of row ids that denotes the rows to export.
      • headerContent:any - An array of custom rows to add before the Grid rows.
      • footerContent:any - An array of custom rows to add after the Grid rows.
      • addImageToCell:any - A function which allows you to add images to the cells in Export to Excel. The following params are passed: (index, dataField, value, values). It should return an object like this: return { image: { id: 'myImage' + index, base64: value, imageType: 'jpeg', width: 20, height: 11, position: { offsetX: 10 + (25 * values.indexOf(value)), offsetY: 5.5 } } };
      • setRowHeight:any - A function which allows you to set the height of the rows in the Export to Excel. The function gets the row index as parameter and should return its height as a number.
      • getSpreadsheets:any - A function which allows you to return additonal data to the Excel export to export into multiple sheets.
      • exportStyles:boolean - A function which allows you to export a styled data grid to Excel.
      • cellFormatFunction:any - A function which allows you to format cells before export. (index, dataField, value) are the params. It should return the formatted value.
      • freezeHeader:boolean - Sets whether the header is frozen when Export to Excel.
      • autoConvertFormulas:boolean - Sets whether to auto-convert the formulas in the Excel export.
      • onlySelected:boolean - Sets whether to export only the selected cells or rows when Export to Excel.
      • exportAsTable:boolean - Sets whether to export it as Excel Table when Export to Excel
      DdataSourceSets the grid's data source. The value of dataSource can be an instance of Smart.DataAdapter or an Array.
      DdataSourceSettingsSets the grid's data source settings when the dataSource property is set to an Array or URL. 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.
      • sanitizeHTML:string - Sets or gets the XML binding root.
      • root: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
      • relations:any - Sets or gets the Grid relations. The property expects an array of objects. Each object should have '{id: string, label: string, columns: GridColumn[], dataSource: any}'. Once you have the relations defined, when you create a column, you can set 'relationId' and 'relationField'. This will automatically define a new column editor based on the relation settings.
      • virtualDataSource:{(resultCallbackFunction: any, details: DataAdapterVirtualDataSourceDetails): void} - Sets the virtual data source function which is called each time the Grid requests data. Example for calling the callback function with the new data set: resultCallbackFunction({dataSource: data}); Demos using 'virtualDataSource' are available on the Grid demos page. Example: https://www.htmlelements.com/demos/grid/virtualscroll/
      • 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. Example: https://www.htmlelements.com/demos/grid/virtual-tree-grid/
      EeditingDescribes the grid's editing settings. Click for more details. Property object's options:
      • allowRowHeaderEdit:boolean - Enables row header cells editing.
      • allowColumnHeaderEdit:boolean - Enables column headers editing.
      • autoUpdateFilterAndSort:boolean - Automatically re-applies already applied column filters and sort orders, after editing.
      • allowListOpenOnContentClick:boolean - Automatically opens a drop-down editor not only when the arrow button is clicked, but also when you click an item from it.
      • enabled:boolean - Enables editing.
      • batch:boolean - Enables batch editing. This allows editing multiple grid rows on the client side and sending them with a single server request.
      • action:string - Determines the way editing is initiated.
      • readOnlyEdit:boolean - Read Only Edit is a mode in the grid whereby Cell Editing will not update the data inside the grid. Instead the grid invokes the 'onCellEditRequest' function allowing the application to process the update request.
      • commandKeys:object - Describes command keys.
        • Property object's options:
        • commandKeyEdit:object - Describes the edit command key.
        • commandKeyCancel:object - Describes the cancel command key.
        • commandKeyUpdate:object - Describes the update command key.
      • commandBar:object - Describes the grid's command bar settings. The command bar is a toolbar or statusbar with tools for saving and reverting edits.
        • Property object's options:
        • visible:boolean - Makes the command bar visible.
        • position:string - Sets the command bar's position.
        • displayMode:string - Sets what is to be displayed in command bar buttons.
        • dataSource:object - Sets the command bar's data source.
      • commandColumn:object - Describes the grid's command column settings. The command column can be used to edit or delete a row.
        • Property object's options:
        • visible:boolean - Makes the command column visible.
        • inline:boolean - Enables inline display of the command column.
        • position:string - Sets the command column's position.
        • displayMode:string - Sets what is to be displayed in command column buttons.
        • dataSource:object - Sets the command column's data source.
        • width:number | null - Sets the width of the command column.
      • mode:string - Sets the grid's edit mode.
      • addNewRow:object - Describes the settings of the 'Add New Row' UI element which enables the quick adding of rows to the Grid with a single click.
        • Property object's options:
        • autoCreate:boolean - Adds new row by clicking the Enter button, when the focused row is the last row.
        • autoEdit:boolean - Determines whether the newly added row enters automatically in edit mode, when added.
        • position:string - Sets the position of the 'Add New Row' UI element.
        • displayMode:string - Sets or gets the display mode of the new row action. It could be either 'row' or 'button'.
        • visible:boolean - Makes the 'Add New Row' UI element visible.
        • label:string - Sets the label of the 'Add New Row' UI element.
      • addNewColumn:object - Enables users to dynamically add new columns through the User Interface. When the add new column is visible, a '+' is displayed as a last column. Clicking it opens a dialog for adding new columns.
      • dialog:object - Describes dialog's editing settings.
        • Property object's options:
        • header:string - Sets the header text of the dialog
        • height:string | number - Sets the height of the edit dialog.
        • width:string | number - Sets the width of the edit dialog.
        • left:string | number - Sets the 'left' css property to the dialog.
        • top:string | number - Sets the 'top' css property to the dialog.
        • enabled:boolean - Enables dialog editing option.
        • sidePanel:boolean - Enables dialog side panel option. When this is enabled, the dialog is opened from the right side of the Grid.
        • visible:boolean - Sets the visibility of the dialog.
      • addDialog:object - Describes add dialog's settings
        • Property object's options:
        • header:string - Sets the header text of the dialog
        • height:string | number - Sets the height of the dialog.
        • width:string | number - Sets the width of the dialog.
        • left:string | number - Sets the 'left' css property to the dialog.
        • top:string | number - Sets the 'top' css property to the dialog.
        • enabled:boolean - Enables the add dialog option.
        • visible:boolean - Sets the visibility of the dialog.
      • deleteDialog:object - Describes delete dialog's settings
        • Property object's options:
        • header:string - Sets the header text of the dialog
        • height:string | number - Sets the height of the dialog.
        • width:string | number - Sets the width of the dialog.
        • left:string | number - Sets the 'left' css property to the dialog.
        • top:string | number - Sets the 'top' css property to the dialog.
        • enabled:boolean - Enables the delete dialog option.
        • visible:boolean - Sets the visibility of the dialog.
      FfilteringDescribes the grid's filtering settings. Click for more details. Property object's options:
      • enabled:boolean - Enables filtering.
      • operator:string - Determines the filtering operator used in the Grid. By default filters are applied with 'and' operator i.e returns a set of rows matching the filter expressions of columnA AND columnB. The other option is to return a set of rows matching the filter expressions of columnA OR columnB. For example: grid.filtering.operator = 'or'; grid.addFilter('lastName', 'contains "davolio"') grid.addFilter('firstName', 'contains "Antoni"'); - that code will apply two filters to the Grid and will return all rows where firstName is 'Antoni' or the lastName is 'Davolio'
      • filter:[] - An array of filtering conditions to apply to the DataGrid. Each member of the filter array is an array with two members. The first one is the column dataField to apply the filter to. The second one is the filtering condition. Example: [['firstName', 'contains Andrew or contains Nancy'], ['quantity', '<= 3 and >= 8']]. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - [['firstName', 'EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']]. Example with a string filter applied to a string column - [['lastName','CONTAINS' 'burke' or 'CONTAINS' 'peterson']]. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
      • filterRow:object - Describes the filter row's settings.
        • Property object's options:
        • visible:boolean - Makes the filter row visible.
        • menuVisible:boolean - Makes the filter row's menu visible.
        • applyMode:string - Sets the way filtering through the filter row is applied.
        • autoApplyModeDelay:number - Sets the delay (in milliseconds) before applying filtering (when filtering.filterRow.applyMode is 'auto').
      • filterMenu:object - Describes the settings for the filter menu.
        • Property object's options:
        • visible:boolean - Sets the visibility of the filter menu.
        • buttons:string[] - Sets the button text of the filter menu.
        • mode:string - Sets the filter menu mode.
        • dataSource:any - Sets the filter menu datasource.
        • width:number - Sets the width of the filter menu.
        • height:number - Sets the height of the filter menu.
      • filterBuilder:object - (In Development)Describes the settings for the filter builder.
      FfooterDescribes the footer settings of the grid.
      FformulasSets or gets whether Excel-like formulas can be passed as cell values. Formulas are always preceded by the = sign and are re-evaluated when cell values are changed. This feature depends on the third-party free plug-in formula-parser (the file formula-parser.min.js has to be referenced).
      GgroupingDescribes the grid's grouping settings. Click for more details. Property object's options:
      • enabled:boolean - Enables grouping.
      • allowCollapse:boolean - Enables collapsing of groups.
      • autoExpandAll:boolean - Automatically expands all groups.
      • autoExpandToLevel:number - Automatically expands all groups to a given level.
      • autoHideGroupColumn:boolean - Automatically hides all grouped columns.
      • expandMode:string - Sets the group expand mode.
      • formatFunction:{(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, value?: any, template?: any}): void} - Sets or gets the column's format function.
      • groupRowHeight:string | number - Sets the group row height.
      • groupBy:string[] - Sets or gets the data fields to group by.
      • groupIndent:number - Sets the indent of the group.
      • groupBar:object - Describes the group bar's settings.
        • Property object's options:
        • visible:boolean - Makes the group bar visible.
        • allowColumnDragDrop:boolean - Enables column drag and drop.
        • allowColumnCloseButtons:boolean - Enables column close buttons.
      • onGroupDefaultExpanded:any - Expands a group in the first grid render. Example: onGroupDefaultExpanded: (dataItem) =>{ return dataItem.label === 'Peppermint Mocha Twist' }
      • renderMode:string - Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level. In 'multipleColumns' mode, each group is displayed in its column.
      • toggleButtonIndent:number - Sets the indent of the group toggle button.
      • summaryRow:object - Describes the group summary row's settings.
      GgroupHeaderDescribes the settings for the group header.
      HheaderDescribes the header settings of the grid. Click for more details. Property object's options:
      • visible:boolean - Sets the header visibility.
      • template:string | HTMLTemplateElement | {(element: HTMLElement): void} - Sets a template for the header.
      • onInit:{(element: HTMLElement): void} - This callback function can be used for customization of the Header toolbar. The Toolbar HTML Element is passed as an argument.
      • buttons:string[] - Determines the buttons displayed in the Grid header. 'columns' displays a button opening the columns chooser panel. 'filter' displays a button opening the filtering panel. 'group' displays a button opening the grouping panel. 'sort' displays a button opening the sorting panel. 'format' displays a button opening the conditional formatting panel. 'search' displays a button opening the search panel. 'colors' displays a button with colors options for formatting.
      • searchCommand:string - Sets the search command type.
      • customButton:object - Custom toolbar button. Allows you to add a custom button to the toolbar.
        • Property object's options:
        • command:string - Sets the name of a function which will be invoked when the custom button is clicked.
        • visible:boolean - Sets the visibility of the custom button.
        • icon:string - Sets the icon of the custom button.
        • label:string - Sets the label of the custom button.
      LlayoutAn object containing settings related to the grid's layout. Click for more details. Property object's options:
      • allowCellsWrap:boolean - Enables or disables the Cells Value wrapping. When the property is true, cell value can wrap in multiple lines.
      • autoSizeNewColumn:boolean - Automatically sets width to any new Column which does not have its 'width' property set.
      • autoSizeNewColumnMinWidth:number - Sets the min width of the new column.
      • autoHeight:boolean - Automatically sets the height of the Grid.
      • autoWidth:boolean - Automatically sets the width of the Grid. All columns should have a 'width' property set to a number in order to use this feature.
      • autoGenerateColumnWidth:string | number | null - Sets the width of the auto-generated Grid columns.
      • columnWidth:string | number | null - Sets the width of the Grid columns.
      • columnHeight:string | number | null - Sets the height of the Grid columns.
      • columnMinHeight:number - Sets the minimum height of the Grid columns.
      • cardMinWidth:number - Sets the minimum width of a card in card view.
      • cardsPerRow:number - Sets the cards per row.
      • cardVertical:boolean - Sets whether cards are vertically oriented. In this layout mode, the column label is displayed above the column value
      • dropDownWidth:number - Sets the width of the Grid when displayed in a drop-down mode.
      • dropDownHeight:number - Sets the height of the Grid when displayed in a drop-down mode.
      • rowMinHeight:number - Sets the minimum height of the Grid rows.
      • rowHeight:string | number | null - Sets the height of the Grid rows. The property can be set to null, auto or a number.
      • viewBarWidth:number - Sets the width of the view bar.
      UunlockKeySets or gets the unlockKey which unlocks the product.
      LlocaleSets or gets the language. Used in conjunction with the property messages.
      KkeysKeys handling. You can define a key like "Enter": "Tab" or set a function as a value. When the key is pressed, it will be mapped to the other key, action such as 'copy', 'copyPrev', 'copyNext' or 'delete' or just a function defined in your document.
      MmessagesSets the messages values.
      OonCellValueCallback function, which is called when the Grid needs a cell value to render it. When you implement this function, you can override the default cell value rendering.
      OonCellUpdateCallback function, which is called when a cell value will be updated. This function is useful if you want to make Ajax call to a server to validate the cell changes. If the changes are validated, invoke the confirm function.
      OonCellRenderCallback function, which is called when a cell is rendered. This function is useful if you want to customize GridCell properties, before the cell is rendered.
      OonCellBeginEditCallback function, which is called when a cell edit starts. If you return false, the edit will be canceled.
      OonCellEditRequestCallback function, which is called when a cell edit ends. It is used along with the 'editing.readOnlyEdit' property when it is set to true and the purpose of this function is to update the Grid cell after editing.
      OonCellValueChangedCallback function, which is called when a cell value is changed.
      OonBeforeInitCallback function() called before the grid has been initialized and the Grid's Virtual DOM is not created.
      OonInitCallback function() called when the grid is initializing and the Grid's Virtual DOM is created.
      OonAfterInitCallback function() called after the grid has been initialized and the Grid's Virtual DOM is created.
      OonChartInitCallback function(chart: Smart.Chart) called when the chart has been initialized. You can use this function to customize the Chart element settings.
      OonRenderCallback function() called when the grid has been rendered.
      OonLoadCallback function() called when the grid has been rendered for first time and bindings are completed. The component is ready.
      OonKeyCallback function(event: KeyboardEvent) called when the grid is on focus and a keyboard key is pressed.
      OonRowInitCallback function, which is called when a row is initializing. This function can be used to customize the row settings.
      OonRowDetailInitCallback function, which is called when a row detail is initializing. Row details are displayed below the row's data or in a separate dialog.
      OonRowDetailUpdatedCallback function, which is called when a row detail is udpating.
      OonRowHistoryCallback function which is called when a row history is updated. The row history for edits is recorded when the 'storeHistory' property is enabled.
      OonRowStyleCallback function which is called when a row style is updated. The row style can be changed by using the row dialog or the 'setRowStyle' method.
      OonRowInsertedCallback function which is called when a row has been inserted.
      OonRowRemovedCallback function, which is called when a row has been removed.
      OonRowUpdateCallback function, which is called when row's cell values will be updated. This function is useful if you want to make Ajax call to a server to validate the edit changes. If the changes are validated, invoke the confirm function.
      OonRowUpdatedCallback function, called when a row has been updated.
      OonRowClassCallback function called by the Grid when defined. It is used to get the CSS class applied to a row.
      OonCellClassCallback function called by the Grid when defined. It is used to get the CSS class applied to a cell.
      OonColumnInitCallback function, which is called when a column has been initialized. This function can be used to customize the column settings.
      OonColumnInsertedCallback function, which called when a column has been inserted.
      OonColumnRemovedCallback function, which is called when a column has been removed.
      OonColumnUpdatedCallback function, which is called when a column has been updated.
      OonColumnCloneCallback function, which is called when a column has been cloned.
      OonCommandCallback function, which is called when a command is executed. The name argument is the command's name. The command argument is the command's function. details are built in command arguments passed by the Grid. The handled parameter allows you to cancel built-in command, because when you set it to true the Grid will not execute the default command's behavior.
      PpagingDescribes the paging settings. Click for more details. Property object's options:
      • enabled:boolean - Enables pagination.
      • spinner:object - Describes the spinner pagination settings.
      • pageSize:number - Sets the number of rows per page.
      • pageHierarchySize:number - Sets the number of hierarchical rows per page. For example, displays 2 root groups per page, when grouping is enabled.
      • pageIndex:number - Sets the start page.
      PpagerDescribes the pager settings. Click for more details. Property object's options:
      • autoEllipsis:string - Sets the ellipsis display mode.
      • position:string - Sets the position of pager.
      • template:string | HTMLTemplateElement - Sets a template for the pager.
      • pageSizeSelector:object - Describes the settings for the 'rows per page' option.
        • Property object's options:
        • visible:boolean - Sets the visibility of the 'rows per page' option.
        • dataSource:object - Sets the count of the 'rows per page' option.
        • position:string - Sets the position of the 'rows per page' option.
      • summary:object - Describes the summary settings.
      • navigationButtons:object - Describes the navigation buttons settings.
        • Property object's options:
        • position:string - Sets the navigation buttons position.
        • prevNextButtons:object - Describes the settings about buttons 'previous page' and 'next page'.
        • firstLastButtons:object - Describes the settings about buttons 'first page' and 'last page'.
        • labels:object - Describes the labels settings for navigation buttons.
      • navigationInput:object - Describes the settings about navigation input option.
      • pageIndexSelectors:object - Describes the settings for the numeric page buttons.
      • visible:boolean - Sets the visibility of pager.
      RrowDetailSets the row details. Click for more details. Property object's options:
      • enabled:boolean - Enables the row details.
      • height:number - Sets the height of the row details.
      • position:string - Sets the position of the Column which allows you to dynamically expand/collapse the row details.
      • template:string | HTMLTemplateElement - Sets the template of the row details.
      • visible:boolean - Sets the visibility of the Column which allows you to dynamically expand/collapse the row details.
      • dialog:object - Sets the row details dialog. When enabled, row details will be displayed in a Dialog.
        • Property object's options:
        • header:string - Sets the header of the dialog.
        • height:string | number - Sets the height of the dialog.
        • width:string | number - Sets the width of the dialog.
        • left:string | number - Sets the Left position of the dialog.
        • top:string | number - Sets the Top position of the dialog.
        • enabled:boolean - Sets whether the row details dialog is enabled. When enabled, row details are displayed in a dialog.
      RrowCSSRulesSets or gets the rows CSS class rules. Different CSS class names are conditionally applied. Example: rowCSSRules: { 'cell-class-1': settings => settings.data.quantity === 5, 'cell-class-2': settings => settings.data.quantity < 5, 'cell-class-3': settings => settings.data.quantity > 5 }. The settings object contains the following properties: index, data, row, api.
      RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
      RrowsThe rows property is used to describe all rows displayed in the grid. Click for more details. Property object's options:
      • allowToggle:boolean - Sets or gets the row can be expanded or collapsed.
      • allowResize:boolean - Sets or gets the row can be resized.
      • allowSelect:boolean | null - Sets or gets the row can be selected.
      • allowCheck:boolean - Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.
      • checked:boolean - Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.
      • cells:Smart.Grid.Cell[] - Gets the Row's Cells array.
        • Property object's options:
        • align:string - "Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'".
        • column:Smart.Grid.Column - Gets the column associated to the cell.
        • color:string - Sets or gets the cell's text color.
        • background:string - Sets or gets the cell's background.
        • borderColor:string - Sets or gets the cell's borderColor.
        • colSpan:number - Sets or gets the cell's colSpan.
        • editor:"Object{template: string, setValue: {(value: object): void}, getValue: {(): object}, blur: {(): void}, focus: {(): void}, attach: {(): void}, detach: {(): void}, selector: HTMLTemplateElement". Template values: 'checkBox', 'input', 'numberInput', 'autoComplete', 'dateTimePicker', 'custom' - Sets or gets the cell's editor.
        • element:HTMLElement - Gets the HTMLElement associated to the cell.
        • getFormattedValue:{(value: any, type: string): void} - Gets a formatted number or Date.
        • isEditing:boolean - Gets whether the cell is in edit mode.
        • oldValue:any - Gets the old value of the cell
        • fontSize:string - Sets or gets the cell's fontSize
        • fontWeight:string - Sets or gets the cell's fontWeight
        • fontFamily:string - Sets or gets the cell's fontFamily
        • fontStyle:string - Sets or gets the cell's fontStyle
        • readonly:boolean - "Sets or gets whether the cell can be edited.".
        • row:Smart.Grid.Row - Gets the row object associated to the cell.
        • rowSpan:number - Sets or gets the row span.
        • selected:boolean - Sets or gets whether the cell is selected.
        • setProperties:{(properties: {name: string, value: string}[]): void} - "Each property is an object{name: string, value: any}. This function allows you to update multiple properties with single refresh.".
        • tooltip:string - "Allowed values are: 'top', 'middle' or 'bottom'".
        • value:any - The cell's value
        • verticalAlign:string - "Sets or gets the vertical alignment. Allowed values are: 'top', 'center' or 'bottom'".
        • setStyle:{(value: any): void} - "Method which applies a cell style object. Expects a JSON object with the following possible values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'
      • children:Smart.Grid.Row[] - Gets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.
      • data:any - Gets the row's bound data.
      • detailHeight:number - Sets or gets the row's detail height.
      • detailTemplate:string | HTMLTemplateElement | null - Sets or gets the row's detail template.
      • element:object | null - Gets the HTML Element. The property returns null when the Row is not in the View.
      • expanded:boolean - Sets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode.
      • header:HTMLElement - Gets the row's header element.
      • height:number - Sets or gets the row's height.
      • index:number - Gets the row's bound index.
      • id:string | number - Gets the row's bound id.
      • leaf:boolean - Gets whether the row is leaf row in TreeGrid or Grouping mode.
      • maxHeight:number - Sets or gets the row's maximum height.
      • minHeight:number - Sets or gets the row's minimum height.
      • freeze:string | boolean - Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the row to top(near) or bottom(far).
      • selected:boolean - Sets or gets whether the row is selected.
      • showDetail:boolean - Sets or gets whether the row detail is displayed.
      • setStyle:{(value: any): void} - "Method which applies a style object to all cells. Expects a JSON object with the following allowed values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'
      • visible:boolean - Sets or gets whether the row is visible. Set the property to 'false' to hide the row.
      • visibleIndex:number - Gets the visible index of the row.
      • getCell:any - Methods which gets a cell, which is inside a row. A dataField string is a required argument, when you call this method.
      SscrollingSets the scroll mode settings.
      SsummaryRowDescribes the summary row settings.
      SstateSettingsSets the grid's state settings. Click for more details. Property object's options:
      • autoSave:boolean - Enables or disables auto-save of the Grid's state
      • autoLoad:boolean - Enables or disables auto-load of the Grid's state on page reload.
      • enabled:boolean - Enables or disables save/load of the grid state.
      • current:string - Sets or gets the current state.
      • storage:any - Container which is auto-filled with state objects when you call the saveState method or enable the autoSave of states. Each object has a key which is the state's name and value which is a json with the state's properties.
      • onStateChange:any - Function called when the state is changed.
      • options:string[] - Array with state options such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', 'columns'. This property determines which parts of the state would be saved or loaded.
      SselectionDescribes the selection settings. Click for more details. Property object's options:
      • enabled:boolean - Enables the selection option.
      • allowRowHeaderSelection:boolean - Sets or gets whether selection by clicking on a Row header is allowed.
      • allowColumnHeaderSelection:boolean - Sets or gets whether selection by clicking on a Column header is allowed.
      • allowRowSelection:boolean - Sets or gets whether selection by clicking on a Row is allowed.
      • allowCellSelection:boolean - Sets or gets whether selection by clicking on a cell is allowed.
      • allowDragSelection:boolean - Sets or gets whether selection by dragging(like in Excel) is allowed.
      • allowDragSelectionAutoScroll:boolean - Sets or gets whether selection by dragging will automatically scroll the Grid view.
      • allowCellDragSelectionHandle:boolean - Sets or gets whether the Cells selection bottom-right corner selection 'Drag Handle' (litte square like in Excel) is displayed. That handle allows you to resize the selection horizontally or vertically
      • allowCellDragDropSelectionHandle:boolean - Sets or gets whether the Cells selection can be dragged and dropped. Drag happens when the cursor is moved to the bottom of the cells selection. The cursor is changed to a drag cursor. Press the button and hold and move the selection. By default the dragged cell values are copied on drop.
      • allowCellDragSelectionAutoFill:boolean - Sets or gets whether the Cells selection will be auto-filled with values on drop when dragging through the 'Drag Handle'.
      • defaultSelection:boolean - Sets or gets whether the default browser's text selection is enabled.
      • mode:string - Sets or gets whether the selection allows you to select 'one', 'many' or a variation of 'many' called 'extended'. 'one' allows you to have only single cell or row selected. 'many'
      • action:string - Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API.
      • checkBoxes:object
        • Property object's options:
        • autoShow:boolean - Sets or gets whether the checkboxes are automatically displayed only when the mouse is over the Grid. When false, checkboses are always displayed
        • enabled:boolean - Sets or gets whether the checkboxes selection is enabled. In that mode a new column with checkboxes is displayed.
        • action:string - Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API.
        • selectAllMode:string - Sets or gets whether the checkbox selection selects all rows in the current page or all rows. The 'none' setting disables the header checkbox.
        • position:string - Sets or gets whether the position of the checkbox selection column.
      • selected:string
      SsortingDescribes sorting settings. Click for more details. Property object's options:
      • enabled:boolean - Enables sorting.
      • sort:string[] - Sets the sort columns to be sorted.
      • maintainSort:boolean - Maintains sorting when user edits data in the sorted column. The feature is useful when you want to apply sort just once and you set the property to false.
      • mode:string - Sets the count of allowed sorting columns. When the property value is set to 'many', users can sort data by multiple columns.
      • commandKey:string - Sets the command key. The property is used in the multi-column sorting. If commandKey='Control', users will be able to sort by multiple columns only while holding the 'Control' key.
      • sortToggleThreeStates:boolean - Enables switching between the three sort states: ascending, descending and not sorted.
      • sortToggleOnClick:boolean - Enables switching between the sort states on column click. This is the default behavior.
      • sortToggleOnClickAndCommandKey:boolean - Enables switching between the sort states on column click and holding down the command key.
      UusersSets the grid users. Expects an array with 'id', 'name' and optionally 'color' and 'image' properties.
      UuploadSettingsSets the grid's image and filter upload settings for the image and attachment columns. Click for more details. Property object's options:
      • url:string - Sets or file/image upload url.
      • removeUrl:string - Sets or file/image remove url.
      • name:string - Sets or gets the upload field name. In the backend, you can use this name to access the images data. For example in expressJS, you can use something like that: const images = req['files']['userfile[]'];
      • data:string - Additional data to pass to the server. The format should be a JSON string.
      • onUploadCompleted:any - Function called when the upload is completed. JSON object with 'files', 'status', 'fileURL' and 'serverResponse' are passed as parameters when the function is called by the Grid.
      • onUploadError:any - Function called when the upload has failed. JSON object with 'files', 'status' and 'serverResponse' are passed as parameters when the function is called by the Grid.
      VviewSets the current data view. The possible values are 'grid', 'kanban' and 'card'.

      Events

      BbeginEditThis event is triggered, when the edit begins. After the event occurs, editing starts. If you need to prevent the editing for specific cells, rows or columns, you can call event.preventDefault();.
      BbatchChangeThis event is triggered, when the Grid's header toolbar is displayed and the 'OK' button of a header dropdown is clicked. For example, when you open the columns customize panel, reorder columns and click the 'OK' button.
      BbatchCancelThis event is triggered, when the Grid's header toolbar is displayed and the 'Cancel' button of a header dropdown is clicked.
      CchangeThis event is triggered, when the selection is changed. When you select with a drag, the event is triggered when the drag starts and ends.
      CcolumnClickThis event is triggered, when the user clicks on the header of a column.
      CcolumnDoubleClickThis event is triggered, when the user double clicks on the header of a column.
      CcolumnResizeThis event is triggered, when the user resized a column.
      CcolumnDragStartThis event is triggered, when the user starts a column drag.
      CcolumnChangeThis event is triggered, when a column property is changed.
      CcolumnDraggingThis event is triggered, when the user drags a column.
      CcolumnDragEndThis event is triggered, when the user drops a column.
      CcolumnReorderThis event is triggered, when the user reorders a column.
      CcommentAddThis event is triggered, when the user enters a comment in the row edit dialog.
      CcommentRemoveThis event is triggered, when the user removes a comment in the row edit dialog.
      CcontextMenuItemClickThis event is triggered, when the user clicks on a context menu item.
      RrowDragStartThis event is triggered, when the user starts a row drag.
      RrowDraggingThis event is triggered, when the user drags a row.
      RrowDragEndThis event is triggered, when the user drags a row.
      RrowReorderThis event is triggered, when the user reorders a row.
      RrowExpandThis event is triggered, when the user expands a row of the grid. The Grid is in TreeGrid/Grouping mode.
      RrowCollapseThis event is triggered, when the user collapsed a row of the grid. The Grid is in TreeGrid/Grouping mode.
      RrowClickThis event is triggered, when the user clicks on a row of the grid.
      RrowDoubleClickThis event is triggered, when the user double clicks on a row of the grid.
      RrowResizeThis event is triggered, when the user resized a row.
      RrowStarredThis event is triggered, when the user clicks on the row header's star.
      CcellClickThis event is triggered, when the user clicks on a cell of the grid.
      CcellDoubleClickThis event is triggered, when the user double clicks on a cell of the grid.
      EendEditThis event is triggered, when the edit ends.
      FfilterThis event is triggered, when a filter is added or removed.
      GgroupThis event is triggered, when the rows grouping is changed.
      OopenColumnDialogThis event is triggered, when the add new column dialog is opened.
      CcloseColumnDialogThis event is triggered, when the add new column dialog is closed.
      RresizeThis event is triggered, when the grid is resized.
      RrowTapThis event is triggered when the user touches and holds on the row for at least 300ms.
      CcellTapThis event is triggered when the user touches and holds on the cell for at least 300ms.
      PpageThis event is triggered, when the user changes the pages.
      SsortThis event is triggered, when a sorting column is added or removed.
      SscrollBottomReachedThis event is triggered, when the user reaches the bottom of the grid.
      SscrollTopReachedThis event is triggered, when the user reaches the top of the grid.

      Methods

      AaddRowAdds a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
      AaddNewRowAdds a new row and puts it into edit mode. When batch editing is enabled, the row is not saved until the batch edit is saved.
      AaddNewColumnAdds a new column.
      AaddUnboundRowAdds a new unbound row to the top or bottom. Unbound rows are not part of the Grid's dataSource. They become part of the dataSource, after an unbound row is edited.
      AaddFilterAdds a filter to a column. This method will apply a filter to the Grid data. Example for adding multiple filters to a column: grid.addFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"']). Example for adding single filter to a column: grid.addFilter('lastName', 'CONTAINS "burke"'). Example for adding numeric filter: grid.addFilter('quantity', '<= 5')
      AaddGroupGroups the Grid by a data field. This method will add a group to the Grid when grouping is enabled.
      AaddSortSorts the Grid by a data field. This method will add a sorting to the Grid when sorting is enabled.
      AautoSizeRowsAuto-sizes grid rows. This method will update the height of all Grid rows.
      AautoSizeColumnsAuto-sizes grid columns. This method will update the width of all Grid columns.
      AautoSizeColumnAuto-sizes grid column. This method will update the width of a Grid column by measuring the cells and column header label width.
      AareAllRowsSelectedThis method returns true, if all rows in the Grid are selected.
      BbeginUpdateStarts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
      BbeginEditBegins row, cell or column. This method allows you to programmatically start a cell, row or column editing. After calling it, an editor HTMLElement will be created and displayed in the Grid.
      CclearFilterClears all filters. Refreshes the view and updates all filter input components.
      CclearGroupsClears all data groups. Refreshes the view and updates the DataGrid component.
      CclearSortClears all sorting. Refreshes the view and updates the DataGrid component.
      CclearSelectionClears the selection that user have made. All row, cell and column selection highlights will be removed.
      CcancelEditCancels the editing. This method closes the cell editor and cancels the changes.
      CcheckRowChecks a TreeGrid row. This method updates the row's check-box.
      CcheckAllRowsChecks all TreeGrid or Grouping rows. This method updates all check-boxes in the TreeGrid or Grouping rows.
      CclearRowsClears the user selection and empties the data source. The Grid will display 'No Rows' in the view.
      CcloseMenuCloses the column drop-down menu.
      CcollapseRowCollapses a TreeGrid or Grouping row.
      CcollapseAllRowsCollapses all TreeGrid or Grouping rows.
      CcreateChartCreates a Chart, when charting is enabled.
      DdeleteRowDelete a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
      EensureVisibleScrolls to a row or cell. This method scrolls to a row or cell, when scrolling is necessary. If pagination is enabled, it will automatically change the page.
      EendEditEnds the editing. This method confirms all changes and closes the opened cell editor(s).
      EendUpdateEnds the update operation. This method will resume the rendering and will refresh the Grid.
      EexpandRowExpands a TreeGrid or Grouping row. For example, if you want to expand the first group, then its second sub grup, then the first sub sub group, you can use: grid.expandRow('0.1.0');
      EexpandRowsToGroupLevelExpands rows to a given group level. For example 'grid.expandRowsToGroupLevel(1);' means that all groups at the root level will be expanded.
      EexpandAllRowsExpands all TreeGrid or Grouping rows.
      EexportDataExports the Grid data to .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG or .PNG. The method uses the options of the dataExport property.
      FfindFinds entries by using a query and returns an array of row ids. Example: const rows = grid.find('nancy'); returns all rows that have 'nancy' value. Example 2: const rows = grid.find('nancy, davolio'); returns all rows that have 'nancy' and 'davolio' values in the same row. Example 3: const rows = grid.find(5, 'quantity', '>'); returns all rows where the value of the 'quantity' field is > 5.
      FfindCellsFinds entries by using a query and returns an array of cells. Each cell in the array is also an array in this format: [id, dataField, value]. Example: const cells = grid.findCells('nancy'); returns all cells that have 'nancy' value. Example 2: const cells = grid.findCells('nancy, davolio'); returns all cells that have 'nancy' and 'davolio' values.
      FfilterByFilter by all columns. This method works like a global filter and applies a filter to all grid columns.
      GgoToPageNavigates to a page, when paging is enabled.
      NnextPageNavigates to the next page, when grid paging is enabled.
      PprevPageNavigates to the prev page, when grid paging is enabled.
      FfirstPageNavigates to the first page, when grid paging is enabled.
      LlastPageNavigates to the last page, when grid paging is enabled.
      FfocusAndSelectFocuses and selects a cell or row. The keyboard navigation starts from the focused cell or row. Any previously applied selection will be cleared after calling this method.
      FforEachRowIterates through each row in the grid and calls the callback for each row. This is similar to the forEach method on a JavaScript array. This is called for each row, ignoring grouping, filtering or sorting applied in the Grid.
      FforEachRowAfterFilterAndSortSimilar to forEachRow. Iterates through each row in the grid and calls the callback for each row. This method takes into account filtering and sorting applied to the Grid.
      GgetVerticalScrollMaxGets the maximum position of the vertical scrollbar. You can use this method in combination with the setVerticalScrollValue to apply a new scroll position.
      GgetVerticalScrollValueGets the position of the vertical scrollbar.
      GgetHorizontalScrollMaxGets the maximum position of the horizontal scrollbar. You can use this method in combination with the setHorizontalScrollValue to apply a new scroll position.
      GgetHorizontalScrollValueGets the position of the horizontal scrollbar.
      GgetColumnsGets the columns array. Each item in the array contains the column properties which are dynamically set by the user interaction and the columns initialization data properties such as: 'label', 'dataField', 'dataType', 'visible'.
      GgetEditCellsGets the editing cell(s), when the grid is editing.
      GgetGroupsGets the groups array.
      GgetSortedColumnsGets an array of columns with applied sorting. Each member in the array is with column's data field used as a key and 'sortOrder' and 'sortIndex' as a value.
      GgetSelectionGets the selection.
      GgetSelectedRowsGets an Array where each item is an Array of row id and row data. If the Grid is used in virtual mode, the row data parameter is empty object, because the data is loaded on demand.
      GgetSelectedRowsDataGets an Array where each item contains the row data.
      GgetSelectedRowIdsGets the selected row ids.
      GgetSelectedRowIndexesGets the selected row indexes.
      GgetSelectedCellsGets the selected cells. The method returns an array of cell. Each cell is an array with row id, column data field and cell value.
      GgetFilteredColumnsGets an array of columns with applied filters.
      GgetVisibleRowsGets an array of rows, which are visible and match the applied filter.
      GgetViewRowsGets the result of the getVisibleRows or the rows hierarchy, when the Grid is in TreeGrid/Grouping mode.
      GgetStateGets a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
      GgetBatchEditChangesGets the changes from the batch edit.
      GgetCellValueGets a value of a cell.
      GgetColumnGets a column. Returns a Grid column object.
      GgetColumnPropertyGets a value of a column.
      GgetRowPropertyGets a value of a row.
      GgetRowGets a row. Returns a Grid row object.
      GgetRowByIndexGets a row by its index. Returns a Grid row object.
      GgetRowDataGets the Data source data associated to the row.
      GgetRowIdGets the Row's id by a row index.
      HhasMenuGets whether a column's drop-down menu is opened.
      HhasSelectedRowsThis method returns true, if any rows in the Grid are selected.
      HhideDetailHides the Details of a Row, when row details are enabled.
      HhighlightColumnHighlights a column. Highlights a Grid column.
      HhighlightCellHighlights a cell. Calling the method a second time toggle the highlight state.
      HhighlightRowHighlights a row. Calling the method a second time toggle the highlight state.
      IinsertRowInserts a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
      LloadStateLoads a previously saved Grid state. You can pass a state name when there is a state which was previously saved with the saveState(stateName) method call or a state object returned by the saveState or getState method calls. The state object is required to be a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
      OopenMenuOpens a column drop-down menu.
      OopenContextMenuOpens a context menu. Note that context menu should be enabled.
      OopenDropDownOpens the Grid when the 'dropDownMode' property is true.
      CcloseDropDownCloses the Grid when the 'dropDownMode' property is true.
      PprintPrints the Grid data. The method uses the options of the dataExport property. When printed, the Grid will not display any scrollbars so all rows and columns will be displayed. The grid will auto resize width and height to fit all contents. To customize the printing options, you can use the dataExport property.
      RrenderRenders the grid. This method will make a full-refresh like in the initial Grid creation. It will create Rows, Columns and Cells HTML Elements and then refresh the Grid layout.
      RrefreshRefreshes the grid with the current property values. This method will refresh the Grid layout.
      RrefreshViewRefreshes the grid cells in view. The method is useful for live-updates of cell values.
      RresetStateResets the Grid state.
      RremoveFilterRemoves a column filter.
      RremoveGroupRemoves a group by data field. This method will remove a group to the Grid when grouping is enabled.
      RremoveSortRemoves a sorting by data field. This method will remove a sorting from a Grid column.
      RrefreshSortRe-sorts the Grid by using the already applied column sortings and re-renders the Grid.
      RrevertBatchEditReverts the batch edit changes. This method cancels all changes made by the end-user.
      RreorderColumnsReorders two DataGrid columns.
      SsaveStateSaves the Grid state and returns a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
      SsortBySorts the Grid by a data field. This method will add or remove sorting, when sorting is enabled. To remove the sorting, use 'null' for the sortOrder parameter.
      SswapColumnsSwaps two DataGrid columns.
      SsaveBatchEditSaves the batch edit changes. This method confirms the editing changes made by the end-user.
      SselectSelects a row, cell or column.
      SselectRangeSelects a range of rows, cells or columns. The result of the method depends on the selection configuration of the Grid.
      SselectRowsRangeSelects a range of rows.
      SselectRowsSelects multiple rows by their ids.
      SselectAllRowsSelects all rows.
      SselectRowsByIndexSelects multiple rows by their index.
      SselectRowsByQuerySelects rows by using a query. Example: grid.selectRowsByQuery('nancy'); selects all rows that have 'nancy' value. Example 2: grid.selectRowsByQuery('nancy, davolio'); selects all rows that have 'nancy' and 'davolio' values in the same row. Example 3: grid.selectRowsByQuery(5, 'quantity', '>'); selects all rows where the value of the 'quantity' field is > 5.
      SselectCellsSelects multiple cells by their ids and dataFields. Example: grid.selectCells([0, 1, 2], ['firstName', 'quantity', 'date']); - selects the 'firstName', 'quantity' and 'date' cells from the first, second and third rows.
      SselectCellsByQuerySelects cells by using a query. Example: grid.selectCellsByQuery('nancy'); selects all cells that have 'nancy' value. Example 2: grid.selectCellsByQuery('nancy, davolio'); selects all cells that have 'nancy' and 'davolio' values in the same row.
      SsetCellValueSets a new value to a cell.
      SsetColumnsSets new columns to the Grid. The grid will redraw all the column headers, and then redraw all of the rows. By using 'setColumns', the grid will compare the new columns passed as argument to the method with existing columns. The Grid will automatically create new columns, keep old columns if they already exist and remove columns which are not in the 'setColumns' method argument. The benefit of that is that the state of the column like(sort, filter, width or other) will be kept, if the column exsits after the new columns are applied.
      SsetColumnPropertySets a property to a column.
      SsetRowPropertySets a property to a row.
      SsetRowStyleSets a style to a row.
      SsetCellStyleSets a style to a row.
      SsetDropDownLabelSets the label of the Grid when the 'dropDownMode' property is true.
      SsetVerticalScrollValueSets the position of the vertical scrollbar. You can use this method in combination with the getVerticalScrollValue and getVerticalScrollMax.
      SsetHorizontalScrollValueSets the position of the horizontal scrollbar. You can use this method in combination with the getHorizontalScrollValue and getHorizontalScrollMax.
      CcloseSidePanelCloses the Grid's side panel.
      SshowSidePanelShows the side panel of the Grid.
      SshowDetailShows the Details of a Row, when row details are enabled.
      SshowCellMessageShows an overlay message below a cell. This method can be used for onboarding tips or in scenarios when you want to display custom messages to the user.
      UupdateRowUpdates a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
      UunselectUnselects a row, cell or column.
      UuncheckRowUnchecks a TreeGrid row. Sets its check-box to false.
      UuncheckAllRowsUnchecks all TreeGrid or Grouping rows. Sets all check-boxes to false.
      TtoggleRowToggles a TreeGrid row. When this method is called, the row is expanded, if it's state is collapsed and collapsed if it's state is expanded.

      Properties

      appearanceobject

      An object containing settings related to the grid's appearance.

      Properties

      alternationStart
      alternationEnd
      alternationCount
      allowColumnStickyPosition
      allowHover
      allowHeaderHover
      allowRowToggleAnimation
      allowRowDetailToggleAnimation
      allowSortAnimation
      allowColumnLabelAnimation
      allowColumnMenuAnimation
      allowColumnSortButtonAnimation
      allowColumnActionButtonAnimation
      allowColumnFilterButtonAnimation
      autoShowColumnSortButton
      autoShowColumnActionButton
      autoShowColumnFilterButton
      autoGenerateRowLabelMode
      autoGenerateColumnLabelMode
      displayLoadingIndicator
      loadingIndicatorPlaceholder
      placeholder
      sortAnimationDuration
      showRowHeader
      showTreeRowHeader
      showRowHeaderNumber
      showRowHeaderEditIcon
      showRowHeaderSelectIcon
      showRowHeaderFocusIcon
      showRowHeaderDragIcon
      showColumnHeaderLines
      showColumnHeaderDragIcon
      showColumnLines
      showRowLines
      showColumnGroupLines
      showColumnGroupCellLines
      showColumnGroupsInColumnPanel
      showFilterColumnBackground
      showSortColumnBackground
      showFrozenColumnBackground
      showSelectionOnTop
      showColumnSortButton
      showColumnFilterButton
      showColumnDescriptionButton
      showColumnIcon
      showColumnCustomButton
      showColumnActionButton
      showTooltips
      showHorizontalScrollBarOnFixedColumns
      showVerticalScrollBarOnFixedColumns
      showTodayDateAsString

      alternationStartnumber

      Starting row index of alternating colors.

      Default value

      0
      Try a demo showcasing the alternationStart property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.alternationStart = 1;

      Get the alternationStart property. 

       const grid = document.querySelector('smart-grid');
       let alternationStart = grid.appearance.alternationStart;

      alternationEndnumber

      Ending row index of alternating colors.

      Default value

      0
      Try a demo showcasing the alternationEnd property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.alternationEnd = 10;

      Get the alternationEnd property. 

       const grid = document.querySelector('smart-grid');
       let alternationEnd = grid.appearance.alternationEnd;

      alternationCountnumber

      number of row color alternations.

      Default value

      0
      Try a demo showcasing the alternationCount property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.alternationCount = 10;

      Get the alternationCount property. 

       const grid = document.querySelector('smart-grid');
       let alternationCount = grid.appearance.alternationCount;

      allowColumnStickyPositionboolean

      Enables sticky columns.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowColumnStickyPosition = true;

      Get the allowColumnStickyPosition property. 

       const grid = document.querySelector('smart-grid');
       let allowColumnStickyPosition = grid.appearance.allowColumnStickyPosition;

      allowHoverboolean

      Enables row hover effect. Applies a hover style to the cells.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowHover = true;

      Get the allowHover property. 

       const grid = document.querySelector('smart-grid');
       let allowHover = grid.appearance.allowHover;

      allowHeaderHoverboolean

      Enables header hover effect. Applies a hover style to the headers.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowHeaderHover = true;

      Get the allowHeaderHover property. 

       const grid = document.querySelector('smart-grid');
       let allowHeaderHover = grid.appearance.allowHeaderHover;

      allowRowToggleAnimationboolean

      Enables row toggle animation. This animation starts when you expand/collapse a row in TreeGrid/Grouping mode.

      Default value

      false
      Try a demo showcasing the allowRowToggleAnimation property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowRowToggleAnimation = true;

      Get the allowRowToggleAnimation property. 

       const grid = document.querySelector('smart-grid');
       let allowRowToggleAnimation = grid.appearance.allowRowToggleAnimation;

      allowRowDetailToggleAnimationboolean

      Enables row detail toggle animation. This animation starts when you expand/collapse a row in TreeGrid/Grouping mode.

      Default value

      false
      Try a demo showcasing the allowRowDetailToggleAnimation property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowRowDetailToggleAnimation = true;

      Get the allowRowDetailToggleAnimation property. 

       const grid = document.querySelector('smart-grid');
       let allowRowDetailToggleAnimation = grid.appearance.allowRowDetailToggleAnimation;

      allowSortAnimationboolean

      Enables sorting animation. Data records are sorted with animation, when sorting is applied.

      Default value

      false
      Try a demo showcasing the allowSortAnimation property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowSortAnimation = true;

      Get the allowSortAnimation property. 

       const grid = document.querySelector('smart-grid');
       let allowSortAnimation = grid.appearance.allowSortAnimation;

      allowColumnLabelAnimationboolean

      Enables column label animation. The label is moved to 'left' with animation, when the column header's drop-down button is displayed on hover or sorting is applied.

      Default value

      true
      Try a demo showcasing the allowColumnLabelAnimation property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowColumnLabelAnimation = true;

      Get the allowColumnLabelAnimation property. 

       const grid = document.querySelector('smart-grid');
       let allowColumnLabelAnimation = grid.appearance.allowColumnLabelAnimation;

      allowColumnMenuAnimationboolean

      Enables column menu animation. When you click on the column header's drop-down button, the menu is animated.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowColumnMenuAnimation = true;

      Get the allowColumnMenuAnimation property. 

       const grid = document.querySelector('smart-grid');
       let allowColumnMenuAnimation = grid.appearance.allowColumnMenuAnimation;

      allowColumnSortButtonAnimationboolean

      Enables column sort button animation. When you click on a sortable column to change the sort order, the sort button is animated.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowColumnSortButtonAnimation = true;

      Get the allowColumnSortButtonAnimation property. 

       const grid = document.querySelector('smart-grid');
       let allowColumnSortButtonAnimation = grid.appearance.allowColumnSortButtonAnimation;

      allowColumnActionButtonAnimationboolean

      Enables column action button animation. The drop-down button displayed on column header hover is optionally animated.

      Default value

      true
      Try a demo showcasing the allowColumnActionButtonAnimation property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowColumnActionButtonAnimation = true;

      Get the allowColumnActionButtonAnimation property. 

       const grid = document.querySelector('smart-grid');
       let allowColumnActionButtonAnimation = grid.appearance.allowColumnActionButtonAnimation;

      allowColumnFilterButtonAnimationboolean

      Enables column filter button animation.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.allowColumnFilterButtonAnimation = true;

      Get the allowColumnFilterButtonAnimation property. 

       const grid = document.querySelector('smart-grid');
       let allowColumnFilterButtonAnimation = grid.appearance.allowColumnFilterButtonAnimation;

      autoShowColumnSortButtonboolean

      If enabled, automatically shows column sort button. The sort button is displayed only when the column is sorted. If the property's value is false, sort button will be always displayed to indicate that sorting is possible.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.autoShowColumnSortButton = true;

      Get the autoShowColumnSortButton property. 

       const grid = document.querySelector('smart-grid');
       let autoShowColumnSortButton = grid.appearance.autoShowColumnSortButton;

      autoShowColumnActionButtonboolean

      If enabled, automatically shows column action button.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.autoShowColumnActionButton = true;

      Get the autoShowColumnActionButton property. 

       const grid = document.querySelector('smart-grid');
       let autoShowColumnActionButton = grid.appearance.autoShowColumnActionButton;

      autoShowColumnFilterButtonboolean

      If enabled, automatically shows column filter button.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.autoShowColumnFilterButton = true;

      Get the autoShowColumnFilterButton property. 

       const grid = document.querySelector('smart-grid');
       let autoShowColumnFilterButton = grid.appearance.autoShowColumnFilterButton;

      autoGenerateRowLabelMode"number" | "letter"

      Generates labels as 'numbers' or 'letters'. This property affects the rendering of the row header.

      Default value

      "number"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.autoGenerateRowLabelMode = 'number';

      Get the autoGenerateRowLabelMode property. 

       const grid = document.querySelector('smart-grid');
       let autoGenerateRowLabelMode = grid.appearance.autoGenerateRowLabelMode;

      autoGenerateColumnLabelMode"number" | "letter"

      Generates labels as 'numbers' or 'letters. This property affects the rendering of the column header.

      Default value

      "letter"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.autoGenerateColumnLabelMode = 'number';

      Get the autoGenerateColumnLabelMode property. 

       const grid = document.querySelector('smart-grid');
       let autoGenerateColumnLabelMode = grid.appearance.autoGenerateColumnLabelMode;

      displayLoadingIndicatorboolean

      Sets the visibility of the loading indicator. This is the Loading... image displayed in the Grid while loading data.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.displayLoadingIndicator = true;

      Get the displayLoadingIndicator property. 

       const grid = document.querySelector('smart-grid');
       let displayLoadingIndicator = grid.appearance.displayLoadingIndicator;

      loadingIndicatorPlaceholderstring

      Sets the loading indicator label. This is the Text displayed while loading data.

      Default value

      "Loading..."

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.loadingIndicatorPlaceholder = 'true';

      Get the loadingIndicatorPlaceholder property. 

       const grid = document.querySelector('smart-grid');
       let loadingIndicatorPlaceholder = grid.appearance.loadingIndicatorPlaceholder;

      placeholderstring

      Sets the placeholder of the Grid. The placeholder is displayed when the Grid is empty.

      Default value

      "No Rows"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.placeholder = 'true';

      Get the placeholder property. 

       const grid = document.querySelector('smart-grid');
       let placeholder = grid.appearance.placeholder;

      sortAnimationDurationnumber

      Sets the duration of sorting animation. This property is related to the allowSortAnimation property.

      Default value

      500

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.sortAnimationDuration = true;

      Get the sortAnimationDuration property. 

       const grid = document.querySelector('smart-grid');
       let sortAnimationDuration = grid.appearance.sortAnimationDuration;

      showRowHeaderboolean

      Shows or hides Row header.

      Default value

      false
      Try a demo showcasing the showRowHeader property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showRowHeader = true;

      Get the showRowHeader property. 

       const grid = document.querySelector('smart-grid');
       let showRowHeader = grid.appearance.showRowHeader;

      showTreeRowHeaderboolean

      Shows or hides Row headers. In TreeGrid, the non-leaf tree items are displayed as normal rows. If this property is set to true, they are displayed as headers similar to the grouping rendering.

      Default value

      false
      Try a demo showcasing the showTreeRowHeader property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showTreeRowHeader = true;

      Get the showTreeRowHeader property. 

       const grid = document.querySelector('smart-grid');
       let showTreeRowHeader = grid.appearance.showTreeRowHeader;

      showRowHeaderNumberboolean

      Shows row indexes in the row header. The showRowHeader property should be true

      Default value

      false
      Try a demo showcasing the showRowHeaderNumber property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showRowHeaderNumber = true;

      Get the showRowHeaderNumber property. 

       const grid = document.querySelector('smart-grid');
       let showRowHeaderNumber = grid.appearance.showRowHeaderNumber;

      showRowHeaderEditIconboolean

      Shows edit icon when a cell or row is in edit state.

      Default value

      true
      Try a demo showcasing the showRowHeaderEditIcon property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showRowHeaderEditIcon = true;

      Get the showRowHeaderEditIcon property. 

       const grid = document.querySelector('smart-grid');
       let showRowHeaderEditIcon = grid.appearance.showRowHeaderEditIcon;

      showRowHeaderSelectIconboolean

      Shows select icon when the pointer is over the row header cell.

      Default value

      false
      Try a demo showcasing the showRowHeaderSelectIcon property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showRowHeaderSelectIcon = true;

      Get the showRowHeaderSelectIcon property. 

       const grid = document.querySelector('smart-grid');
       let showRowHeaderSelectIcon = grid.appearance.showRowHeaderSelectIcon;

      showRowHeaderFocusIconboolean

      Shows focus icon on cell or row focus.

      Default value

      false
      Try a demo showcasing the showRowHeaderFocusIcon property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showRowHeaderFocusIcon = true;

      Get the showRowHeaderFocusIcon property. 

       const grid = document.querySelector('smart-grid');
       let showRowHeaderFocusIcon = grid.appearance.showRowHeaderFocusIcon;

      showRowHeaderDragIconboolean

      Shows drag icon on the row header.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showRowHeaderDragIcon = true;

      Get the showRowHeaderDragIcon property. 

       const grid = document.querySelector('smart-grid');
       let showRowHeaderDragIcon = grid.appearance.showRowHeaderDragIcon;

      showColumnHeaderLinesboolean

      Shows column header lines.

      Default value

      true
      Try a demo showcasing the showColumnHeaderLines property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnHeaderLines = true;

      Get the showColumnHeaderLines property. 

       const grid = document.querySelector('smart-grid');
       let showColumnHeaderLines = grid.appearance.showColumnHeaderLines;

      showColumnHeaderDragIconboolean

      Shows drag icon on the column header when drag is enabled. The icon is displayed when you move the mouse cursor to the column header's left edge.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnHeaderDragIcon = true;

      Get the showColumnHeaderDragIcon property. 

       const grid = document.querySelector('smart-grid');
       let showColumnHeaderDragIcon = grid.appearance.showColumnHeaderDragIcon;

      showColumnLinesboolean

      Shows column lines.

      Default value

      true
      Try a demo showcasing the showColumnLines property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnLines = true;

      Get the showColumnLines property. 

       const grid = document.querySelector('smart-grid');
       let showColumnLines = grid.appearance.showColumnLines;

      showRowLinesboolean

      Shows row lines.

      Default value

      true
      Try a demo showcasing the showRowLines property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showRowLines = true;

      Get the showRowLines property. 

       const grid = document.querySelector('smart-grid');
       let showRowLines = grid.appearance.showRowLines;

      showColumnGroupLinesboolean

      Shows lines between columns in column groups.

      Default value

      true
      Try a demo showcasing the showColumnGroupLines property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnGroupLines = true;

      Get the showColumnGroupLines property. 

       const grid = document.querySelector('smart-grid');
       let showColumnGroupLines = grid.appearance.showColumnGroupLines;

      showColumnGroupCellLinesboolean

      Shows lines between cells in column groups.

      Default value

      true
      Try a demo showcasing the showColumnGroupCellLines property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnGroupCellLines = true;

      Get the showColumnGroupCellLines property. 

       const grid = document.querySelector('smart-grid');
       let showColumnGroupCellLines = grid.appearance.showColumnGroupCellLines;

      showColumnGroupsInColumnPanelboolean

      Shows column groups in the Hide columns panel. Column groups and columns are shown in a tree-like structure. When the property is set to false, the column groups are not displayed and the column labels contain the column group name.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnGroupsInColumnPanel = true;

      Get the showColumnGroupsInColumnPanel property. 

       const grid = document.querySelector('smart-grid');
       let showColumnGroupsInColumnPanel = grid.appearance.showColumnGroupsInColumnPanel;

      showFilterColumnBackgroundboolean

      Shows filtered column background, when filter is applied.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showFilterColumnBackground = true;

      Get the showFilterColumnBackground property. 

       const grid = document.querySelector('smart-grid');
       let showFilterColumnBackground = grid.appearance.showFilterColumnBackground;

      showSortColumnBackgroundboolean

      Shows sorted column background, when sorting is applied.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showSortColumnBackground = true;

      Get the showSortColumnBackground property. 

       const grid = document.querySelector('smart-grid');
       let showSortColumnBackground = grid.appearance.showSortColumnBackground;

      showFrozenColumnBackgroundboolean

      Shows frozen column background, when the Grid has frozen columns.

      Default value

      true
      Try a demo showcasing the showFrozenColumnBackground property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showFrozenColumnBackground = true;

      Get the showFrozenColumnBackground property. 

       const grid = document.querySelector('smart-grid');
       let showFrozenColumnBackground = grid.appearance.showFrozenColumnBackground;

      showSelectionOnTopboolean

      Shows the selection on top of all other styles.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showSelectionOnTop = true;

      Get the showSelectionOnTop property. 

       const grid = document.querySelector('smart-grid');
       let showSelectionOnTop = grid.appearance.showSelectionOnTop;

      showColumnSortButtonboolean

      Shows column sort button.

      Default value

      true
      Try a demo showcasing the showColumnSortButton property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnSortButton = true;

      Get the showColumnSortButton property. 

       const grid = document.querySelector('smart-grid');
       let showColumnSortButton = grid.appearance.showColumnSortButton;

      showColumnFilterButtonboolean

      Shows column filter button.

      Default value

      true
      Try a demo showcasing the showColumnFilterButton property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnFilterButton = true;

      Get the showColumnFilterButton property. 

       const grid = document.querySelector('smart-grid');
       let showColumnFilterButton = grid.appearance.showColumnFilterButton;

      showColumnDescriptionButtonboolean

      Shows column description button. The button's style is customizable through the Grid CSS.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnDescriptionButton = true;

      Get the showColumnDescriptionButton property. 

       const grid = document.querySelector('smart-grid');
       let showColumnDescriptionButton = grid.appearance.showColumnDescriptionButton;

      showColumnIconboolean

      Shows column icon within the column's header.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnIcon = true;

      Get the showColumnIcon property. 

       const grid = document.querySelector('smart-grid');
       let showColumnIcon = grid.appearance.showColumnIcon;

      showColumnCustomButtonboolean

      Shows column custom button. User-defined button shown in the column header.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnCustomButton = true;

      Get the showColumnCustomButton property. 

       const grid = document.querySelector('smart-grid');
       let showColumnCustomButton = grid.appearance.showColumnCustomButton;

      showColumnActionButtonboolean

      Shows column action button. This is the drop-down button displayed in the column header.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showColumnActionButton = true;

      Get the showColumnActionButton property. 

       const grid = document.querySelector('smart-grid');
       let showColumnActionButton = grid.appearance.showColumnActionButton;

      showTooltipsboolean

      Shows tooltips when user hovers columns or cells.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showTooltips = true;

      Get the showTooltips property. 

       const grid = document.querySelector('smart-grid');
       let showTooltips = grid.appearance.showTooltips;

      showHorizontalScrollBarOnFixedColumnsboolean

      Shows horizontal scrollbar on fixed columns.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showHorizontalScrollBarOnFixedColumns = true;

      Get the showHorizontalScrollBarOnFixedColumns property. 

       const grid = document.querySelector('smart-grid');
       let showHorizontalScrollBarOnFixedColumns = grid.appearance.showHorizontalScrollBarOnFixedColumns;

      showVerticalScrollBarOnFixedColumnsboolean

      Shows vertical scrollbar on fixed columns.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showVerticalScrollBarOnFixedColumns = true;

      Get the showVerticalScrollBarOnFixedColumns property. 

       const grid = document.querySelector('smart-grid');
       let showVerticalScrollBarOnFixedColumns = grid.appearance.showVerticalScrollBarOnFixedColumns;

      showTodayDateAsStringboolean

      Shows the today's date as 'Today' vs '7/8/2022'. When the property is set to false, it will display the date.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.appearance.showTodayDateAsString = true;

      Get the showTodayDateAsString property. 

       const grid = document.querySelector('smart-grid');
       let showTodayDateAsString = grid.appearance.showTodayDateAsString;

      aiobject

      An object containing settings related to the grid's AI integration.

      Properties

      model
      maxTokens
      temperature
      url
      key

      modelstring

      The AI model used for text generation or other AI-powered features.

      Default value

      "gpt-3.5-turbo"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.ai.model = 'gpt-4';

      Get the model property. 

       const grid = document.querySelector('smart-grid');
       let model = grid.ai.model;

      maxTokensnumber

      The maximum number of tokens (words/characters) the AI can generate in a single request

      Default value

      200

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.ai.maxTokens = 200;

      Get the maxTokens property. 

       const grid = document.querySelector('smart-grid');
       let maxTokens = grid.ai.maxTokens;

      temperaturenumber

      Controls the randomness of AI output. Lower values produce more focused results; higher values are more creative.

      Default value

      0.7

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.ai.temperature = 0.7;

      Get the temperature property. 

       const grid = document.querySelector('smart-grid');
       let temperature = grid.ai.temperature;

      urlstring

      The endpoint URL for sending AI requests, typically your backend proxy to OpenAI or another provider.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.ai.url = 'https://your-backend.com/ai';

      Get the url property. 

       const grid = document.querySelector('smart-grid');
       let url = grid.ai.url;

      keystring

      The API key used to authenticate requests to the AI provider.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.ai.key = 'your-api-key-here';

      Get the key property. 

       const grid = document.querySelector('smart-grid');
       let key = grid.ai.key;

      behaviorobject

      An object containing settings related to the grid's behavior.

      Properties

      allowColumnAutoSizeOnDoubleClick
      allowRowAutoSizeOnDoubleClick
      allowRowReorder
      allowColumnReorder
      allowColumnFreeze
      allowMouseWheel
      columnResizeMode
      rowResizeMode

      allowColumnAutoSizeOnDoubleClickboolean

      Auto-Resize on double-click of a column's right border.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.behavior.allowColumnAutoSizeOnDoubleClick = true;

      Get the allowColumnAutoSizeOnDoubleClick property. 

       const grid = document.querySelector('smart-grid');
       let allowColumnAutoSizeOnDoubleClick = grid.behavior.allowColumnAutoSizeOnDoubleClick;

      allowRowAutoSizeOnDoubleClickboolean

      Auto-Resize on double-click of a row's bottom border.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.behavior.allowRowAutoSizeOnDoubleClick = true;

      Get the allowRowAutoSizeOnDoubleClick property. 

       const grid = document.querySelector('smart-grid');
       let allowRowAutoSizeOnDoubleClick = grid.behavior.allowRowAutoSizeOnDoubleClick;

      allowRowReorderboolean

      Determines whether row reorder is enabled.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.behavior.allowRowReorder = true;

      Get the allowRowReorder property. 

       const grid = document.querySelector('smart-grid');
       let allowRowReorder = grid.behavior.allowRowReorder;

      allowColumnReorderboolean

      Determines whether column reorder is enabled.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.behavior.allowColumnReorder = true;

      Get the allowColumnReorder property. 

       const grid = document.querySelector('smart-grid');
       let allowColumnReorder = grid.behavior.allowColumnReorder;

      allowColumnFreezeboolean

      Determines whether column freeze with drag and drop is enabled. When other columns are frozen/pinned, drag the column to the existing frozen area. When no columns are pinned, drag the column to the edge of the grid and wait for approximately one second. The grid will then assume you want to freeze/pin and create a frozen/pinned area and place the column into it.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.behavior.allowColumnFreeze = true;

      Get the allowColumnFreeze property. 

       const grid = document.querySelector('smart-grid');
       let allowColumnFreeze = grid.behavior.allowColumnFreeze;

      allowMouseWheelboolean

      Determines whether the scrolling with mouse wheel is enabled.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.behavior.allowMouseWheel = true;

      Get the allowMouseWheel property. 

       const grid = document.querySelector('smart-grid');
       let allowMouseWheel = grid.behavior.allowMouseWheel;

      columnResizeMode"none" | "split" | "growAndShrink"

      Sets the column resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size

      Default value

      "none"
      Try a demo showcasing the columnResizeMode property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.behavior.columnResizeMode = 'split';

      Get the columnResizeMode property. 

       const grid = document.querySelector('smart-grid');
       let columnResizeMode = grid.behavior.columnResizeMode;

      rowResizeMode"none" | "split" | "growAndShrink"

      Sets the row resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size

      Default value

      "none"
      Try a demo showcasing the rowResizeMode property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.behavior.rowResizeMode = 'split';

      Get the rowResizeMode property. 

       const grid = document.querySelector('smart-grid');
       let rowResizeMode = grid.behavior.rowResizeMode;

      currentUserstring | number

      Sets or gets the id of the current user. Has to correspond to the id of an item from the users property/array. Depending on the current user, different privileges are enabled. If no current user is set, privileges depend on the element's properties.

      Default value

      ""

      Example

      Set the currentUser property. 

       <smart-grid current-user='1'></smart-grid>

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

       const grid = document.querySelector('smart-grid');
       grid.currentUser = 2;

      Get the currentUser property. 

       const grid = document.querySelector('smart-grid');
       let currentUser = grid.currentUser;

      columnHeaderobject

      Describes the column header settings.

      Properties

      visible

      visibleboolean

      Sets the column header visibility.

      Default value

      true

      Get the visible property. 

       const grid = document.querySelector('smart-grid');
       let visible = grid.columnHeader.visible;

      clipboardobject

      The clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations..

      Properties

      enabled
      copyHeadersToClipboard
      autoFillMode
      onPasteValue

      enabledboolean

      Sets or gets whether the property is enabled.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.clipboard.enabled = true;

      Get the enabled property. 

       const grid = document.querySelector('smart-grid');
       let enabled = grid.clipboard.enabled;

      copyHeadersToClipboardboolean

      Sets or gets whether the copy the column headers to the clipboard.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.clipboard.copyHeadersToClipboard = true;

      Get the copyHeadersToClipboard property. 

       const grid = document.querySelector('smart-grid');
       let copyHeadersToClipboard = grid.clipboard.copyHeadersToClipboard;

      autoFillMode"none" | "copy" | "fillSeries"

      Sets or gets whether the copy-pasted values will be auto-filled by using automatic pattern detection. This is used in the Drag&Drop Multiple Cells selection. none does nothing. copy just copies the cells. 'fillSeries' detects and automatically fills the values. For example, if the selection has '1, 2' and the possible positions are more, the pasted values would be '1, 2, 3, 4, etc.

      Default value

      "fillSeries"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.clipboard.autoFillMode = 'copy';

      Get the autoFillMode property. 

       const grid = document.querySelector('smart-grid');
       let autoFillMode = grid.clipboard.autoFillMode;

      onPasteValue{(args: {value: any, oldValue: any, dataField: string, id: string | number}): void}

      Sets or gets a callback on paste.

      Get the onPasteValue property. 

       const grid = document.querySelector('smart-grid');
       let onPasteValue = grid.clipboard.onPasteValue;

      columns{label: string, dataField: string}[] | string[] | number | Smart.Grid.Column[]

      The columns property is used to describe all columns displayed in the grid.

      Default value

      null

      Properties

      align
      allowExport
      allowGroup
      allowHide
      allowSelect
      allowEdit
      allowSort
      allowHeaderEdit
      allowFilter
      allowReorder
      allowResize
      allowNull
      cardHeight
      cellsFormat
      cellsAlign
      cellsWrap
      cellsVerticalAlign
      className
      cellsClassName
      cellsCSSRules
      columnGroup
      dataField
      dataType
      displayField
      description
      dataSet
      element
      editor
      freeze
      filter
      filterMenuMode
      filterEditor
      formatFunction
      formatSettings
      formula
      group
      getCellValue
      getFilterPanel
      icon
      label
      labelTemplate
      minWidth
      rowSpan
      relationId
      relationField
      sortOrder
      sortIndex
      sortComparator
      showActionButton
      showIcon
      showDescriptionButton
      width
      template
      templateSettings
      validationRules
      verticalAlign
      summary
      updateFilterPanel
      visible

      align"left" | "right" | "center"

      Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'

      Default value

      "left"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].align = 'right';

      Get the align property. 

       const grid = document.querySelector('smart-grid');
       let align = grid.columns[0].align;

      allowExportboolean

      Sets or gets whether the column can be exported.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowExport = true;

      Get the allowExport property. 

       const grid = document.querySelector('smart-grid');
       let allowExport = grid.columns[0].allowExport;

      allowGroupboolean

      Sets or gets whether the column can be grouped.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowGroup = true;

      Get the allowGroup property. 

       const grid = document.querySelector('smart-grid');
       let allowGroup = grid.columns[0].allowGroup;

      allowHideboolean

      Sets or gets whether the column can be hidden.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowHide = true;

      Get the allowHide property. 

       const grid = document.querySelector('smart-grid');
       let allowHide = grid.columns[0].allowHide;

      allowSelectboolean | null

      Sets or gets whether the column can be selected.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowSelect = true;

      Get the allowSelect property. 

       const grid = document.querySelector('smart-grid');
       let allowSelect = grid.columns[0].allowSelect;

      allowEditany

      Sets or gets whether the column can be edited. The property can be 'boolean' i.e accept true and false values. To dynamically determine which cells are editable, a callback function can be supplied to the 'allowEdit' property. For example: allowEdit: (id, dataField, value, data) => { return value === 'Cappuccino'; }

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowEdit = true;

      Get the allowEdit property. 

       const grid = document.querySelector('smart-grid');
       let allowEdit = grid.columns[0].allowEdit;

      allowSortboolean

      Sets or gets whether the column can be sorted.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowSort = true;

      Get the allowSort property. 

       const grid = document.querySelector('smart-grid');
       let allowSort = grid.columns[0].allowSort;

      allowHeaderEditboolean

      Sets or gets whether the column can be edited, when header editing is enabled.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowHeaderEdit = true;

      Get the allowHeaderEdit property. 

       const grid = document.querySelector('smart-grid');
       let allowHeaderEdit = grid.columns[0].allowHeaderEdit;

      allowFilterboolean

      Sets or gets whether the column can be filtered.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowFilter = true;

      Get the allowFilter property. 

       const grid = document.querySelector('smart-grid');
       let allowFilter = grid.columns[0].allowFilter;

      allowReorderboolean

      Sets or gets whether the column can be reordered.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowReorder = true;

      Get the allowReorder property. 

       const grid = document.querySelector('smart-grid');
       let allowReorder = grid.columns[0].allowReorder;

      allowResizeboolean

      Sets or gets whether the column can be resized.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowResize = true;

      Get the allowResize property. 

       const grid = document.querySelector('smart-grid');
       let allowResize = grid.columns[0].allowResize;

      allowNullboolean

      Sets or gets whether the column can have 'null' values.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].allowNull = true;

      Get the allowNull property. 

       const grid = document.querySelector('smart-grid');
       let allowNull = grid.columns[0].allowNull;

      cardHeightnumber

      Sets or gets the cell's height in card view mode.

      Default value

      0

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].cardHeight = 3;

      Get the cardHeight property. 

       const grid = document.querySelector('smart-grid');
       let cardHeight = grid.columns[0].cardHeight;

      cellsFormatstring

      Sets or gets the column's cells format. This property is used for applying a formatting to the cell values. Number format strings:
      'd' - decimal numbers.
      'f' - floating-point numbers.
      'n' - integer numbers.
      'c' - currency numbers.
      'p' - percentage numbers.

      For adding decimal places to the numbers, add a number after the formatting stri

      For example: 'c3' displays a number in this format $25.256
      Built-in Date formats:
      // short date pattern
      'd' - 'M/d/yyyy',
      // long date pattern
      'D' - 'dddd, MMMM dd, yyyy',
      // short time pattern
      't' - 'h:mm tt',
      // long time pattern
      'T' - 'h:mm:ss tt',
      // long date, short time pattern
      'f' - 'dddd, MMMM dd, yyyy h:mm tt',
      // long date, long time pattern
      'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
      // month/day pattern
      'M' - 'MMMM dd',
      // month/year pattern
      'Y' - 'yyyy MMMM',
      // S is a sortable format that does not vary by culture
      'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

      Date format strings:
      'd'-the day of the month;
      'dd'-the day of the month
      'ddd'-the abbreviated name of the day of the week
      'dddd'- the full name of the day of the week
      'h'-the hour, using a 12-hour clock from 1 to 12
      'hh'-the hour, using a 12-hour clock from 01 to 12

      'H'-the hour, using a 24-hour clock from 0 to 23
      'HH'- the hour, using a 24-hour clock from 00 to 23
      'm'-the minute, from 0 through 59
      'mm'-the minutes,from 00 though59
      'M'- the month, from 1 through 12
      'MM'- the month, from 01 through 12
      'MMM'-the abbreviated name of the month
      'MMMM'-the full name of the month
      's'-the second, from 0 through 59
      'ss'-the second, from 00 through 59
      't'- the first character of the AM/PM designator
      'tt'-the AM/PM designator
      'y'- the year, from 0 to 99
      'yy'- the year, from 00 to 99
      'yyy'-the year, with a minimum of three digits
      'yyyy'-the year as a four-digit number;
      'yyyyy'-the year as a four-digit number.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].cellsFormat = 'd';

      Get the cellsFormat property. 

       const grid = document.querySelector('smart-grid');
       let cellsFormat = grid.columns[0].cellsFormat;

      cellsAlign"left" | "right" | "center"

      Sets or gets the column's cells alignment. Accepts: 'left', 'right' and 'center'

      Default value

      "left"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].cellsAlign = 'center';

      Get the cellsAlign property. 

       const grid = document.querySelector('smart-grid');
       let cellsAlign = grid.columns[0].cellsAlign;

      cellsWrapboolean

      Sets or gets the column's cells wrapping. Accepts: true or false.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].cellsWrap = true;

      Get the cellsWrap property. 

       const grid = document.querySelector('smart-grid');
       let cellsWrap = grid.columns[0].cellsWrap;

      cellsVerticalAlign"top" | "bottom" | "center"

      Sets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'

      Default value

      "center"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].cellsVerticalAlign = 'top';

      Get the cellsVerticalAlign property. 

       const grid = document.querySelector('smart-grid');
       let cellsVerticalAlign = grid.columns[0].cellsVerticalAlign;

      classNamestring

      Sets or gets the column's header CSS class name. You can apply multiple CSS class names by separating them with space.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].className = 'my-css-class-2';

      Get the className property. 

       const grid = document.querySelector('smart-grid');
       let className = grid.columns[0].className;

      cellsClassNameany

      Sets or gets the column's cells CSS class name(s). The property can be used with string and function. You can apply multiple CSS class names by separating them with space or you can return a CSS class name(s) when you use it as a function. The function gets called with the following parameters: index - row's index, dataField - column's data field, cellValue - current cell's value, rowData - current row's data, row - GridRow object. Ex: cellsClassName: (index, dataField, value, rowData, row) => { if (index === 0) { return 'cell-class-1' } }

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].cellsClassName = my-css-class-2;

      Get the cellsClassName property. 

       const grid = document.querySelector('smart-grid');
       let cellsClassName = grid.columns[0].cellsClassName;

      cellsCSSRulesany

      Sets or gets the column's cells CSS class rules. Different CSS class names are conditionally applied. Example: label: 'Quantity', dataField: 'quantity', editor: 'numberInput', cellsClassRules: { 'one': settings => settings.value > 5, 'two': settings => settings.value <5, 'three': settings => settings.value === 3 }. The settings object contains the following properties: index, value, dataField, row, api.

      Get the cellsCSSRules property. 

       const grid = document.querySelector('smart-grid');
       let cellsCSSRules = grid.columns[0].cellsCSSRules;

      columnGroupstring

      Sets the name of the column group.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].columnGroup = 'Name';

      Get the columnGroup property. 

       const grid = document.querySelector('smart-grid');
       let columnGroup = grid.columns[0].columnGroup;

      dataFieldstring

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

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].dataField = 'firstName';

      Get the dataField property. 

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

      dataTypestring

      Sets or gets the column's data type. Any of the following value is valid: 'string', 'number', 'int', 'date', 'bool', 'object', 'any'

      Default value

      "string"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].dataType = 'number';

      Get the dataType property. 

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

      displayFieldstring

      Sets or gets the column's data source bound field which will be displayed to the user. When the property is not set, it is equal to the 'dataField'.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].displayField = 'firstName';

      Get the displayField property. 

       const grid = document.querySelector('smart-grid');
       let displayField = grid.columns[0].displayField;

      descriptionstring

      Sets or gets the column's description. The description of the column is displayed in the column's header, when the end-user moves the pointer over the description button. 'showDescriptionButton' property determines whether the description button is visible.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].description = 'firstName';

      Get the description property. 

       const grid = document.querySelector('smart-grid');
       let description = grid.columns[0].description;

      dataSetany

      Sets or gets custom data object related to the column.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].dataSet = true;

      Get the dataSet property. 

       const grid = document.querySelector('smart-grid');
       let dataSet = grid.columns[0].dataSet;

      elementHTMLElement

      Gets the HTML Element. The property returns null when the Column is not in the View.

      Get the element property. 

       const grid = document.querySelector('smart-grid');
       let element = grid.columns[0].element;

      editorstring | {template?: string, settings?: any, onInit?: any, onRender?: any, setValue?: any, getValue?: any}

      Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): void', 'onRender(int row, string column, object editor, object rowData): void', 'setValue(object value): void' and 'getValue(object value): any' callback functions.

      Try a demo showcasing the editor property.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].editor = input;

      Get the editor property. 

       const grid = document.querySelector('smart-grid');
       let editor = grid.columns[0].editor;

      freeze"near" | "far" | "true" | "false"

      Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far).

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].freeze = far;

      Get the freeze property. 

       const grid = document.querySelector('smart-grid');
       let freeze = grid.columns[0].freeze;

      filterstring

      Sets or gets the filter of the column. Example: ['contains Andrew or contains Nancy']. Example with numeric filter ['quantity', '<= 3 and >= 8']. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - ['EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']. Example with a string filter applied to a string column - ['CONTAINS' 'burke' or 'CONTAINS' 'peterson']. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'

      Default value

      ""

      Get the filter property. 

       const grid = document.querySelector('smart-grid');
       let filter = grid.columns[0].filter;

      filterMenuMode"basic" | "default" | "excel"

      Sets or gets the filter menu mode of the column. In 'basic' mode, a single input is displayed in the filter menu. In 'default' mode, two input options are available for more precise filtering. In 'excel' mode, checked list with unique values is displayed.

      Default value

      "default"

      Get the filterMenuMode property. 

       const grid = document.querySelector('smart-grid');
       let filterMenuMode = grid.columns[0].filterMenuMode;

      filterEditorany

      Sets or gets the column's filter editor. The value is an object with the following possible options: template: string, condition: string, onInit: any - callback function for init purposes, min: number, max: number, minLength: number, maxLength: number

      Get the filterEditor property. 

       const grid = document.querySelector('smart-grid');
       let filterEditor = grid.columns[0].filterEditor;

      formatFunction{(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, oldValue?: any, value?: any, template?: any}): void}

      Sets or gets the column's format function.

      Get the formatFunction property. 

       const grid = document.querySelector('smart-grid');
       let formatFunction = grid.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: string - Sets the thousands separator.
      • dateFormat: string - Sets the date format string.

      Get the formatSettings property. 

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

      formulastring

      Sets or gets the column's formula. The formula you set will be applied to all cells. Example: COL(Name) & '-' & COL(Price) or IF(COL(Price) * COL(Quantity) > 5, 'Yes', 'No')

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].formula = 'COL(Quantity) * COL(Price)';

      Get the formula property. 

       const grid = document.querySelector('smart-grid');
       let formula = grid.columns[0].formula;

      groupstring

      Sets or gets the column's group.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].group = 'firstName';

      Get the group property. 

       const grid = document.querySelector('smart-grid');
       let group = grid.columns[0].group;

      getCellValueany

      This function allows you to provide custom cell values, which will be displayed in the column's cells. The grid passes 3 arguments to the function - row id, column's dataField and row's data.

      Get the getCellValue property. 

       const grid = document.querySelector('smart-grid');
       let getCellValue = grid.columns[0].getCellValue;

      getFilterPanelany

      Gets the column's filter panel. The function should return HTMLElement which will represent the filter UI panel displayed in the filter menu. The function works in combination with updateFilterPanel

      Get the getFilterPanel property. 

       const grid = document.querySelector('smart-grid');
       let getFilterPanel = grid.columns[0].getFilterPanel;

      iconstring

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

      Default value

      ""

      Get the icon property. 

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

      labelstring

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

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].label = 'First Name';

      Get the label property. 

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

      labelTemplatestring | HTMLTemplateElement | HTMLElement | {(label: string): string}

      Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.

      Default value

      ""

      Get the labelTemplate property. 

       const grid = document.querySelector('smart-grid');
       let labelTemplate = grid.columns[0].labelTemplate;

      minWidthnumber

      Sets or gets the minimum width.

      Default value

      30

      Get the minWidth property. 

       const grid = document.querySelector('smart-grid');
       let minWidth = grid.columns[0].minWidth;

      rowSpan{(cellValue: any, rowIndex: number, data: any): number}

      Sets or gets the column's rowSpan function. Allows you to dynamically span cells.

      Get the rowSpan property. 

       const grid = document.querySelector('smart-grid');
       let rowSpan = grid.columns[0].rowSpan;

      relationIdstring

      Sets or gets the relation id in the dataSourceSettings.relations. The 'relationField' property should be set.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].relationId = 'id2';

      Get the relationId property. 

       const grid = document.querySelector('smart-grid');
       let relationId = grid.columns[0].relationId;

      relationFieldstring

      Sets or gets the relation field in the dataSourceSettings.relations. The 'relationId' property should be set.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].relationField = 'firstName';

      Get the relationField property. 

       const grid = document.querySelector('smart-grid');
       let relationField = grid.columns[0].relationField;

      sortOrder"asc" | "desc" | "none"

      Sets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null.

      Default value

      none

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].sortOrder = desc;

      Get the sortOrder property. 

       const grid = document.querySelector('smart-grid');
       let sortOrder = grid.columns[0].sortOrder;

      sortIndexnumber

      Sets or gets the sort index of the column. Accepts an integer value. This property can be used to get or set the column's sort index when sorting mode is 'many'.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].sortIndex = 2;

      Get the sortIndex property. 

       const grid = document.querySelector('smart-grid');
       let sortIndex = grid.columns[0].sortIndex;

      sortComparatorany

      Sets or gets a custom 'sortComparator' function. It can be used for implementing custom sorting. Ex: sortComparator: (value1, value2) => { if (value1 === value2) return 0; return value1 <value2; }

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].sortComparator = 2;

      Get the sortComparator property. 

       const grid = document.querySelector('smart-grid');
       let sortComparator = grid.columns[0].sortComparator;

      showActionButtonboolean

      Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].showActionButton = false;

      Get the showActionButton property. 

       const grid = document.querySelector('smart-grid');
       let showActionButton = grid.columns[0].showActionButton;

      showIconboolean

      Sets or gets whether the column's header icon is displayed.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].showIcon = false;

      Get the showIcon property. 

       const grid = document.querySelector('smart-grid');
       let showIcon = grid.columns[0].showIcon;

      showDescriptionButtonboolean

      Sets or gets whether the column's header description button is displayed.

      Default value

      false

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].showDescriptionButton = false;

      Get the showDescriptionButton property. 

       const grid = document.querySelector('smart-grid');
       let showDescriptionButton = grid.columns[0].showDescriptionButton;

      widthstring | number

      Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.

      Default value

      ""

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].width = 100;

      Get the width property. 

       const grid = document.querySelector('smart-grid');
       let width = grid.columns[0].width;

      templatestring | HTMLTemplateElement | HTMLElement | {(row: GridRow, column: GridColumn, cell: GridCell, oldValue: any, value: any, template: any): void}

      Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images', 'checklist', 'attachments', 'sparklines', 'richText', 'color', 'rating', 'duration', 'startDate', 'dueDates'. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.

      Default value

      ""

      Get the template property. 

       const grid = document.querySelector('smart-grid');
       let template = grid.columns[0].template;

      templateSettingsany

      Sets or gets additional settings related to the column's template. For example, when the template is 'sparklines', the templateSettings could be an object which defines has 'type' - 'bar', 'column', 'line' or 'pie'. If you want to apply a custom color, you can add the 'colorFunction: function(value) { } and return a custom color as a 'hex' string or a 'tooltipFormatFunction: function(value) {}' which returns a formatted tooltip string. Additional properties are 'min', 'max', 'gap' and 'strokeWidth'.

      Get the templateSettings property. 

       const grid = document.querySelector('smart-grid');
       let templateSettings = grid.columns[0].templateSettings;

      validationRules[] | null

      Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].validationRules = {type: 'email'};

      Get the validationRules property. 

       const grid = document.querySelector('smart-grid');
       let validationRules = grid.columns[0].validationRules;

      verticalAlign"top" | "bottom" | "center"

      Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'

      Default value

      "center"

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].verticalAlign = 'bottom';

      Get the verticalAlign property. 

       const grid = document.querySelector('smart-grid');
       let verticalAlign = grid.columns[0].verticalAlign;

      summarystring[]

      Sets or gets the column summary. The property should be set to an array with the following possible values: 'sum', 'min', 'max', 'avg', 'count', 'median', 'stdev', 'stdevp', 'var', 'varp'.

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].summary = ['avg'];

      Get the summary property. 

       const grid = document.querySelector('smart-grid');
       let summary = grid.columns[0].summary;

      updateFilterPanelany

      Updates the column's filter panel. The function works in combination with getFilterPanel

      Get the updateFilterPanel property. 

       const grid = document.querySelector('smart-grid');
       let updateFilterPanel = grid.columns[0].updateFilterPanel;

      visibleboolean

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

      Default value

      true

      Example

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

       const grid = document.querySelector('smart-grid');
       grid.columns[0].visible = false;

      Get the visible property. 

       const grid = document.querySelector('smart-grid');
       let visible = grid.columns[0].visible;
      
					
      
					
					contextMenuobject
					
      
							
	
      Context Menu is the drop-down menu displayed after right-clicking a Grid row. It allows you to delete row, edit cell or row depending on the edit mode. The 'contextMenuItemCustom' dataSource option allows you to add custom menu item to the context menu. You can replace the context menu by using the 'selector' property and setting it to ID of a Smart.Menu component. 
      

      Properties
      	
      enabled
      	
      customContextMenuItems
      	
      dataSource
      	
      selector
      	
      width
      	
      height
      
	
      
	enabledboolean
	
      
			
	
      Sets or gets whether the context menu is enabled. If the value is false, the context menu will not be displayed, when user right clicks on a row. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.contextMenu.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.contextMenu.enabled;
      


      
	
      
	customContextMenuItems[]
	
      
			
	
      Sets an array of custom context menu items to be displayed in the context menu. 
      

      

      Example
      							
      Set the customContextMenuItems property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.contextMenu.customContextMenuItems = true;

      
 


							
      Get the customContextMenuItems property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let customContextMenuItems = grid.contextMenu.customContextMenuItems;
      


      
					
      
					
					dataSourceobject
					
      
							
	
      Sets the data sources to the context menu. 
      

      Properties
      	
      contextMenuItemDelete
      	
      contextMenuItemEdit
      	
      contextMenuItemCustom
      
					
      
					
					contextMenuItemDeleteobject
					
      
							
	
      Describes the delete item. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the context menu item. 
      
	
      Default value
      "contextMenuItemDeleteCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.contextMenu.dataSource.contextMenuItemDelete.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the context menu item. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.contextMenu.dataSource.contextMenuItemDelete.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.contextMenu.dataSource.contextMenuItemDelete.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the context menu item. 
      
	
      Default value
      true
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.contextMenu.dataSource.contextMenuItemDelete.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.contextMenu.dataSource.contextMenuItemDelete.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the context menu item. 
      
	
      Default value
      "smart-icon-delete"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.contextMenu.dataSource.contextMenuItemDelete.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the context menu item. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.contextMenu.dataSource.contextMenuItemDelete.label;
      


      

      


							
      Get the contextMenuItemDelete property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let contextMenuItemDelete = grid.contextMenu.dataSource.contextMenuItemDelete;
      


      
					
      
					
					contextMenuItemEditobject
					
      
							
	
      Describes the edit item. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the context menu item. 
      
	
      Default value
      "contextMenuItemEditCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.contextMenu.dataSource.contextMenuItemEdit.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the context menu item. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.contextMenu.dataSource.contextMenuItemEdit.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.contextMenu.dataSource.contextMenuItemEdit.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the context menu item. 
      
	
      Default value
      true
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.contextMenu.dataSource.contextMenuItemEdit.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.contextMenu.dataSource.contextMenuItemEdit.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the context menu item. 
      
	
      Default value
      "smart-icon-mode-edit"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.contextMenu.dataSource.contextMenuItemEdit.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the context menu item. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.contextMenu.dataSource.contextMenuItemEdit.label;
      


      

      


							
      Get the contextMenuItemEdit property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let contextMenuItemEdit = grid.contextMenu.dataSource.contextMenuItemEdit;
      


      
					
      
					
					contextMenuItemCustomobject
					
      
							
	
      Describes the custom item. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the context menu item. 
      
	
      Default value
      "null"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.contextMenu.dataSource.contextMenuItemCustom.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the context menu item. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.contextMenu.dataSource.contextMenuItemCustom.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.contextMenu.dataSource.contextMenuItemCustom.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the context menu item. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.contextMenu.dataSource.contextMenuItemCustom.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.contextMenu.dataSource.contextMenuItemCustom.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the context menu item. 
      
	
      Default value
      "smart-icon-mode-edit"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.contextMenu.dataSource.contextMenuItemCustom.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the context menu item. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.contextMenu.dataSource.contextMenuItemCustom.label;
      


      

      


							
      Get the contextMenuItemCustom property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let contextMenuItemCustom = grid.contextMenu.dataSource.contextMenuItemCustom;
      


      

      


							
      Get the dataSource property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataSource = grid.contextMenu.dataSource;
      


      
	
      
	selectorstring
	
      
			
	
      Sets the ID or CSS Class of a Smart.Menu component to be used as a context menu for the Grid. 
      
	
      Default value
      ""
      

      


							
      Get the selector property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let selector = grid.contextMenu.selector;
      


      
	
      
	widthnumber
	
      
			
	
      Sets the width of the context menu. 
      
	
      Default value
      250
      

      


							
      Get the width property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let width = grid.contextMenu.width;
      


      
	
      
	heightnumber | null
	
      
			
	
      Sets the height of the context menu. 
      

      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.contextMenu.height;
      


      

      

      
					
      
					
					columnMenuobject
					
      
							
	
      Column Menu is the drop-down menu displayed after clicking the column header's drop-down button, which is displayed when you hover the column header. It allows you to customize column settings. For example: Sort, Filter or Group the Grid by the current column. 
      

      Properties
      	
      autoClose
      	
      dataSource
      	
      visible
      	
      enabled
      	
      width
      	
      height
      
	
      
	autoCloseboolean
	
      
			
	
      Automatically closes the column menu. 
      
	
      Default value
      true
      

      Example
      							
      Set the autoClose property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.autoClose = true;

      
 


							
      Get the autoClose property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoClose = grid.columnMenu.autoClose;
      


      
					
      
					
					dataSourceobject
					
      
							
	
      Sets the data sources to the column menu. 
      

      Properties
      	
      columnMenuCustomizeType
      	
      columnMenuItemRename
      	
      columnMenuItemEditDescription
      	
      columnMenuItemClone
      	
      columnMenuItemInsertLeft
      	
      columnMenuItemInsertRight
      	
      columnMenuItemSortAsc
      	
      columnMenuItemSortDesc
      	
      columnMenuItemSort
      	
      columnMenuItemRemoveSort
      	
      columnMenuItemFilter
      	
      columnMenuItemRemoveFilter
      	
      columnMenuItemGroupBy
      	
      columnMenuItemRemoveGroupBy
      	
      columnMenuItemHide
      	
      columnMenuItemDelete
      
					
      
					
					columnMenuCustomizeTypeobject
					
      
							
	
      Describes the settings of the column menu customize type 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu customize type. 
      
	
      Default value
      "customizeTypeCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuCustomizeType.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu customize type. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuCustomizeType.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuCustomizeType.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the column menu customize type. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuCustomizeType.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuCustomizeType.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu customize type. 
      
	
      Default value
      "smart-icon-customize"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuCustomizeType.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu customize type. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuCustomizeType.label;
      


      

      


							
      Get the columnMenuCustomizeType property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuCustomizeType = grid.columnMenu.dataSource.columnMenuCustomizeType;
      


      
					
      
					
					columnMenuItemRenameobject
					
      
							
	
      Describes the settings of the column menu item rename. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item rename. 
      
	
      Default value
      "renameCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemRename.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item rename. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemRename.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemRename.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the column menu item rename. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemRename.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemRename.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item rename. 
      
	
      Default value
      "smart-icon-rename"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemRename.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item rename. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemRename.label;
      


      

      


							
      Get the columnMenuItemRename property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemRename = grid.columnMenu.dataSource.columnMenuItemRename;
      


      
					
      
					
					columnMenuItemEditDescriptionobject
					
      
							
	
      Describes the settings of the column menu item edit description. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item edit description. 
      
	
      Default value
      "editDescriptionCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemEditDescription.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item edit description. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemEditDescription.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemEditDescription.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the column menu item edit description. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemEditDescription.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemEditDescription.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item edit description. 
      
	
      Default value
      "smart-icon-description"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemEditDescription.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item edit description. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemEditDescription.label;
      


      

      


							
      Get the columnMenuItemEditDescription property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemEditDescription = grid.columnMenu.dataSource.columnMenuItemEditDescription;
      


      
					
      
					
					columnMenuItemCloneobject
					
      
							
	
      Describes the settings of the column menu item duplicate. 
      

      Properties
      	
      command
      	
      visible
      	
      enabled
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item duplicate. 
      
	
      Default value
      "duplicateCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemClone.command;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the column menu item duplicate. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemClone.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemClone.visible;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item duplicate. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemClone.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemClone.enabled;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item duplicate. 
      
	
      Default value
      "smart-icon-duplicate"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemClone.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item duplicate. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemClone.label;
      


      

      


							
      Get the columnMenuItemClone property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemClone = grid.columnMenu.dataSource.columnMenuItemClone;
      


      
					
      
					
					columnMenuItemInsertLeftobject
					
      
							
	
      Describes the settings of the column menu item insert left. 
      

      Properties
      	
      command
      	
      visible
      	
      enabled
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item insert left. 
      
	
      Default value
      "insertLeftCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemInsertLeft.command;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the column menu item insert left. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemInsertLeft.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemInsertLeft.visible;
      


      
	
      
	enabledboolean
	
      
			
	
      Enabels the column menu item insert left. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemInsertLeft.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemInsertLeft.enabled;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item insert left. 
      
	
      Default value
      "smart-icon-insert-left"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemInsertLeft.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item insert left. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemInsertLeft.label;
      


      

      


							
      Get the columnMenuItemInsertLeft property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemInsertLeft = grid.columnMenu.dataSource.columnMenuItemInsertLeft;
      


      
					
      
					
					columnMenuItemInsertRightobject
					
      
							
	
      Describes the settings of the of the column menu item insert right. 
      

      Properties
      	
      command
      	
      visible
      	
      enabled
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the of the column menu item insert right. 
      
	
      Default value
      "insertRightCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemInsertRight.command;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the of the column menu item insert right. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemInsertRight.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemInsertRight.visible;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item insert right. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemInsertRight.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemInsertRight.enabled;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the of the column menu item insert right. 
      
	
      Default value
      "smart-icon-insert-right"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemInsertRight.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the of the column menu item insert right. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemInsertRight.label;
      


      

      


							
      Get the columnMenuItemInsertRight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemInsertRight = grid.columnMenu.dataSource.columnMenuItemInsertRight;
      


      
					
      
					
					columnMenuItemSortAscobject
					
      
							
	
      Describes the settings of the column menu item sort ascending. 
      

      Properties
      	
      command
      	
      visible
      	
      enabled
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item sort ascending. 
      
	
      Default value
      "sortAscCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemSortAsc.command;
      


      
	
      
	visiblestring
	
      
			
	
      Sets the visibility of the column menu item sort ascending. 
      
	
      Default value
      "auto"
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemSortAsc.visible;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item sort ascending. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemSortAsc.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemSortAsc.enabled;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item sort ascending. 
      
	
      Default value
      "smart-icon-sort-a-z"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemSortAsc.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item sort ascending. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemSortAsc.label;
      


      

      


							
      Get the columnMenuItemSortAsc property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemSortAsc = grid.columnMenu.dataSource.columnMenuItemSortAsc;
      


      
					
      
					
					columnMenuItemSortDescobject
					
      
							
	
      Describes the settings of the column menu item sort descending. 
      

      Properties
      	
      command
      	
      visible
      	
      enabled
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item sort descending. 
      
	
      Default value
      "sortDescCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemSortDesc.command;
      


      
	
      
	visiblestring
	
      
			
	
      Sets the visibility of the column menu item sort descending. 
      
	
      Default value
      "auto"
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemSortDesc.visible;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item sort descending. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemSortDesc.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemSortDesc.enabled;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item sort descending. 
      
	
      Default value
      "smart-icon-sort-z-a"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemSortDesc.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item sort descending. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemSortDesc.label;
      


      

      


							
      Get the columnMenuItemSortDesc property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemSortDesc = grid.columnMenu.dataSource.columnMenuItemSortDesc;
      


      
					
      
					
					columnMenuItemSortobject
					
      
							
	
      Describes the settings of the column menu item to add sorting. 
      

      Properties
      	
      command
      	
      visible
      	
      enabled
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item to add sorting. 
      
	
      Default value
      "addSortCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemSort.command;
      


      
	
      
	visiblestring
	
      
			
	
      Sets the visibility of the column menu item sort. 
      
	
      Default value
      "auto"
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemSort.visible;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item sort. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemSort.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemSort.enabled;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item sort. 
      
	
      Default value
      "smart-icon-sort"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemSort.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item sort. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemSort.label;
      


      

      


							
      Get the columnMenuItemSort property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemSort = grid.columnMenu.dataSource.columnMenuItemSort;
      


      
					
      
					
					columnMenuItemRemoveSortobject
					
      
							
	
      Describes the settings of the column menu item remove sort. 
      

      Properties
      	
      command
      	
      visible
      	
      enabled
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item remove sort. 
      
	
      Default value
      "removeSortCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemRemoveSort.command;
      


      
	
      
	visiblestring
	
      
			
	
      Sets the visibility of the column menu item remove sort. 
      
	
      Default value
      "auto"
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemRemoveSort.visible;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item remove sort. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemRemoveSort.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemRemoveSort.enabled;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item remove sort. 
      
	
      Default value
      "smart-icon-cancel-circled"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemRemoveSort.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item remove sort. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemRemoveSort.label;
      


      

      


							
      Get the columnMenuItemRemoveSort property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemRemoveSort = grid.columnMenu.dataSource.columnMenuItemRemoveSort;
      


      
					
      
					
					columnMenuItemFilterobject
					
      
							
	
      Describes the settings of the column menu item filter. 
      

      Properties
      	
      command
      	
      visible
      	
      enabled
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item filter. 
      
	
      Default value
      "addFilterCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemFilter.command;
      


      
	
      
	visiblestring
	
      
			
	
      Sets the visibility of the column menu item filter. 
      
	
      Default value
      "auto"
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemFilter.visible;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item filter. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemFilter.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemFilter.enabled;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item filter. 
      
	
      Default value
      "smart-icon-add-filter"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemFilter.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item filter. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemFilter.label;
      


      

      


							
      Get the columnMenuItemFilter property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemFilter = grid.columnMenu.dataSource.columnMenuItemFilter;
      


      
					
      
					
					columnMenuItemRemoveFilterobject
					
      
							
	
      Describes the settings of the column menu item remove filter. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item remove filter. 
      
	
      Default value
      "removeFilterCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemRemoveFilter.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item remove filter. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemRemoveFilter.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemRemoveFilter.enabled;
      


      
	
      
	visiblestring
	
      
			
	
      Sets the visibility of the column menu item remove filter. 
      
	
      Default value
      "auto"
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemRemoveFilter.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item remove filter. 
      
	
      Default value
      "smart-icon-cancel-circled-outline"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemRemoveFilter.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item remove filter. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemRemoveFilter.label;
      


      

      


							
      Get the columnMenuItemRemoveFilter property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemRemoveFilter = grid.columnMenu.dataSource.columnMenuItemRemoveFilter;
      


      
					
      
					
					columnMenuItemGroupByobject
					
      
							
	
      Describes the settings of the column menu item group by. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item group by. 
      
	
      Default value
      "groupByCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemGroupBy.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item group by. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemGroupBy.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemGroupBy.enabled;
      


      
	
      
	visiblestring
	
      
			
	
      Sets the visibility of the column menu item group by. 
      
	
      Default value
      "auto"
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemGroupBy.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item group by. 
      
	
      Default value
      "smart-icon-group-by"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemGroupBy.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item group by. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemGroupBy.label;
      


      

      


							
      Get the columnMenuItemGroupBy property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemGroupBy = grid.columnMenu.dataSource.columnMenuItemGroupBy;
      


      
					
      
					
					columnMenuItemRemoveGroupByobject
					
      
							
	
      Describes the settings of the column menu item group by. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item group by. 
      
	
      Default value
      "groupByCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item group by. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.enabled;
      


      
	
      
	visiblestring
	
      
			
	
      Sets the visibility of the column menu item group by. 
      
	
      Default value
      "auto"
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item group by. 
      
	
      Default value
      "smart-icon-group-by"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item group by. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.label;
      


      

      


							
      Get the columnMenuItemRemoveGroupBy property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemRemoveGroupBy = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy;
      


      
					
      
					
					columnMenuItemHideobject
					
      
							
	
      Describes the settings of the column menu item hide. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item hide. 
      
	
      Default value
      "hideColumnCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemHide.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item hide. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemHide.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemHide.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the column menu item hide. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemHide.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item hide. 
      
	
      Default value
      "smart-icon-hide"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemHide.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item hide. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemHide.label;
      


      

      


							
      Get the columnMenuItemHide property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemHide = grid.columnMenu.dataSource.columnMenuItemHide;
      


      
					
      
					
					columnMenuItemDeleteobject
					
      
							
	
      Describes the settings of the column menu item delete. 
      

      Properties
      	
      command
      	
      enabled
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the command of the column menu item delete. 
      
	
      Default value
      "deleteColumnCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.columnMenu.dataSource.columnMenuItemDelete.command;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the column menu item delete. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemDelete.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.dataSource.columnMenuItemDelete.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the column menu item delete. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.dataSource.columnMenuItemDelete.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.dataSource.columnMenuItemDelete.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the column menu item delete. 
      
	
      Default value
      "smart-icon-delete"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.columnMenu.dataSource.columnMenuItemDelete.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the column menu item delete. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnMenu.dataSource.columnMenuItemDelete.label;
      


      

      


							
      Get the columnMenuItemDelete property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMenuItemDelete = grid.columnMenu.dataSource.columnMenuItemDelete;
      


      

      


							
      Get the dataSource property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataSource = grid.columnMenu.dataSource;
      


      
	
      
	visibleboolean
	
      
			
	
      Gets the visibility of the column menu. Returns true, when the column menu is visible. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.columnMenu.visible;
      


      
	
      
	enabledboolean
	
      
			
	
      Sets or gets whether the column menu is enabled. If the value is false, the column menu will not be displayed, when user hovers the column. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnMenu.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.columnMenu.enabled;
      


      
	
      
	widthnumber
	
      
			
	
      Sets the width of the column menu. 
      
	
      Default value
      250
      

      


							
      Get the width property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let width = grid.columnMenu.width;
      


      
	
      
	heightnumber | null
	
      
			
	
      Sets the height of the column menu. 
      

      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.columnMenu.height;
      


      

      

      
				
      
				
				columnGroups{label: string, name: string, align: 'left' | 'center' | 'right', verticalAlign: 'top' | 'center' | 'bottom', parentGroup: string}[]
				
      
						
	
      Describes the settings of the column groups. 
      

      Properties
      	
      label
      	
      labelTemplate
      	
      align
      	
      name
      	
      parentGroup
      	
      verticalAlign
      
	
      
	labelstring
	
      
			
	
      Sets the label. 
      
	
      Default value
      ""
      

      Example
      							
      Set the label property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnGroups[0].label = 'Name';

      
 


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.columnGroups[0].label;
      


      
	
      
	labelTemplatestring | HTMLTemplateElement | HTMLElement | {(label: string): string}
	
      
			
	
      Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string. 
      
	
      Default value
      ""
      

      


							
      Get the labelTemplate property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let labelTemplate = grid.columnGroups[0].labelTemplate;
      


      
	
      
	align"left" | "center" | "right"
	
      
			
	
      Sets the align. 
      
	
      Default value
      "center"
      

      Example
      							
      Set the align property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnGroups[0].align = 'right';

      
 


							
      Get the align property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let align = grid.columnGroups[0].align;
      


      
	
      
	namestring
	
      
			
	
      Sets the name of the column group. 
      
	
      Default value
      ""
      

      Example
      							
      Set the name property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnGroups[0].name = 'Name';

      
 


							
      Get the name property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let name = grid.columnGroups[0].name;
      


      
	
      
	parentGroupstring
	
      
			
	
      Sets the name of the parent column group. 
      
	
      Default value
      ""
      

      Example
      							
      Set the parentGroup property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnGroups[0].parentGroup = 'Employee';

      
 


							
      Get the parentGroup property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let parentGroup = grid.columnGroups[0].parentGroup;
      


      
	
      
	verticalAlign"top" | "center" | "bottom"
	
      
			
	
      Sets the vertical align. 
      
	
      Default value
      "center"
      

      Example
      							
      Set the verticalAlign property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.columnGroups[0].verticalAlign = 'center';

      
 


							
      Get the verticalAlign property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let verticalAlign = grid.columnGroups[0].verticalAlign;
      


      
							Try a demo showcasing the columnGroups property.


      
				
      Example about columnGroups
      
const grid = new smartGrid('#grid', {
	dataSource: new smartDataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	columnGroups: [{ label: 'Name', align: 'center', name: 'name'}],
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
	
      
	
      
	dropDownModeboolean
	
      
			
	
       
      
	
      Default value
      false
      

      
							
       <smart-grid drop-down-mode></smart-grid>

      

      
				
      
				
				conditionalFormatting{ column?: string; condition?: string; firstValue?: number; fontFamily?: string; fontSize?: string; highlight?: string; secondValue?: number; text?: string; }[]
				
      
						
	
      Sets or gets details about conditional formatting to be applied to the Grid's cells. 
      

      Properties
      	
      column
      	
      condition
      	
      firstValue
      	
      fontFamily
      	
      fontSize
      	
      highlight
      	
      secondValue
      	
      text
      
	
      
	columnstring
	
      
			
	
      The data field of a numeric column to format. Set 'all' to format all numeric columns. 
      
	
      Default value
      "all"
      

      


							
      Get the column property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let column = grid.conditionalFormatting.column;
      


      
	
      
	condition"between" | "equal" | "greaterThan" | "lessThan" | "notEqual"
	
      
			
	
      The formatting condition. 
      
	
      Default value
      "lessThan"
      

      


							
      Get the condition property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let condition = grid.conditionalFormatting.condition;
      


      
	
      
	firstValuenumber
	
      
			
	
      The value to compare by. When condition is 'between', this is the start (from) value. 
      
	
      Default value
      0
      

      


							
      Get the firstValue property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let firstValue = grid.conditionalFormatting.firstValue;
      


      
	
      
	fontFamilystring
	
      
			
	
      The fontFamily to apply to formatted cells. 
      
	
      Default value
      ""
      

      


							
      Get the fontFamily property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let fontFamily = grid.conditionalFormatting.fontFamily;
      


      
	
      
	fontSizestring
	
      
			
	
      The fontSize to apply to formatted cells. 
      
	
      Default value
      "The default fontSize as set in CSS"
      

      


							
      Get the fontSize property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let fontSize = grid.conditionalFormatting.fontSize;
      


      
	
      
	highlightstring
	
      
			
	
      The background color to apply to formatted cells. 
      
	
      Default value
      "The default backgroundColor as set in CSS"
      

      


							
      Get the highlight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let highlight = grid.conditionalFormatting.highlight;
      


      
	
      
	secondValuenumber
	
      
			
	
      When condition is 'between', this is the end (to) value. Otherwise, this value is not used. 
      
	
      Default value
      1
      

      


							
      Get the secondValue property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let secondValue = grid.conditionalFormatting.secondValue;
      


      
	
      
	textstring
	
      
			
	
      The text color to apply to formatted cells. 
      
	
      Default value
      "The default color as set in CSS"
      

      


							
      Get the text property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let text = grid.conditionalFormatting.text;
      


      
							Try a demo showcasing the conditionalFormatting property.


      Example
      							
      Set the conditionalFormatting property. 
      
							
       <smart-grid conditional-formatting='{ column: 'quantity', condition: 'greaterThan', firstValue: 8, text: '#6AA84F' }, { column: 'quantity', condition: 'lessThan', firstValue: 3, text: '#CC0000' }'></smart-grid>

      							
      Set the conditionalFormatting property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.conditionalFormatting = { column: 'price', condition: 'between', firstValue: 3, secondValue: 5, fontFamily: 'Courier New', text: '#0000FF' }, { column: 'total', condition: 'greaterThan', firstValue: 25, fontSize: '14px', text: '#FFFFFF', highlight: '#6AA84F' };

      
 


							
      Get the conditionalFormatting property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let conditionalFormatting = grid.conditionalFormatting;
      


      
					
      
					
					chartingobject
					
      
							
	
      Sets the Grid Charting Data Visualization. 
      

      Properties
      	
      enabled
      	
      colorScheme
      	
      appendTo
      	
      dialog
      
	
      
	enabledboolean
	
      
			
	
      Sets or gets whether charting is enabled. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.charting.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.charting.enabled;
      


      
	
      
	colorSchemestring
	
      
			
	
      Sets or gets the charting colors. Accepts the 'colorScheme' values of our Chart component. 
      
	
      Default value
      "scheme01"
      

      


							
      Get the colorScheme property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let colorScheme = grid.charting.colorScheme;
      


      
	
      
	appendTostring | HTMLElement
	
      
			
	
      Sets or gets the chart's container. 
      

      

      


							
      Get the appendTo property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let appendTo = grid.charting.appendTo;
      


      
					
      
					
					dialogobject
					
      
							
	
      Sets or gets the charting dialog. 
      

      Properties
      	
      header
      	
      height
      	
      width
      	
      left
      	
      top
      	
      enabled
      	
      visible
      
	
      
	headerstring
	
      
			
	
      Sets or gets the dialog header. 
      
	
      Default value
      "{{message}}"
      

      Example
      							
      Set the header property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.charting.dialog.header = 'Dialog';

      
 


							
      Get the header property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let header = grid.charting.dialog.header;
      


      
	
      
	heightnumber
	
      
			
	
      Sets or gets the dialog height. 
      
	
      Default value
      400
      

      Example
      							
      Set the height property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.charting.dialog.height = 300;

      
 


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.charting.dialog.height;
      


      
	
      
	widthnumber
	
      
			
	
      Sets or gets the dialog width. 
      
	
      Default value
      400
      

      Example
      							
      Set the width property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.charting.dialog.width = 300;

      
 


							
      Get the width property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let width = grid.charting.dialog.width;
      


      
	
      
	leftstring | number
	
      
			
	
      Sets or gets the dialog Left position. 
      
	
      Default value
      center
      

      Example
      							
      Set the left property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.charting.dialog.left = center;

      
 


							
      Get the left property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let left = grid.charting.dialog.left;
      


      
	
      
	topstring | number
	
      
			
	
      Sets or gets the dialog Top position. 
      
	
      Default value
      center
      

      Example
      							
      Set the top property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.charting.dialog.top = center;

      
 


							
      Get the top property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let top = grid.charting.dialog.top;
      


      
	
      
	enabledboolean
	
      
			
	
      Sets or gets whether the dialog is enabled. 
      
	
      Default value
      true
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.charting.dialog.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.charting.dialog.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Gets whether the dialog is displayed. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.charting.dialog.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.charting.dialog.visible;
      


      

      


							
      Get the dialog property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dialog = grid.charting.dialog;
      


      
							Try a demo showcasing the charting property.


      

      
					
      
					
					checkBoxesobject
					
      
							
	
      Sets the TreeGrid checkboxes. 
      

      Properties
      	
      visible
      	
      hasThreeStates
      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the TreeGrid checkboxes. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.checkBoxes[0].visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.checkBoxes[0].visible;
      


      
	
      
	hasThreeStatesboolean
	
      
			
	
      Sets the three-state mode of the TreeGrid checkboxes. In that mode, checking a checkbox affects the parent-child rows checkboxes. 
      
	
      Default value
      false
      

      Example
      							
      Set the hasThreeStates property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.checkBoxes[0].hasThreeStates = true;

      
 


							
      Get the hasThreeStates property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let hasThreeStates = grid.checkBoxes[0].hasThreeStates;
      


      
							Try a demo showcasing the checkBoxes property.


      

      
					
      
					
					dataExportobject
					
      
							
	
      Sets the Grid Data Export options. 
      

      Properties
      	
      header
      	
      filterBy
      	
      groupBy
      	
      style
      	
      fileName
      	
      pageOrientation
      	
      expandChar
      	
      collapseChar
      	
      view
      	
      viewStart
      	
      viewEnd
      	
      rowIds
      	
      headerContent
      	
      footerContent
      	
      addImageToCell
      	
      setRowHeight
      	
      getSpreadsheets
      	
      exportStyles
      	
      cellFormatFunction
      	
      freezeHeader
      	
      autoConvertFormulas
      	
      onlySelected
      	
      exportAsTable
      
	
      
	headerboolean
	
      
			
	
      Sets whether the columns header will be exported. 
      
	
      Default value
      true
      

      


							
      Get the header property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let header = grid.dataExport.header;
      


      
	
      
	filterByobject
	
      
			
	
      Sets whether the export uses the applied filters. 
      

      

      


							
      Get the filterBy property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let filterBy = grid.dataExport.filterBy;
      


      
	
      
	groupByobject
	
      
			
	
      Sets the groups of the exported data. 
      

      

      


							
      Get the groupBy property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let groupBy = grid.dataExport.groupBy;
      


      
	
      
	styleobject
	
      
			
	
      Sets a custom style object of the dataExport.  
      

      

      


							
      Get the style property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let style = grid.dataExport.style;
      


      
	
      
	fileNamestring
	
      
			
	
      Sets the exported file's name. 
      
	
      Default value
      "smartGrid"
      

      


							
      Get the fileName property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let fileName = grid.dataExport.fileName;
      


      
	
      
	pageOrientation"landscape" | "portrait"
	
      
			
	
      Sets the page orientation, when exporting to PDF. 
      
	
      Default value
      "portrait"
      

      


							
      Get the pageOrientation property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let pageOrientation = grid.dataExport.pageOrientation;
      


      
	
      
	expandCharstring
	
      
			
	
      Sets the expand char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported. 
      
	
      Default value
      "+"
      

      


							
      Get the expandChar property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let expandChar = grid.dataExport.expandChar;
      


      
	
      
	collapseCharstring
	
      
			
	
      Sets the collapse char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported. 
      
	
      Default value
      "-"
      

      


							
      Get the collapseChar property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let collapseChar = grid.dataExport.collapseChar;
      


      
	
      
	viewboolean
	
      
			
	
      Exports only the visible data of the Grid. 
      
	
      Default value
      false
      

      


							
      Get the view property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let view = grid.dataExport.view;
      


      
	
      
	viewStartnumber | null
	
      
			
	
      Determines the start row index that will be exported or printed. 'view' should be set to true 
      

      

      


							
      Get the viewStart property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let viewStart = grid.dataExport.viewStart;
      


      
	
      
	viewEndnumber | null
	
      
			
	
      Determines the end row index that will be exported or printed. 'view' should be set to true 
      

      

      


							
      Get the viewEnd property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let viewEnd = grid.dataExport.viewEnd;
      


      
	
      
	rowIds(string | number)[] | null
	
      
			
	
      An array of row ids that denotes the rows to export. 
      

      

      


							
      Get the rowIds property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let rowIds = grid.dataExport.rowIds;
      


      
	
      
	headerContentany
	
      
			
	
      An array of custom rows to add before the Grid rows. 
      

      

      


							
      Get the headerContent property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let headerContent = grid.dataExport.headerContent;
      


      
	
      
	footerContentany
	
      
			
	
      An array of custom rows to add after the Grid rows. 
      

      

      


							
      Get the footerContent property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let footerContent = grid.dataExport.footerContent;
      


      
	
      
	addImageToCellany
	
      
			
	
      A function which allows you to add images to the cells in Export to Excel. The following params are passed: (index, dataField, value, values). It should return an object like this: return { image: { id: 'myImage' + index, base64: value, imageType: 'jpeg', width: 20, height: 11, position: { offsetX: 10 + (25 * values.indexOf(value)), offsetY: 5.5 } } }; 
      

      

      


							
      Get the addImageToCell property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let addImageToCell = grid.dataExport.addImageToCell;
      


      
	
      
	setRowHeightany
	
      
			
	
      A function which allows you to set the height of the rows in the Export to Excel. The function gets the row index as parameter and should return its height as a number. 
      

      

      


							
      Get the setRowHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let setRowHeight = grid.dataExport.setRowHeight;
      


      
	
      
	getSpreadsheetsany
	
      
			
	
      A function which allows you to return additonal data to the Excel export to export into multiple sheets. 
      

      

      


							
      Get the getSpreadsheets property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let getSpreadsheets = grid.dataExport.getSpreadsheets;
      


      
	
      
	exportStylesboolean
	
      
			
	
      A function which allows you to export a styled data grid to Excel. 
      
	
      Default value
      true
      

      


							
      Get the exportStyles property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let exportStyles = grid.dataExport.exportStyles;
      


      
	
      
	cellFormatFunctionany
	
      
			
	
      A function which allows you to format cells before export. (index, dataField, value) are the params. It should return the formatted value. 
      

      

      


							
      Get the cellFormatFunction property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let cellFormatFunction = grid.dataExport.cellFormatFunction;
      


      
	
      
	freezeHeaderboolean
	
      
			
	
      Sets whether the header is frozen when Export to Excel. 
      
	
      Default value
      false
      

      


							
      Get the freezeHeader property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let freezeHeader = grid.dataExport.freezeHeader;
      


      
	
      
	autoConvertFormulasboolean
	
      
			
	
      Sets whether to auto-convert the formulas in the Excel export. 
      
	
      Default value
      true
      

      


							
      Get the autoConvertFormulas property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoConvertFormulas = grid.dataExport.autoConvertFormulas;
      


      
	
      
	onlySelectedboolean
	
      
			
	
      Sets whether to export only the selected cells or rows when Export to Excel. 
      
	
      Default value
      false
      

      


							
      Get the onlySelected property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let onlySelected = grid.dataExport.onlySelected;
      


      
	
      
	exportAsTableboolean
	
      
			
	
      Sets whether to export it as Excel Table when Export to Excel 
      
	
      Default value
      false
      

      


							
      Get the exportAsTable property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let exportAsTable = grid.dataExport.exportAsTable;
      


      

      

      
	
      
	dataSourceany
	
      
			
	
      Sets the grid's data source. The value of dataSource can be an instance of Smart.DataAdapter or an Array. 
      

      
							Try a demo showcasing the dataSource property.


      
				
      Example about dataSource
      
const grid = new smartGrid('#grid', {
	dataSource: new smartDataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
	
      
					
      
					
					dataSourceSettingsobject
					
      
							
	
      Sets the grid's data source settings when the dataSource property is set to an Array or URL. 
      

      Properties
      	
      autoGenerateColumns
      	
      childrenDataField
      	
      sanitizeHTML
      	
      root
      	
      record
      	
      groupBy
      	
      dataFields
      	
      dataSourceType
      	
      id
      	
      keyDataField
      	
      parentDataField
      	
      mapChar
      	
      relations
      	
      virtualDataSource
      	
      virtualDataSourceOnExpand
      
	
      
	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 grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].autoGenerateColumns = false;

      
 


							
      Get the autoGenerateColumns property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoGenerateColumns = grid.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 grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].childrenDataField = 'children';

      
 


							
      Get the childrenDataField property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let childrenDataField = grid.dataSourceSettings[0].childrenDataField;
      


      
	
      
	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 grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].sanitizeHTML = 'blackList';

      
 


							
      Get the sanitizeHTML property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let sanitizeHTML = grid.dataSourceSettings[0].sanitizeHTML;
      


      
	
      
	rootstring
	
      
			
	
      Sets or gets the XML binding root. 
      
	
      Default value
      ""
      

      Example
      							
      Set the root property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].root = 'children';

      
 


							
      Get the root property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let root = grid.dataSourceSettings[0].root;
      


      
	
      
	recordstring
	
      
			
	
      Sets or gets the XML binding record. 
      
	
      Default value
      ""
      

      Example
      							
      Set the record property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].record = 'children';

      
 


							
      Get the record property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let record = grid.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 grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].groupBy = true;

      
 


							
      Get the groupBy property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let groupBy = grid.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 grid = document.querySelector('smart-grid');
      
							
       let name = grid.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 grid = document.querySelector('smart-grid');
      
							
       let map = grid.dataSourceSettings[0].dataFields[0].map;
      


      
	
      
	dataType"string" | "date" | "boolean" | "number" | "array" | "any"
	
      
			
	
      Sets the dataField type. 
      
	
      Default value
      "string"
      

      


							
      Get the dataType property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataType = grid.dataSourceSettings[0].dataFields[0].dataType;
      


      

      Example
      							
      Set the dataFields property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].dataFields = [id: number];

      
 


							
      Get the dataFields property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataFields = grid.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 grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].dataSourceType = 'json';

      
 


							
      Get the dataSourceType property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataSourceType = grid.dataSourceSettings[0].dataSourceType;
      


      
	
      
	idstring
	
      
			
	
      Sets or gets the dataAdapter's id 
      
	
      Default value
      ""
      

      Example
      							
      Set the id property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].id = 'uid';

      
 


							
      Get the id property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let id = grid.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 grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].keyDataField = 'uid';

      
 


							
      Get the keyDataField property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let keyDataField = grid.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 grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].parentDataField = 'uid';

      
 


							
      Get the parentDataField property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let parentDataField = grid.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 grid = document.querySelector('smart-grid');
      
 
							
       grid.dataSourceSettings[0].mapChar = 'uid';

      
 


							
      Get the mapChar property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let mapChar = grid.dataSourceSettings[0].mapChar;
      


      
	
      
	relationsany
	
      
			
	
      Sets or gets the Grid relations. The property expects an array of objects. Each object should have '{id: string, label: string, columns: GridColumn[], dataSource: any}'. Once you have the relations defined, when you create a column, you can set 'relationId' and 'relationField'. This will automatically define a new column editor based on the relation settings. 
      

      

      


							
      Get the relations property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let relations = grid.dataSourceSettings[0].relations;
      


      
	
      
	virtualDataSource{(resultCallbackFunction: any, details: DataAdapterVirtualDataSourceDetails): void}
	
      
			
	
      Sets the virtual data source function which is called each time the Grid requests data. Example for calling the callback function with the new data set: resultCallbackFunction({dataSource: data}); Demos using 'virtualDataSource' are available on the Grid demos page. Example: https://www.htmlelements.com/demos/grid/virtualscroll/ 
      

      

      


							
      Get the virtualDataSource property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let virtualDataSource = grid.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. Example: https://www.htmlelements.com/demos/grid/virtual-tree-grid/ 
      

      

      


							
      Get the virtualDataSourceOnExpand property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let virtualDataSourceOnExpand = grid.dataSourceSettings[0].virtualDataSourceOnExpand;
      


      
							Try a demo showcasing the dataSourceSettings property.


      
				
      Example about dataSource
      
const grid = new smartGrid('#grid', {
	dataSource: new smartDataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
	
      
					
      
					
					editingobject
					
      
							
	
      Describes the grid's editing settings. 
      

      Properties
      	
      allowRowHeaderEdit
      	
      allowColumnHeaderEdit
      	
      autoUpdateFilterAndSort
      	
      allowListOpenOnContentClick
      	
      enabled
      	
      batch
      	
      action
      	
      readOnlyEdit
      	
      commandKeys
      	
      commandBar
      	
      commandColumn
      	
      mode
      	
      addNewRow
      	
      addNewColumn
      	
      dialog
      	
      addDialog
      	
      deleteDialog
      
	
      
	allowRowHeaderEditboolean
	
      
			
	
      Enables row header cells editing. 
      
	
      Default value
      false
      
							Try a demo showcasing the allowRowHeaderEdit property.


      Example
      							
      Set the allowRowHeaderEdit property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.allowRowHeaderEdit = true;

      
 


							
      Get the allowRowHeaderEdit property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowRowHeaderEdit = grid.editing.allowRowHeaderEdit;
      


      
	
      
	allowColumnHeaderEditboolean
	
      
			
	
      Enables column headers editing. 
      
	
      Default value
      false
      
							Try a demo showcasing the allowColumnHeaderEdit property.


      Example
      							
      Set the allowColumnHeaderEdit property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.allowColumnHeaderEdit = true;

      
 


							
      Get the allowColumnHeaderEdit property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowColumnHeaderEdit = grid.editing.allowColumnHeaderEdit;
      


      
	
      
	autoUpdateFilterAndSortboolean
	
      
			
	
      Automatically re-applies already applied column filters and sort orders, after editing. 
      
	
      Default value
      true
      

      Example
      							
      Set the autoUpdateFilterAndSort property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.autoUpdateFilterAndSort = false;

      
 


							
      Get the autoUpdateFilterAndSort property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoUpdateFilterAndSort = grid.editing.autoUpdateFilterAndSort;
      


      
	
      
	allowListOpenOnContentClickboolean
	
      
			
	
      Automatically opens a drop-down editor not only when the arrow button is clicked, but also when you click an item from it. 
      
	
      Default value
      true
      

      Example
      							
      Set the allowListOpenOnContentClick property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.allowListOpenOnContentClick = false;

      
 


							
      Get the allowListOpenOnContentClick property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowListOpenOnContentClick = grid.editing.allowListOpenOnContentClick;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables editing. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.editing.enabled;
      


      
	
      
	batchboolean
	
      
			
	
      Enables batch editing. This allows editing multiple grid rows on the client side and sending them with a single server request. 
      
	
      Default value
      false
      
							Try a demo showcasing the batch property.


      Example
      							
      Set the batch property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.batch = true;

      
 


							
      Get the batch property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let batch = grid.editing.batch;
      


      
	
      
	action"none" | "click" | "doubleClick"
	
      
			
	
      Determines the way editing is initiated. 
      
	
      Default value
      "click"
      

      Example
      							
      Set the action property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.action = 'doubleClick';

      
 


							
      Get the action property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let action = grid.editing.action;
      


      
	
      
	readOnlyEditboolean
	
      
			
	
      Read Only Edit is a mode in the grid whereby Cell Editing will not update the data inside the grid. Instead the grid invokes the 'onCellEditRequest' function allowing the application to process the update request. 
      
	
      Default value
      false
      

      Example
      							
      Set the readOnlyEdit property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.readOnlyEdit = true;

      
 


							
      Get the readOnlyEdit property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let readOnlyEdit = grid.editing.readOnlyEdit;
      


      
					
      
					
					commandKeysobject
					
      
							
	
      Describes command keys. 
      

      Properties
      	
      commandKeyEdit
      	
      commandKeyCancel
      	
      commandKeyUpdate
      
					
      
					
					commandKeyEditobject
					
      
							
	
      Describes the edit command key. 
      

      Properties
      	
      command
      	
      key
      
	
      
	commandstring
	
      
			
	
      Sets the name of the edit key command. 
      
	
      Default value
      "commandKeyEditCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandKeys[0].commandKeyEdit.command;
      


      
	
      
	keystring
	
      
			
	
      Sets the key that invokes the edit command. 
      
	
      Default value
      "F2"
      

      


							
      Get the key property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let key = grid.editing.commandKeys[0].commandKeyEdit.key;
      


      

      


							
      Get the commandKeyEdit property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandKeyEdit = grid.editing.commandKeys[0].commandKeyEdit;
      


      
					
      
					
					commandKeyCancelobject
					
      
							
	
      Describes the cancel command key. 
      

      Properties
      	
      command
      	
      key
      
	
      
	commandstring
	
      
			
	
      Sets the name of the cancel key command. 
      
	
      Default value
      "commandKeyCancelCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandKeys[0].commandKeyCancel.command;
      


      
	
      
	keystring
	
      
			
	
      Sets the key that invokes the cancel command. 
      
	
      Default value
      "Escape"
      

      


							
      Get the key property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let key = grid.editing.commandKeys[0].commandKeyCancel.key;
      


      

      


							
      Get the commandKeyCancel property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandKeyCancel = grid.editing.commandKeys[0].commandKeyCancel;
      


      
					
      
					
					commandKeyUpdateobject
					
      
							
	
      Describes the update command key. 
      

      Properties
      	
      command
      	
      key
      
	
      
	commandstring
	
      
			
	
      Sets the name of the update key command. 
      
	
      Default value
      "commandKeyUpdateCommand"
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandKeys[0].commandKeyUpdate.command;
      


      
	
      
	keystring
	
      
			
	
      Sets the key that invokes the update command. 
      
	
      Default value
      "Enter"
      

      


							
      Get the key property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let key = grid.editing.commandKeys[0].commandKeyUpdate.key;
      


      

      


							
      Get the commandKeyUpdate property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandKeyUpdate = grid.editing.commandKeys[0].commandKeyUpdate;
      


      

      


							
      Get the commandKeys property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandKeys = grid.editing.commandKeys;
      


      
					
      
					
					commandBarobject
					
      
							
	
      Describes the grid's command bar settings. The command bar is a toolbar or statusbar with tools for saving and reverting edits. 
      

      Properties
      	
      visible
      	
      position
      	
      displayMode
      	
      dataSource
      
	
      
	visibleboolean
	
      
			
	
      Makes the command bar visible. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandBar.visible;
      


      
	
      
	position"near" | "far" | "both"
	
      
			
	
      Sets the command bar's position. 
      
	
      Default value
      "near"
      

      


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.editing.commandBar.position;
      


      
	
      
	displayMode"label" | "icon" | "labelAndIcon"
	
      
			
	
      Sets what is to be displayed in command bar buttons. 
      
	
      Default value
      "labelAndIcon"
      

      


							
      Get the displayMode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let displayMode = grid.editing.commandBar.displayMode;
      


      
					
      
					
					dataSourceobject
					
      
							
	
      Sets the command bar's data source. 
      

      Properties
      	
      commandBarAddRow
      	
      commandBarDeleteRow
      	
      commandBarBatchSave
      	
      commandBarBatchRevert
      
					
      
					
					commandBarAddRowobject
					
      
							
	
      Describes the settings of the command bar's button for adding rows. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the add row command. 
      
	
      Default value
      commandBarAddRowCommand
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandBar.dataSource.commandBarAddRow.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the add row button's icon. 
      
	
      Default value
      "smart-icon-plus"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandBar.dataSource.commandBarAddRow.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the add row button. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandBar.dataSource.commandBarAddRow.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the add row button visible. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandBar.dataSource.commandBarAddRow.visible;
      


      

      


							
      Get the commandBarAddRow property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandBarAddRow = grid.editing.commandBar.dataSource.commandBarAddRow;
      


      
					
      
					
					commandBarDeleteRowobject
					
      
							
	
      Describes the settings of the command bar's button for deleting rows. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the delete row command. 
      
	
      Default value
      commandBarDeleteRowCommand
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandBar.dataSource.commandBarDeleteRow.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the delete row button's icon. 
      
	
      Default value
      "smart-icon-delete"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandBar.dataSource.commandBarDeleteRow.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the delete row button. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandBar.dataSource.commandBarDeleteRow.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the delete row button visible. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandBar.dataSource.commandBarDeleteRow.visible;
      


      

      


							
      Get the commandBarDeleteRow property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandBarDeleteRow = grid.editing.commandBar.dataSource.commandBarDeleteRow;
      


      
					
      
					
					commandBarBatchSaveobject
					
      
							
	
      Describes the settings of the command bar's button for saving changes. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the save command. 
      
	
      Default value
      commandBarBatchSaveCommand
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandBar.dataSource.commandBarBatchSave.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the save button's icon. 
      
	
      Default value
      "smart-icon-save"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandBar.dataSource.commandBarBatchSave.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the save button. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandBar.dataSource.commandBarBatchSave.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the save button visible. 
      
	
      Default value
      true
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandBar.dataSource.commandBarBatchSave.visible;
      


      

      


							
      Get the commandBarBatchSave property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandBarBatchSave = grid.editing.commandBar.dataSource.commandBarBatchSave;
      


      
					
      
					
					commandBarBatchRevertobject
					
      
							
	
      Describes the settings of the command bar's button for reverting changes. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the revert command. 
      
	
      Default value
      commandBarBatchRevertCommand
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandBar.dataSource.commandBarBatchRevert.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the revert button's icon. 
      
	
      Default value
      "smart-icon-revert"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandBar.dataSource.commandBarBatchRevert.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the revert button. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandBar.dataSource.commandBarBatchRevert.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the revert button visible. 
      
	
      Default value
      true
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandBar.dataSource.commandBarBatchRevert.visible;
      


      

      


							
      Get the commandBarBatchRevert property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandBarBatchRevert = grid.editing.commandBar.dataSource.commandBarBatchRevert;
      


      

      


							
      Get the dataSource property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataSource = grid.editing.commandBar.dataSource;
      


      
							Try a demo showcasing the commandBar property.


      


							
      Get the commandBar property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandBar = grid.editing.commandBar;
      


      
					
      
					
					commandColumnobject
					
      
							
	
      Describes the grid's command column settings. The command column can be used to edit or delete a row. 
      

      Properties
      	
      visible
      	
      inline
      	
      position
      	
      displayMode
      	
      dataSource
      	
      width
      
	
      
	visibleboolean
	
      
			
	
      Makes the command column visible. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandColumn.visible;
      


      
	
      
	inlineboolean
	
      
			
	
      Enables inline display of the command column. 
      
	
      Default value
      false
      

      


							
      Get the inline property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let inline = grid.editing.commandColumn.inline;
      


      
	
      
	position"near" | "far"
	
      
			
	
      Sets the command column's position. 
      
	
      Default value
      "far"
      

      


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.editing.commandColumn.position;
      


      
	
      
	displayMode"label" | "icon" | "labelAndIcon"
	
      
			
	
      Sets what is to be displayed in command column buttons. 
      
	
      Default value
      "icon"
      

      


							
      Get the displayMode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let displayMode = grid.editing.commandColumn.displayMode;
      


      
					
      
					
					dataSourceobject
					
      
							
	
      Sets the command column's data source. 
      

      Properties
      	
      commandColumnMenu
      	
      commandColumnEdit
      	
      commandColumnDelete
      	
      commandColumnUpdate
      	
      commandColumnCancel
      	
      commandColumnRowMenu
      	
      commandColumnCustom
      
					
      
					
					commandColumnMenuobject
					
      
							
	
      Describes the settings of the command column's button displayed in the column's header. By default, this Command opens a Menu with Column Chooser. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
       
      
	
      Default value
      commandColumnMenuCommand
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandColumn.dataSource.commandColumnMenu.command;
      


      
	
      
	iconstring
	
      
			
	
       
      
	
      Default value
      "smart-icon-menu"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandColumn.dataSource.commandColumnMenu.icon;
      


      
	
      
	labelstring
	
      
			
	
       
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandColumn.dataSource.commandColumnMenu.label;
      


      
	
      
	visibleboolean
	
      
			
	
       
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandColumn.dataSource.commandColumnMenu.visible;
      


      

      


							
      Get the commandColumnMenu property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandColumnMenu = grid.editing.commandColumn.dataSource.commandColumnMenu;
      


      
					
      
					
					commandColumnEditobject
					
      
							
	
      Describes the settings of the command column's button for editing rows. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the edit row command. 
      
	
      Default value
      commandColumnEditCommand
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandColumn.dataSource.commandColumnEdit.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the edit row button's icon. 
      
	
      Default value
      "smart-icon-rename"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandColumn.dataSource.commandColumnEdit.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the edit row button. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandColumn.dataSource.commandColumnEdit.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the edit row button visible. 
      
	
      Default value
      auto
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandColumn.dataSource.commandColumnEdit.visible;
      


      

      


							
      Get the commandColumnEdit property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandColumnEdit = grid.editing.commandColumn.dataSource.commandColumnEdit;
      


      
					
      
					
					commandColumnDeleteobject
					
      
							
	
      Describes the settings of the command column's button for deleting rows. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the delete row command. 
      
	
      Default value
      commandColumnDeleteCommand
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandColumn.dataSource.commandColumnDelete.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the delete row button's icon. 
      
	
      Default value
      "smart-icon-delete"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandColumn.dataSource.commandColumnDelete.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the delete row button. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandColumn.dataSource.commandColumnDelete.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the delete row button visible. 
      
	
      Default value
      true
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandColumn.dataSource.commandColumnDelete.visible;
      


      

      


							
      Get the commandColumnDelete property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandColumnDelete = grid.editing.commandColumn.dataSource.commandColumnDelete;
      


      
					
      
					
					commandColumnUpdateobject
					
      
							
	
      Describes the settings of the command column's button for updating rows. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the update row command. 
      
	
      Default value
      commandColumnUpdateCommand
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandColumn.dataSource.commandColumnUpdate.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the update row button's icon. 
      
	
      Default value
      "smart-icon-save"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandColumn.dataSource.commandColumnUpdate.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the update row button. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandColumn.dataSource.commandColumnUpdate.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the update row button visible. 
      
	
      Default value
      auto
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandColumn.dataSource.commandColumnUpdate.visible;
      


      

      


							
      Get the commandColumnUpdate property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandColumnUpdate = grid.editing.commandColumn.dataSource.commandColumnUpdate;
      


      
					
      
					
					commandColumnCancelobject
					
      
							
	
      Describes the settings of the command column's button for canceling edits. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the cancel command. 
      
	
      Default value
      commandColumnCancelCommand
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandColumn.dataSource.commandColumnCancel.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the cancel button's icon. 
      
	
      Default value
      "smart-icon-cancel-circled"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandColumn.dataSource.commandColumnCancel.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the cancel button. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandColumn.dataSource.commandColumnCancel.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the cancel button visible. 
      
	
      Default value
      auto
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandColumn.dataSource.commandColumnCancel.visible;
      


      

      


							
      Get the commandColumnCancel property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandColumnCancel = grid.editing.commandColumn.dataSource.commandColumnCancel;
      


      
					
      
					
					commandColumnRowMenuobject
					
      
							
	
      Describes the settings of the command column's row menu button. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the row menu command. 
      
	
      Default value
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandColumn.dataSource.commandColumnRowMenu.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the custom button's icon. 
      
	
      Default value
      "smart-icon-ellipsis"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandColumn.dataSource.commandColumnRowMenu.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the row menu button. 
      
	
      Default value
      ""
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandColumn.dataSource.commandColumnRowMenu.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the row menu button visible. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandColumn.dataSource.commandColumnRowMenu.visible;
      


      

      


							
      Get the commandColumnRowMenu property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandColumnRowMenu = grid.editing.commandColumn.dataSource.commandColumnRowMenu;
      


      
					
      
					
					commandColumnCustomobject
					
      
							
	
      Describes the settings of the command column's custom button. 
      

      Properties
      	
      command
      	
      icon
      	
      label
      	
      visible
      
	
      
	command{(): void}
	
      
			
	
      Sets the name of the custom command. 
      
	
      Default value
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.editing.commandColumn.dataSource.commandColumnCustom.command;
      


      
	
      
	iconstring
	
      
			
	
      A class name to be applied to the custom button's icon. 
      
	
      Default value
      "smart-icon-copy-record"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.editing.commandColumn.dataSource.commandColumnCustom.icon;
      


      
	
      
	labelstring
	
      
			
	
      The label of the custom button. 
      
	
      Default value
      ""
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.commandColumn.dataSource.commandColumnCustom.label;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the custom button visible. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.commandColumn.dataSource.commandColumnCustom.visible;
      


      

      


							
      Get the commandColumnCustom property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandColumnCustom = grid.editing.commandColumn.dataSource.commandColumnCustom;
      


      

      


							
      Get the dataSource property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataSource = grid.editing.commandColumn.dataSource;
      


      
	
      
	widthnumber | null
	
      
			
	
      Sets the width of the command column. 
      

      

      


							
      Get the width property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let width = grid.editing.commandColumn.width;
      


      
							Try a demo showcasing the commandColumn property.


      


							
      Get the commandColumn property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandColumn = grid.editing.commandColumn;
      


      
	
      
	mode"cell" | "row"
	
      
			
	
      Sets the grid's edit mode. 
      
	
      Default value
      "cell"
      
							Try a demo showcasing the mode property.


      Example
      							
      Set the mode property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.mode = 'row';

      
 


							
      Get the mode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let mode = grid.editing.mode;
      


      
					
      
					
					addNewRowobject
					
      
							
	
      Describes the settings of the 'Add New Row' UI element which enables the quick adding of rows to the Grid with a single click. 
      

      Properties
      	
      autoCreate
      	
      autoEdit
      	
      position
      	
      displayMode
      	
      visible
      	
      label
      
	
      
	autoCreateboolean
	
      
			
	
      Adds new row by clicking the Enter button, when the focused row is the last row. 
      
	
      Default value
      false
      

      


							
      Get the autoCreate property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoCreate = grid.editing.addNewRow.autoCreate;
      


      
	
      
	autoEditboolean
	
      
			
	
      Determines whether the newly added row enters automatically in edit mode, when added. 
      
	
      Default value
      true
      

      


							
      Get the autoEdit property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoEdit = grid.editing.addNewRow.autoEdit;
      


      
	
      
	position"near" | "far" | "both"
	
      
			
	
      Sets the position of the 'Add New Row' UI element. 
      
	
      Default value
      "both"
      

      Example
      							
      Set the position property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.addNewRow.position = 'near';

      
 


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.editing.addNewRow.position;
      


      
	
      
	displayMode"row" | "button"
	
      
			
	
      Sets or gets the display mode of the new row action. It could be either 'row' or 'button'. 
      
	
      Default value
      "row"
      

      


							
      Get the displayMode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let displayMode = grid.editing.addNewRow.displayMode;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the 'Add New Row' UI element visible. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.addNewRow.visible;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the 'Add New Row' UI element. 
      
	
      Default value
      "{{message}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.editing.addNewRow.label;
      


      
							Try a demo showcasing the addNewRow property.


      


							
      Get the addNewRow property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let addNewRow = grid.editing.addNewRow;
      


      
					
      
					
					addNewColumnobject
					
      
							
	
      Enables users to dynamically add new columns through the User Interface. When the add new column is visible, a '+' is displayed as a last column. Clicking it opens a dialog for adding new columns. 
      

      Properties
      	
      visible
      
	
      
	visibleboolean
	
      
			
	
      Makes the 'Add New Row' UI element visible. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.addNewColumn.visible;
      


      
							Try a demo showcasing the addNewColumn property.


      


							
      Get the addNewColumn property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let addNewColumn = grid.editing.addNewColumn;
      


      
					
      
					
					dialogobject
					
      
							
	
      Describes dialog's editing settings. 
      

      Properties
      	
      header
      	
      height
      	
      width
      	
      left
      	
      top
      	
      enabled
      	
      sidePanel
      	
      visible
      
	
      
	headerstring
	
      
			
	
      Sets the header text of the dialog  
      
	
      Default value
      "{{message}}"
      

      


							
      Get the header property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let header = grid.editing.dialog.header;
      


      
	
      
	heightstring | number
	
      
			
	
      Sets the height of the edit dialog. 
      
	
      Default value
      auto
      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.editing.dialog.height;
      


      
	
      
	widthstring | number
	
      
			
	
      Sets the width of the edit dialog. 
      
	
      Default value
      auto
      

      


							
      Get the width property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let width = grid.editing.dialog.width;
      


      
	
      
	leftstring | number
	
      
			
	
      Sets the 'left' css property to the dialog. 
      
	
      Default value
      center
      

      


							
      Get the left property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let left = grid.editing.dialog.left;
      


      
	
      
	topstring | number
	
      
			
	
      Sets the 'top' css property to the dialog. 
      
	
      Default value
      center
      

      


							
      Get the top property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let top = grid.editing.dialog.top;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables dialog editing option. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.dialog.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.editing.dialog.enabled;
      


      
	
      
	sidePanelboolean
	
      
			
	
      Enables dialog side panel option. When this is enabled, the dialog is opened from the right side of the Grid. 
      
	
      Default value
      false
      

      Example
      							
      Set the sidePanel property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.dialog.sidePanel = true;

      
 


							
      Get the sidePanel property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let sidePanel = grid.editing.dialog.sidePanel;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the dialog. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.dialog.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.dialog.visible;
      


      

      


							
      Get the dialog property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dialog = grid.editing.dialog;
      


      
					
      
					
					addDialogobject
					
      
							
	
      Describes add dialog's settings 
      

      Properties
      	
      header
      	
      height
      	
      width
      	
      left
      	
      top
      	
      enabled
      	
      visible
      
	
      
	headerstring
	
      
			
	
      Sets the header text of the dialog 
      
	
      Default value
      "{{message}}"
      

      


							
      Get the header property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let header = grid.editing.addDialog.header;
      


      
	
      
	heightstring | number
	
      
			
	
      Sets the height of the dialog. 
      
	
      Default value
      auto
      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.editing.addDialog.height;
      


      
	
      
	widthstring | number
	
      
			
	
      Sets the width of the dialog. 
      
	
      Default value
      auto
      

      


							
      Get the width property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let width = grid.editing.addDialog.width;
      


      
	
      
	leftstring | number
	
      
			
	
      Sets the 'left' css property to the dialog. 
      
	
      Default value
      center
      

      


							
      Get the left property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let left = grid.editing.addDialog.left;
      


      
	
      
	topstring | number
	
      
			
	
      Sets the 'top' css property to the dialog. 
      
	
      Default value
      center
      

      


							
      Get the top property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let top = grid.editing.addDialog.top;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the add dialog option. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.addDialog.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.editing.addDialog.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the dialog. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.addDialog.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.addDialog.visible;
      


      

      


							
      Get the addDialog property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let addDialog = grid.editing.addDialog;
      


      
					
      
					
					deleteDialogobject
					
      
							
	
      Describes delete dialog's settings 
      

      Properties
      	
      header
      	
      height
      	
      width
      	
      left
      	
      top
      	
      enabled
      	
      visible
      
	
      
	headerstring
	
      
			
	
      Sets the header text of the dialog 
      
	
      Default value
      "{{message}}"
      

      


							
      Get the header property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let header = grid.editing.deleteDialog.header;
      


      
	
      
	heightstring | number
	
      
			
	
      Sets the height of the dialog. 
      
	
      Default value
      auto
      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.editing.deleteDialog.height;
      


      
	
      
	widthstring | number
	
      
			
	
      Sets the width of the dialog. 
      
	
      Default value
      auto
      

      


							
      Get the width property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let width = grid.editing.deleteDialog.width;
      


      
	
      
	leftstring | number
	
      
			
	
      Sets the 'left' css property to the dialog. 
      
	
      Default value
      center
      

      


							
      Get the left property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let left = grid.editing.deleteDialog.left;
      


      
	
      
	topstring | number
	
      
			
	
      Sets the 'top' css property to the dialog. 
      
	
      Default value
      center
      

      


							
      Get the top property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let top = grid.editing.deleteDialog.top;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables the delete dialog option. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.deleteDialog.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.editing.deleteDialog.enabled;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the dialog. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.editing.deleteDialog.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.editing.deleteDialog.visible;
      


      

      


							
      Get the deleteDialog property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let deleteDialog = grid.editing.deleteDialog;
      


      

      

      
					
      
					
					filteringobject
					
      
							
	
      Describes the grid's filtering settings. 
      

      Properties
      	
      enabled
      	
      operator
      	
      filter
      	
      filterRow
      	
      filterMenu
      	
      filterBuilder
      
	
      
	enabledboolean
	
      
			
	
      Enables filtering. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.filtering.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.filtering.enabled;
      


      
	
      
	operatorstring
	
      
			
	
      Determines the filtering operator used in the Grid. By default filters are applied with 'and' operator i.e returns a set of rows matching the filter expressions of columnA AND columnB. The other option is to return a set of rows matching the filter expressions of columnA OR columnB. For example: grid.filtering.operator = 'or'; grid.addFilter('lastName', 'contains "davolio"') grid.addFilter('firstName', 'contains "Antoni"'); - that code will apply two filters to the Grid and will return all rows where firstName is 'Antoni' or the lastName is 'Davolio' 
      
	
      Default value
      "and"
      

      Example
      							
      Set the operator property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.filtering.operator = 'or';

      
 


							
      Get the operator property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let operator = grid.filtering.operator;
      


      
	
      
	filter[]
	
      
			
	
      An array of filtering conditions to apply to the DataGrid. Each member of the filter array is an array with two members. The first one is the column dataField to apply the filter to. The second one is the filtering condition. Example: [['firstName', 'contains Andrew or contains Nancy'], ['quantity', '<= 3 and >= 8']]. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - [['firstName', 'EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']]. Example with a string filter applied to a string column - [['lastName','CONTAINS' 'burke' or 'CONTAINS' 'peterson']]. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL' 
      

      

      


							
      Get the filter property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let filter = grid.filtering.filter;
      


      
					
      
					
					filterRowobject
					
      
							
	
      Describes the filter row's settings. 
      

      Properties
      	
      visible
      	
      menuVisible
      	
      applyMode
      	
      autoApplyModeDelay
      
	
      
	visibleboolean
	
      
			
	
      Makes the filter row visible. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.filtering.filterRow.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.filtering.filterRow.visible;
      


      
	
      
	menuVisibleboolean
	
      
			
	
      Makes the filter row's menu visible. 
      
	
      Default value
      false
      

      Example
      							
      Set the menuVisible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.filtering.filterRow.menuVisible = true;

      
 


							
      Get the menuVisible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let menuVisible = grid.filtering.filterRow.menuVisible;
      


      
	
      
	applyMode"auto" | "click"
	
      
			
	
      Sets the way filtering through the filter row is applied. 
      
	
      Default value
      "auto"
      

      


							
      Get the applyMode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let applyMode = grid.filtering.filterRow.applyMode;
      


      
	
      
	autoApplyModeDelaynumber
	
      
			
	
      Sets the delay (in milliseconds) before applying filtering (when filtering.filterRow.applyMode is 'auto'). 
      
	
      Default value
      300
      

      


							
      Get the autoApplyModeDelay property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoApplyModeDelay = grid.filtering.filterRow.autoApplyModeDelay;
      


      

      


							
      Get the filterRow property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let filterRow = grid.filtering.filterRow;
      


      
					
      
					
					filterMenuobject
					
      
							
	
      Describes the settings for the filter menu. 
      

      Properties
      	
      visible
      	
      buttons
      	
      mode
      	
      dataSource
      	
      width
      	
      height
      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the filter menu. 
      
	
      Default value
      true
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.filtering.filterMenu.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.filtering.filterMenu.visible;
      


      
	
      
	buttonsstring[]
	
      
			
	
      Sets the button text of the filter menu. 
      

      

      


							
      Get the buttons property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let buttons = grid.filtering.filterMenu.buttons;
      


      
	
      
	mode"default" | "excel"
	
      
			
	
      Sets the filter menu mode. 
      
	
      Default value
      "default"
      

      


							
      Get the mode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let mode = grid.filtering.filterMenu.mode;
      


      
	
      
	dataSourceany
	
      
			
	
      Sets the filter menu datasource. 
      

      

      


							
      Get the dataSource property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataSource = grid.filtering.filterMenu.dataSource;
      


      
	
      
	widthnumber
	
      
			
	
      Sets the width of the filter menu. 
      
	
      Default value
      250
      

      


							
      Get the width property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let width = grid.filtering.filterMenu.width;
      


      
	
      
	heightnumber
	
      
			
	
      Sets the height of the filter menu. 
      
	
      Default value
      200
      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.filtering.filterMenu.height;
      


      

      


							
      Get the filterMenu property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let filterMenu = grid.filtering.filterMenu;
      


      
					
      
					
					filterBuilderobject
					
      
							
	
      (In Development)Describes the settings for the filter builder. 
      

      Properties
      	
      visible
      	
      height
      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the filter builder. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.filtering.filterBuilder.visible;
      


      
	
      
	heightnumber | null
	
      
			
	
      Sets the height of the filter builder. 
      

      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.filtering.filterBuilder.height;
      


      

      


							
      Get the filterBuilder property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let filterBuilder = grid.filtering.filterBuilder;
      


      
							Try a demo showcasing the filtering property.


      

      
					
      
					
					footerobject
					
      
							
	
      Describes the footer settings of the grid. 
      

      Properties
      	
      visible
      	
      template
      
	
      
	visibleboolean
	
      
			
	
      Sets the footer visibility. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.footer.visible;
      


      
	
      
	templatestring | HTMLTemplateElement | {(element: HTMLElement): void}
	
      
			
	
      Sets a template for the footer. 
      
	
      Default value
      ""
      

      


							
      Get the template property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let template = grid.footer.template;
      


      

      

      
	
      
	formulasboolean
	
      
			
	
      Sets or gets whether Excel-like formulas can be passed as cell values. Formulas are always preceded by the = sign and are re-evaluated when cell values are changed. This feature depends on the third-party free plug-in formula-parser (the file formula-parser.min.js has to be referenced). 
      
	
      Default value
      false
      
							Try a demo showcasing the formulas property.


      Example
      							
      Set the formulas property. 
      
							
       <smart-grid formulas></smart-grid>

      							
      Set the formulas property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.formulas = false;

      
 


							
      Get the formulas property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let formulas = grid.formulas;
      


      
					
      
					
					groupingobject
					
      
							
	
      Describes the grid's grouping settings. 
      

      Properties
      	
      enabled
      	
      allowCollapse
      	
      autoExpandAll
      	
      autoExpandToLevel
      	
      autoHideGroupColumn
      	
      expandMode
      	
      formatFunction
      	
      groupRowHeight
      	
      groupBy
      	
      groupIndent
      	
      groupBar
      	
      onGroupDefaultExpanded
      	
      renderMode
      	
      toggleButtonIndent
      	
      summaryRow
      
	
      
	enabledboolean
	
      
			
	
      Enables grouping. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.grouping.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.grouping.enabled;
      


      
	
      
	allowCollapseboolean
	
      
			
	
      Enables collapsing of groups. 
      
	
      Default value
      false
      

      Example
      							
      Set the allowCollapse property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.grouping.allowCollapse = true;

      
 


							
      Get the allowCollapse property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowCollapse = grid.grouping.allowCollapse;
      


      
	
      
	autoExpandAllboolean
	
      
			
	
      Automatically expands all groups. 
      
	
      Default value
      false
      

      Example
      							
      Set the autoExpandAll property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.grouping.autoExpandAll = true;

      
 


							
      Get the autoExpandAll property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoExpandAll = grid.grouping.autoExpandAll;
      


      
	
      
	autoExpandToLevelnumber
	
      
			
	
      Automatically expands all groups to a given level. 
      
	
      Default value
      0
      

      Example
      							
      Set the autoExpandToLevel property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.grouping.autoExpandToLevel = 2;

      
 


							
      Get the autoExpandToLevel property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoExpandToLevel = grid.grouping.autoExpandToLevel;
      


      
	
      
	autoHideGroupColumnboolean
	
      
			
	
      Automatically hides all grouped columns. 
      
	
      Default value
      false
      

      Example
      							
      Set the autoHideGroupColumn property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.grouping.autoHideGroupColumn = true;

      
 


							
      Get the autoHideGroupColumn property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoHideGroupColumn = grid.grouping.autoHideGroupColumn;
      


      
	
      
	expandMode"buttonClick" | "rowClick"
	
      
			
	
      Sets the group expand mode. 
      
	
      Default value
      "buttonClick"
      

      


							
      Get the expandMode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let expandMode = grid.grouping.expandMode;
      


      
	
      
	formatFunction{(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, value?: any, template?: any}): void}
	
      
			
	
      Sets or gets the column's format function. 
      

      

      


							
      Get the formatFunction property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let formatFunction = grid.grouping.formatFunction;
      


      
	
      
	groupRowHeightstring | number
	
      
			
	
      Sets the group row height. 
      
	
      Default value
      50
      

      


							
      Get the groupRowHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let groupRowHeight = grid.grouping.groupRowHeight;
      


      
	
      
	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 grid = document.querySelector('smart-grid');
      
 
							
       grid.grouping.groupBy = true;

      
 


							
      Get the groupBy property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let groupBy = grid.grouping.groupBy;
      


      
	
      
	groupIndentnumber
	
      
			
	
      Sets the indent of the group. 
      
	
      Default value
      16
      

      


							
      Get the groupIndent property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let groupIndent = grid.grouping.groupIndent;
      


      
					
      
					
					groupBarobject
					
      
							
	
      Describes the group bar's settings. 
      

      Properties
      	
      visible
      	
      allowColumnDragDrop
      	
      allowColumnCloseButtons
      
	
      
	visibleboolean
	
      
			
	
      Makes the group bar visible. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.grouping.groupBar.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.grouping.groupBar.visible;
      


      
	
      
	allowColumnDragDropboolean
	
      
			
	
      Enables column drag and drop. 
      
	
      Default value
      false
      

      


							
      Get the allowColumnDragDrop property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowColumnDragDrop = grid.grouping.groupBar.allowColumnDragDrop;
      


      
	
      
	allowColumnCloseButtonsboolean
	
      
			
	
      Enables column close buttons. 
      
	
      Default value
      true
      

      


							
      Get the allowColumnCloseButtons property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowColumnCloseButtons = grid.grouping.groupBar.allowColumnCloseButtons;
      


      

      


							
      Get the groupBar property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let groupBar = grid.grouping.groupBar;
      


      
	
      
	onGroupDefaultExpandedany
	
      
			
	
      Expands a group in the first grid render. Example: onGroupDefaultExpanded: (dataItem) =>{ return dataItem.label === 'Peppermint Mocha Twist' } 
      

      

      


							
      Get the onGroupDefaultExpanded property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let onGroupDefaultExpanded = grid.grouping.onGroupDefaultExpanded;
      


      
	
      
	renderMode"basic" | "compact" | "advanced" | "multipleColumns"
	
      
			
	
      Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level. In 'multipleColumns' mode, each group is displayed in its column. 
      
	
      Default value
      "advanced"
      

      


							
      Get the renderMode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let renderMode = grid.grouping.renderMode;
      


      
	
      
	toggleButtonIndentnumber
	
      
			
	
      Sets the indent of the group toggle button. 
      
	
      Default value
      16
      

      


							
      Get the toggleButtonIndent property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let toggleButtonIndent = grid.grouping.toggleButtonIndent;
      


      
					
      
					
					summaryRowobject
					
      
							
	
      Describes the group summary row's settings. 
      

      Properties
      	
      inline
      	
      visible
      
	
      
	inlineboolean
	
      
			
	
      Enables inline display of the group summary row. 
      
	
      Default value
      true
      

      Example
      							
      Set the inline property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.grouping.summaryRow.inline = true;

      
 


							
      Get the inline property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let inline = grid.grouping.summaryRow.inline;
      


      
	
      
	visibleboolean
	
      
			
	
      Makes the group summary row visible. 
      
	
      Default value
      true
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.grouping.summaryRow.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.grouping.summaryRow.visible;
      


      

      


							
      Get the summaryRow property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let summaryRow = grid.grouping.summaryRow;
      


      
							Try a demo showcasing the grouping property.


      

      
					
      
					
					groupHeaderobject
					
      
							
	
      Describes the settings for the group header. 
      

      Properties
      	
      visible
      	
      template
      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the group header. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.groupHeader.visible;
      


      
	
      
	templatestring | HTMLTemplateElement
	
      
			
	
      Sets a template for the group header. 
      
	
      Default value
      ""
      

      


							
      Get the template property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let template = grid.groupHeader.template;
      


      

      

      
					
      
					
					headerobject
					
      
							
	
      Describes the header settings of the grid. 
      

      Properties
      	
      visible
      	
      template
      	
      onInit
      	
      buttons
      	
      searchCommand
      	
      customButton
      
	
      
	visibleboolean
	
      
			
	
      Sets the header visibility. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.header.visible;
      


      
	
      
	templatestring | HTMLTemplateElement | {(element: HTMLElement): void}
	
      
			
	
      Sets a template for the header. 
      
	
      Default value
      ""
      

      


							
      Get the template property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let template = grid.header.template;
      


      
	
      
	onInit{(element: HTMLElement): void}
	
      
			
	
      This callback function can be used for customization of the Header toolbar. The Toolbar HTML Element is passed as an argument. 
      

      

      


							
      Get the onInit property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let onInit = grid.header.onInit;
      


      
	
      
	buttonsstring[]
	
      
			
	
      Determines the buttons displayed in the Grid header. 'columns' displays a button opening the columns chooser panel. 'filter'  displays a button opening the filtering panel.  'group' displays a button opening the grouping panel. 'sort'  displays a button opening the sorting panel. 'format'  displays a button opening the conditional formatting panel. 'search' displays a button opening the search panel. 'colors' displays a button with colors options for formatting. 
      
	
      Default value
      [ "columns", "filter", "group", "sort", "format", "search" ]
      

      


							
      Get the buttons property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let buttons = grid.header.buttons;
      


      
	
      
	searchCommand"search" | "filter"
	
      
			
	
      Sets the search command type. 
      
	
      Default value
      "search"
      

      


							
      Get the searchCommand property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let searchCommand = grid.header.searchCommand;
      


      
					
      
					
					customButtonobject
					
      
							
	
      Custom toolbar button. Allows you to add a custom button to the toolbar. 
      

      Properties
      	
      command
      	
      visible
      	
      icon
      	
      label
      
	
      
	commandstring
	
      
			
	
      Sets the name of a function which will be invoked when the custom button is clicked. 
      
	
      Default value
      ""
      

      


							
      Get the command property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let command = grid.header.customButton.command;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the custom button. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.header.customButton.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.header.customButton.visible;
      


      
	
      
	iconstring
	
      
			
	
      Sets the icon of the custom button. 
      
	
      Default value
      "smart-icon-settings"
      

      


							
      Get the icon property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let icon = grid.header.customButton.icon;
      


      
	
      
	labelstring
	
      
			
	
      Sets the label of the custom button. 
      
	
      Default value
      "{{messages}}"
      

      


							
      Get the label property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let label = grid.header.customButton.label;
      


      

      


							
      Get the customButton property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let customButton = grid.header.customButton;
      


      

      

      
					
      
					
					layoutobject
					
      
							
	
      An object containing settings related to the grid's layout. 
      

      Properties
      	
      allowCellsWrap
      	
      autoSizeNewColumn
      	
      autoSizeNewColumnMinWidth
      	
      autoHeight
      	
      autoWidth
      	
      autoGenerateColumnWidth
      	
      columnWidth
      	
      columnHeight
      	
      columnMinHeight
      	
      cardMinWidth
      	
      cardsPerRow
      	
      cardVertical
      	
      dropDownWidth
      	
      dropDownHeight
      	
      rowMinHeight
      	
      rowHeight
      	
      viewBarWidth
      
	
      
	allowCellsWrapboolean
	
      
			
	
      Enables or disables the Cells Value wrapping. When the property is true, cell value can wrap in multiple lines. 
      
	
      Default value
      false
      
							Try a demo showcasing the allowCellsWrap property.


      Example
      							
      Set the allowCellsWrap property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.allowCellsWrap = true;

      
 


							
      Get the allowCellsWrap property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowCellsWrap = grid.layout.allowCellsWrap;
      


      
	
      
	autoSizeNewColumnboolean
	
      
			
	
      Automatically sets width to any new Column which does not have its 'width' property set. 
      
	
      Default value
      false
      

      Example
      							
      Set the autoSizeNewColumn property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.autoSizeNewColumn = true;

      
 


							
      Get the autoSizeNewColumn property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoSizeNewColumn = grid.layout.autoSizeNewColumn;
      


      
	
      
	autoSizeNewColumnMinWidthnumber
	
      
			
	
      Sets the min width of the new column. 
      
	
      Default value
      250
      

      Example
      							
      Set the autoSizeNewColumnMinWidth property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.autoSizeNewColumnMinWidth = 300;

      
 


							
      Get the autoSizeNewColumnMinWidth property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoSizeNewColumnMinWidth = grid.layout.autoSizeNewColumnMinWidth;
      


      
	
      
	autoHeightboolean
	
      
			
	
      Automatically sets the height of the Grid. 
      
	
      Default value
      false
      

      Example
      							
      Set the autoHeight property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.autoHeight = true;

      
 


							
      Get the autoHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoHeight = grid.layout.autoHeight;
      


      
	
      
	autoWidthboolean
	
      
			
	
      Automatically sets the width of the Grid. All columns should have a 'width' property set to a number in order to use this feature. 
      
	
      Default value
      false
      

      Example
      							
      Set the autoWidth property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.autoWidth = true;

      
 


							
      Get the autoWidth property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoWidth = grid.layout.autoWidth;
      


      
	
      
	autoGenerateColumnWidthstring | number | null
	
      
			
	
      Sets the width of the auto-generated Grid columns. 
      

      

      Example
      							
      Set the autoGenerateColumnWidth property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.autoGenerateColumnWidth = 200;

      
 


							
      Get the autoGenerateColumnWidth property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoGenerateColumnWidth = grid.layout.autoGenerateColumnWidth;
      


      
	
      
	columnWidthstring | number | null
	
      
			
	
      Sets the width of the Grid columns. 
      

      

      Example
      							
      Set the columnWidth property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.columnWidth = 200;

      
 


							
      Get the columnWidth property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnWidth = grid.layout.columnWidth;
      


      
	
      
	columnHeightstring | number | null
	
      
			
	
      Sets the height of the Grid columns. 
      

      

      Example
      							
      Set the columnHeight property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.columnHeight = 60;

      
 


							
      Get the columnHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnHeight = grid.layout.columnHeight;
      


      
	
      
	columnMinHeightnumber
	
      
			
	
      Sets the minimum height of the Grid columns. 
      
	
      Default value
      30
      

      Example
      							
      Set the columnMinHeight property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.columnMinHeight = 60;

      
 


							
      Get the columnMinHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let columnMinHeight = grid.layout.columnMinHeight;
      


      
	
      
	cardMinWidthnumber
	
      
			
	
      Sets the minimum width of a card in card view. 
      
	
      Default value
      250
      

      Example
      							
      Set the cardMinWidth property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.cardMinWidth = 200;

      
 


							
      Get the cardMinWidth property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let cardMinWidth = grid.layout.cardMinWidth;
      


      
	
      
	cardsPerRownumber
	
      
			
	
      Sets the cards per row. 
      

      

      Example
      							
      Set the cardsPerRow property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.cardsPerRow = 3;

      
 


							
      Get the cardsPerRow property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let cardsPerRow = grid.layout.cardsPerRow;
      


      
	
      
	cardVerticalboolean
	
      
			
	
      Sets whether cards are vertically oriented. In this layout mode, the column label is displayed above the column value 
      
	
      Default value
      false
      

      Example
      							
      Set the cardVertical property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.cardVertical = true;

      
 


							
      Get the cardVertical property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let cardVertical = grid.layout.cardVertical;
      


      
	
      
	dropDownWidthnumber
	
      
			
	
      Sets the width of the Grid when displayed in a drop-down mode. 
      
	
      Default value
      700
      

      Example
      							
      Set the dropDownWidth property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.dropDownWidth = 200;

      
 


							
      Get the dropDownWidth property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dropDownWidth = grid.layout.dropDownWidth;
      


      
	
      
	dropDownHeightnumber
	
      
			
	
      Sets the height of the Grid when displayed in a drop-down mode. 
      
	
      Default value
      500
      

      Example
      							
      Set the dropDownHeight property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.dropDownHeight = 200;

      
 


							
      Get the dropDownHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dropDownHeight = grid.layout.dropDownHeight;
      


      
	
      
	rowMinHeightnumber
	
      
			
	
      Sets the minimum height of the Grid rows. 
      
	
      Default value
      30
      

      Example
      							
      Set the rowMinHeight property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.rowMinHeight = 60;

      
 


							
      Get the rowMinHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let rowMinHeight = grid.layout.rowMinHeight;
      


      
	
      
	rowHeightstring | number | null
	
      
			
	
      Sets the height of the Grid rows. The property can be set to null, auto or a number. 
      

      

      Example
      							
      Set the rowHeight property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.rowHeight = 60;

      
 


							
      Get the rowHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let rowHeight = grid.layout.rowHeight;
      


      
	
      
	viewBarWidthnumber
	
      
			
	
      Sets the width of the view bar. 
      
	
      Default value
      250
      

      Example
      							
      Set the viewBarWidth property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.layout.viewBarWidth = 200;

      
 


							
      Get the viewBarWidth property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let viewBarWidth = grid.layout.viewBarWidth;
      


      

      

      
	
      
	unlockKeystring
	
      
			
	
      Sets or gets the unlockKey which unlocks the product. 
      
	
      Default value
      ""
      

      Example
      							
      Set the unlockKey property. 
      
							
       <smart-grid unlock-key=''></smart-grid>

      							
      Set the unlockKey property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.unlockKey = '1111-2222-3333-4444-5555';

      
 


							
      Get the unlockKey property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let unlockKey = grid.unlockKey;
      


      
	
      
	localestring
	
      
			
	
      Sets or gets the language. Used in conjunction with the property messages.  
      
	
      Default value
      "en"
      

      Example
      							
      Set the locale property. 
      
							
       <smart-grid locale='de'></smart-grid>

      							
      Set the locale property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.locale = 'fr';

      
 


							
      Get the locale property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let locale = grid.locale;
      


      
	
      
	keysobject
	
      
			
	
      Keys handling. You can define a key like "Enter": "Tab" or set a function as a value. When the key is pressed, it will be mapped to the other key, action such as 'copy', 'copyPrev', 'copyNext' or 'delete' or just a function defined in your document. 
      

      

      

      
	
      
	messagesobject
	
      
			
	
      Sets the messages values. 
      
	
      Default value


      {
  "en": {
    "invalidColumnProperty": "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Column: \"{{type}}\"",
    "invalidRowProperty": "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Row\"",
    "invalidCellValue": "Invalid cell value \"{{value}}\", Validation rule: \"{{validationRule}}\"",
    "frozenColumns": "{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen.",
    "frozenRows": "{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen.",
    "columnGroups": "{{elementType}}: Please, check the initialization of the smartGrid's columns array. The columns in a column group are expected to be siblings in the columns array.",
    "min": "Min: {{value}}",
    "max": "Max: {{value}} ",
    "sum": "Sum: {{value}} ",
    "avg": "Avg: {{value}} ",
    "count": "Count: {{value}} ",
    "pagerFirstButton": "First",
    "pagerLastButton": "Last",
    "pagerPreviousButton": "Previous",
    "pagerNextButton": "Next",
    "pagerNavigateToLabel": "Go to:",
    "pagerPageSizeLabel": "Show:",
    "pagerNavigateToInputPlaceholder": "",
    "pagerEllipsis": "...",
    "pagerSummaryString": "of",
    "pagerSummaryPrefix": "of",
    "pagerSummarySuffix": "",
    "columnMenuCustomizeType": "Customize type",
    "columnMenuItemRename": "Rename",
    "columnMenuItemEditDescription": "Edit description",
    "columnMenuItemDuplicate": "Duplicate",
    "columnMenuItemInsertLeft": "Insert left",
    "columnMenuItemInsertRight": "Insert right",
    "columnMenuItemSortAsc": "Sort {{mode}}",
    "columnMenuItemSortDesc": "Sort {{mode}}",
    "columnMenuItemRemoveSort": "Remove Sort",
    "columnMenuItemFilter": "Filter",
    "columnMenuItemRemoveFilter": "Remove Filter",
    "columnMenuItemGroupBy": "Group by this column",
    "columnMenuItemRemoveGroupBy": "Remove Group",
    "columnMenuItemHide": "Hide",
    "columnMenuItemDelete": "Delete",
    "columnResizeTooltip": "width: {{value}}px",
    "rowResizeTooltip": "height: {{value}}px",
    "commandBarAddRow": "Add",
    "commandBarDeleteRow": "Delete",
    "commandBarBatchRevert": "Revert",
    "commandBarBatchSave": "Save",
    "commandBarFilter": "Filter",
    "commandBarSort": "Sort",
    "commandBarSearch": "Search",
    "commandBarCustomize": "Customize",
    "commandBarGroup": "Group",
    "commandColumnEdit": "Edit",
    "commandColumnDelete": "Delete",
    "commandColumnCancel": "Cancel",
    "commandColumnUpdate": "Update",
    "commandColumnMenu": "",
    "expandRow": "Expand row",
    "collapseRow": "Collapse row",
    "addNewRow": "Click here to add a new row",
    "addNewColumn": "Click here to add a new column",
    "dialogChartHeader": "{{value}} Chart",
    "dialogRowDetailHeader": "Row Id: {{value}}",
    "dialogDescriptionHeader": "Column: {{value}}",
    "dialogRowDetailButtonConfirm": "OK",
    "dialogRowDetailButtonCancel": "CANCEL",
    "dialogEditHeader": "Edit {{value}}",
    "dialogAddButtonConfirm": "ADD",
    "dialogAddButtonCancel": "CANCEL",
    "dialogEditButtonConfirm": "OK",
    "dialogEditButtonCancel": "CANCEL",
    "dialogFilterButtonConfirm": "FILTER",
    "dialogFilterButtonCancel": "CLEAR",
    "dialogDeleteButtonConfirm": "DELETE",
    "dialogDeleteButtonCancel": "CANCEL",
    "dialogEditColumn": "Column: {{value}}",
    "dialogAddColumn": "Add Column",
    "dialogAddHeader": "Add Row",
    "dialogDeleteHeader": "Delete Row",
    "dialogFilterHeader": "Filter by",
    "dialogFilterMinLabel": "Min",
    "dialogFilterMaxLabel": "Max",
    "conditionalFormatting": "Conditional Formatting",
    "groupBarLabel": "Drag a column header here to group by that column",
    "dialogDeleteContent": "Are you sure you want to delete this row?",
    "calendar": {
      "/": "/",
      ":": ":",
      "firstDay": 0,
      "days": {
        "names": [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday"
        ],
        "namesAbbr": [
          "Sun",
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat"
        ],
        "namesShort": [
          "Su",
          "Mo",
          "Tu",
          "We",
          "Th",
          "Fr",
          "Sa"
        ]
      },
      "months": {
        "names": [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December",
          ""
        ],
        "namesAbbr": [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
          ""
        ]
      },
      "AM": [
        "AM",
        "am",
        "AM"
      ],
      "PM": [
        "PM",
        "pm",
        "PM"
      ],
      "eras": [
        {
          "name": "A.D.",
          "start": null,
          "offset": 0
        }
      ],
      "currencySymbol": "$",
      "currency": "USD",
      "currencySymbolPosition": "before",
      "decimalSeparator": ".",
      "thousandsSeparator": ","
    },
    "CONTAINS": "Contains",
    "DOES_NOT_CONTAIN": "Does not contain",
    "ENDS_WITH": "Ends with",
    "EQUAL": "Equal",
    "GREATER_THAN": "Greater than",
    "GREATER_THAN_OR_EQUAL": "Greater than or equal",
    "LESS_THAN": "Less than",
    "LESS_THAN_OR_EQUAL": "Less than or equal",
    "NOT_EQUAL": "Not equal",
    "RANGE": "Range",
    "CLEAR_FILTER": "Clear Filter",
    "STARTS_WITH": "Starts with",
    "addFilter": "+ Add filter",
    "and": "And",
    "apply": "Apply",
    "booleanFirst": "☐",
    "booleanLast": "☑",
    "cancel": "Cancel",
    "CONTAINS_CASE_SENSITIVE": "Contains (case sensitive)",
    "dateFirst": "1",
    "dateLast": "9",
    "DOES_NOT_CONTAIN_CASE_SENSITIVE": "does not contain (case sensitive)",
    "EMPTY": "empty",
    "ENDS_WITH_CASE_SENSITIVE": "ends with (case sensitive)",
    "EQUAL_CASE_SENSITIVE": "equal (case sensitive)",
    "filter": "Filter",
    "customize": "Customize Columns",
    "filteredByMultiple": "{{n}} filters",
    "filteredByOne": "1 filter",
    "filterValuePlaceholder": "Value",
    "find": "Find a field",
    "findInView": "Find in view",
    "firstBy": "Sort by",
    "found": "{{nth}} of {{n}}",
    "from": "from",
    "noFilters": "No filters applied",
    "noResults": "No results",
    "noSorting": "No sorting applied",
    "NOT_EMPTY": "not empty",
    "NOT_NULL": "not null",
    "NULL": "null",
    "numberFirst": "1",
    "numberLast": "9",
    "ok": "OK",
    "or": "Or",
    "pickAnother": "Pick another field to sort by",
    "sort": "Sort",
    "group": "Group",
    "sortedByMultiple": "Sorted by {{n}} fields",
    "sortedByOne": "Sorted by 1 field",
    "STARTS_WITH_CASE_SENSITIVE": "starts with (case sensitive)",
    "stringFirst": "A",
    "stringLast": "Z",
    "thenBy": "then by",
    "where": "Where",
    "collapseAll": "Collapse all",
    "expandAll": "Expand all",
    "noGrouping": "No grouping",
    "groupedByMultiple": "{{n}} groups",
    "groupedByOne": "1 group",
    "firstByGroup": "Group by",
    "pickAnotherGroupBy": "Pick another field to group by",
    "add": "Add condition",
    "all": "All columns",
    "between": "Between",
    "close": "Close",
    "column": "Column:",
    "condition": "Condition:",
    "equal": "Equal To",
    "fontFamily": "Font family:",
    "fontSize": "Font size:",
    "format": "Format:",
    "greaterThan": "Greater Than",
    "highlight": "Highlight",
    "lessThan": "Less Than",
    "notEqual": "Not Equal To",
    "remove": "Remove condition",
    "secondValue": "Second value:",
    "text": "Text",
    "value": "Value:",
    "addCondition": "Add Condition",
    "addGroup": "Add Group",
    "blanks": "(Blanks)",
    "clear": "Clear",
    "contains": "contains",
    "containsCaseSensitive": "contains (case sensitive)",
    "dateTabLabel": "DATE",
    "doesNotContain": "does not contain",
    "doesNotContainCaseSensitive": "does not contain (case sensitive)",
    "empty": "empty",
    "endsWith": "ends with",
    "endsWithCaseSensitive": "ends with (case sensitive)",
    "equalCaseSensitive": "equal (case sensitive)",
    "greaterThanOrEqual": "greater than or equal",
    "lessThanOrEqual": "less than or equal",
    "mismatchedProperties": "smartFilterPanel: The 'filterType' and the data type of the selected 'dataField' are mismatched.",
    "missingProperty": "smartFilterPanel: When mode is \"excel\", either \"data\" and \"dataField\" or \"dataSource\" of type Array have to be set.",
    "notEmpty": "not empty",
    "notNull": "not null",
    "null": "null ",
    "placeholderBoolean": "Select value",
    "placeholderDate": "Enter date",
    "placeholderNumber": "Enter number",
    "placeholderTime": "Enter time",
    "placeholderValue": "Enter value",
    "selectAll": "(Select All)",
    "showRows": "Show rows where:",
    "startsWith": "starts with",
    "startsWithCaseSensitive": "starts with (case sensitive)",
    "matchCase": "Match Case",
    "timeTabLabel": "TIME",
    "today": "Today",
    "formatColumn": "Format Column",
    "formating": "Conditional Formatting",
    "reset": "Reset",
    "filteredRecords": "All rows are filtered",
    "duplicateCells": "Clone column cells and settings",
    "duplicateSettings": "Clone column settings",
    "views": "Views",
    "noView": "No view",
    "myView": "My view",
    "saveView": "New view",
    "kanbanView": "View your records as cards on a Kanban board",
    "gridView": "View your records in a Table",
    "cardView": "View your records in a Card view",
    "days": "{{value}}d",
    "daysOverdue": "{{value}} days overdue",
    "daysLeft": "{{value}} days left",
    "true": "true",
    "false": "false",
    "TOMORROW": "Tomorrow",
    "TODAY": "Today",
    "YESTERDAY": "Yesterday",
    "NEXT_WEEK": "Next week",
    "THIS_WEEK": "This week",
    "LAST_WEEK": "Last week",
    "NEXT_MONTH": "Next month",
    "THIS_MONTH": "This month",
    "LAST_MONTH": "Last month",
    "hideHiddenColumns": "Hide {{value}} hidden columns",
    "showHiddenColumns": "Show {{value}} hidden columns",
    "less": "Less",
    "more": "More",
    "conditions": "Conditions",
    "colorsSingleSelect": "Which single select field should the row be colored by?",
    "colorRows": "Color rows when they match the conditions",
    "colorSelect": "Color rows the same as a single select value",
    "colorLeftBorderLabel": "Left border",
    "colorRowLabel": "Row",
    "colorCellLabel": "Cell",
    "colorLeftBorder": "Color the left border of a row",
    "colorRow": "Color the background of a row",
    "colorCell": "Color the background of a cell",
    "loadingIndicatorPlaceholder": "Loading...",
    "dropDownPlaceholder": "Please select...",
    "placeholder": "No Rows"
  }
}

      

      

      
	
      
	onCellValue{(cell: Smart.Grid.Cell): void}
	
      
			
	
      Callback function, which is called when the Grid needs a cell value to render it. When you implement this function, you can override the default cell value rendering. 
      

      

      

      
	
      
	onCellUpdate{(cells: Smart.Grid.Cell[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}
	
      
			
	
      Callback function, which is called when a cell value will be updated. This function is useful if you want to make Ajax call to a server to validate the cell changes. If the changes are validated, invoke the confirm function. 
      

      

      

      
	
      
	onCellRender{(cell: Smart.Grid.Cell): void}
	
      
			
	
      Callback function, which is called when a cell is rendered. This function is useful if you want to customize GridCell properties, before the cell is rendered. 
      

      

      

      
	
      
	onCellBeginEdit{(id: string, dataField: string, value: any): boolean}
	
      
			
	
      Callback function, which is called when a cell edit starts. If you return false, the edit will be canceled. 
      

      

      

      
	
      
	onCellEditRequest{(id: string, dataField: string, value: any, oldValue: any, data: any): void}
	
      
			
	
      Callback function, which is called when a cell edit ends. It is used along with the 'editing.readOnlyEdit' property when it is set to true and the purpose of this function is to update the Grid cell after editing. 
      

      

      

      
	
      
	onCellValueChanged{(id: string, dataField: string, value: any): boolean}
	
      
			
	
      Callback function, which is called when a cell value is changed. 
      

      

      

      
	
      
	onBeforeInit{(): void}
	
      
			
	
      Callback function() called before the grid has been initialized and the Grid's Virtual DOM is not created. 
      

      

      

      
	
      
	onInit{(): void}
	
      
			
	
      Callback function() called when the grid is initializing and the Grid's Virtual DOM is created. 
      

      

      

      
	
      
	onAfterInit{(): void}
	
      
			
	
      Callback function() called after the grid has been initialized and the Grid's Virtual DOM is created. 
      

      

      

      
	
      
	onChartInitSmart.Chart
	
      
			
	
      Callback function(chart: Smart.Chart) called when the chart has been initialized. You can use this function to customize the Chart element settings. 
      

      

      

      
	
      
	onRenderany
	
      
			
	
      Callback function() called when the grid has been rendered. 
      

      

      

      
	
      
	onLoadany
	
      
			
	
      Callback function() called when the grid has been rendered for first time and bindings are completed. The component is ready. 
      

      

      

      
	
      
	onKey{(event: KeyboardEvent): void}
	
      
			
	
      Callback function(event: KeyboardEvent) called when the grid is on focus and a keyboard key is pressed. 
      

      

      

      
	
      
	onRowInit{(index: number, row: Smart.Grid.Row): void}
	
      
			
	
      Callback function, which is called when a row is initializing. This function can be used to customize the row settings. 
      

      

      

      
	
      
	onRowDetailInit{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}
	
      
			
	
      Callback function, which is called when a row detail is initializing. Row details are displayed below the row's data or in a separate dialog. 
      

      

      

      
	
      
	onRowDetailUpdated{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}
	
      
			
	
      Callback function, which is called when a row detail is udpating. 
      

      

      

      
	
      
	onRowHistory{(index: number, row: Smart.Grid.Row, history: any[]): void}
	
      
			
	
      Callback function which is called when a row history is updated. The row history for edits is recorded when the 'storeHistory' property is enabled. 
      

      

      

      
	
      
	onRowStyle{(index: number, row: Smart.Grid.Row, history: any[]): void}
	
      
			
	
      Callback function which is called when a row style is updated. The row style can be changed by using the row dialog or the 'setRowStyle' method. 
      

      

      

      
	
      
	onRowInserted{(index: number[], row: Smart.Grid.Row[]): void}
	
      
			
	
      Callback function which is called when a row has been inserted. 
      

      

      

      
	
      
	onRowRemoved{(indexes: number[], rows: Smart.Grid.Row[]): void}
	
      
			
	
      Callback function, which is called when a row has been removed. 
      

      

      

      
	
      
	onRowUpdate{(index: number[], row: Smart.Grid.Row[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}
	
      
			
	
      Callback function, which is called when row's cell values will be updated. This function is useful if you want to make Ajax call to a server to validate the edit changes. If the changes are validated, invoke the confirm function. 
      

      

      

      
	
      
	onRowUpdated{(index: number[], row: Smart.Grid.Row[]): void}
	
      
			
	
      Callback function, called when a row has been updated. 
      

      

      

      
	
      
	onRowClass{(index: number, data: any, row: Smart.Grid.Row[]): void}
	
      
			
	
      Callback function called by the Grid when defined. It is used to get the CSS class applied to a row. 
      

      

      

      
	
      
	onCellClass{(index: number, string, cellValue: any, data: any, row: Smart.Grid.Row[]): void}
	
      
			
	
      Callback function called by the Grid when defined. It is used to get the CSS class applied to a cell. 
      

      

      

      
	
      
	onColumnInit{(index: number, column: Smart.Grid.Column): void}
	
      
			
	
      Callback function, which is called when a column has been initialized. This function can be used to customize the column settings. 
      

      

      

      
	
      
	onColumnInserted{(index: number, column: Smart.Grid.Column): void}
	
      
			
	
      Callback function, which called when a column has been inserted. 
      

      

      

      
	
      
	onColumnRemoved{(index: number, column: Smart.Grid.Column): void}
	
      
			
	
      Callback function, which is called when a column has been removed. 
      

      

      

      
	
      
	onColumnUpdated{(index: number, column: Smart.Grid.Column): void}
	
      
			
	
      Callback function, which is called when a column has been updated. 
      

      

      

      
	
      
	onColumnClone{(dataField: string, cloneColumnDataField: string, index: number, duplicateCells: boolean): void}
	
      
			
	
      Callback function, which is called when a column has been cloned. 
      

      

      

      
	
      
	onCommand{(name: string, command: any, details: Smart.Grid.Cell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void}
	
      
			
	
      Callback function, which is called when a command is executed. The name argument is the command's name. The command argument is the command's function. details are built in command arguments passed by the Grid. The handled parameter allows you to cancel built-in command, because when you set it to true the Grid will not execute the default command's behavior. 
      

      

      

      
					
      
					
					pagingobject
					
      
							
	
      Describes the paging settings. 
      

      Properties
      	
      enabled
      	
      spinner
      	
      pageSize
      	
      pageHierarchySize
      	
      pageIndex
      
	
      
	enabledboolean
	
      
			
	
      Enables pagination. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.paging.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.paging.enabled;
      


      
					
      
					
					spinnerobject
					
      
							
	
      Describes the spinner pagination settings. 
      

      Properties
      	
      enabled
      	
      step
      
	
      
	enabledboolean
	
      
			
	
      Enables spinner pagination. 
      
	
      Default value
      false
      

      


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.paging.spinner.enabled;
      


      
	
      
	stepnumber
	
      
			
	
      Sets the step of page 
      
	
      Default value
      1
      

      


							
      Get the step property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let step = grid.paging.spinner.step;
      


      

      


							
      Get the spinner property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let spinner = grid.paging.spinner;
      


      
	
      
	pageSizenumber
	
      
			
	
      Sets the number of rows per page. 
      
	
      Default value
      10
      

      


							
      Get the pageSize property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let pageSize = grid.paging.pageSize;
      


      
	
      
	pageHierarchySizenumber
	
      
			
	
      Sets the number of hierarchical rows per page. For example, displays 2 root groups per page, when grouping is enabled. 
      
	
      Default value
      2
      

      


							
      Get the pageHierarchySize property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let pageHierarchySize = grid.paging.pageHierarchySize;
      


      
	
      
	pageIndexnumber
	
      
			
	
      Sets the start page. 
      
	
      Default value
      0
      

      


							
      Get the pageIndex property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let pageIndex = grid.paging.pageIndex;
      


      
							Try a demo showcasing the paging property.


      

      
					
      
					
					pagerobject
					
      
							
	
      Describes the pager settings. 
      

      Properties
      	
      autoEllipsis
      	
      position
      	
      template
      	
      pageSizeSelector
      	
      summary
      	
      navigationButtons
      	
      navigationInput
      	
      pageIndexSelectors
      	
      visible
      
	
      
	autoEllipsis"none" | "before" | "after" | "both"
	
      
			
	
      Sets the ellipsis display mode. 
      
	
      Default value
      "both"
      

      


							
      Get the autoEllipsis property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoEllipsis = grid.pager.autoEllipsis;
      


      
	
      
	position"near" | "far" | "both"
	
      
			
	
      Sets the position of pager. 
      
	
      Default value
      "far"
      

      


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.pager.position;
      


      
	
      
	templatestring | HTMLTemplateElement
	
      
			
	
      Sets a template for the pager. 
      
	
      Default value
      ""
      

      


							
      Get the template property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let template = grid.pager.template;
      


      
					
      
					
					pageSizeSelectorobject
					
      
							
	
      Describes the settings for the 'rows per page' option. 
      

      Properties
      	
      visible
      	
      dataSource
      	
      position
      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the 'rows per page' option. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.pager.pageSizeSelector.visible;
      


      
	
      
	dataSourceobject
	
      
			
	
      Sets the count of the 'rows per page' option. 
      

      

      


							
      Get the dataSource property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataSource = grid.pager.pageSizeSelector.dataSource;
      


      
	
      
	position"near" | "far"
	
      
			
	
      Sets the position of the 'rows per page' option. 
      
	
      Default value
      "far"
      

      


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.pager.pageSizeSelector.position;
      


      

      


							
      Get the pageSizeSelector property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let pageSizeSelector = grid.pager.pageSizeSelector;
      


      
					
      
					
					summaryobject
					
      
							
	
      Describes the summary settings. 
      

      Properties
      	
      position
      	
      visible
      
	
      
	position"near" | "far"
	
      
			
	
      Sets the position of the summary. 
      
	
      Default value
      "far"
      

      


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.pager.summary.position;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the summary. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.pager.summary.visible;
      


      

      


							
      Get the summary property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let summary = grid.pager.summary;
      


      
					
      
					
					navigationButtonsobject
					
      
							
	
      Describes the navigation buttons settings. 
      

      Properties
      	
      position
      	
      prevNextButtons
      	
      firstLastButtons
      	
      labels
      
	
      
	position"near" | "far" | "both"
	
      
			
	
      Sets the navigation buttons position. 
      
	
      Default value
      "both"
      

      


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.pager.navigationButtons[0].position;
      


      
					
      
					
					prevNextButtonsobject
					
      
							
	
      Describes the settings about buttons 'previous page' and 'next page'. 
      

      Properties
      	
      visible
      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of 'previous page' and 'next page' buttons. 
      
	
      Default value
      true
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.pager.navigationButtons[0].prevNextButtons[0].visible;
      


      

      


							
      Get the prevNextButtons property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let prevNextButtons = grid.pager.navigationButtons[0].prevNextButtons;
      


      
					
      
					
					firstLastButtonsobject
					
      
							
	
      Describes the settings about buttons 'first page' and 'last page'. 
      

      Properties
      	
      visible
      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of 'first page' and 'last page' buttons. 
      
	
      Default value
      true
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.pager.navigationButtons[0].firstLastButtons[0].visible;
      


      

      


							
      Get the firstLastButtons property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let firstLastButtons = grid.pager.navigationButtons[0].firstLastButtons;
      


      
					
      
					
					labelsobject
					
      
							
	
      Describes the labels settings for navigation buttons. 
      

      Properties
      	
      visible
      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of labels for navigation buttons. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.pager.navigationButtons[0].labels[0].visible;
      


      

      


							
      Get the labels property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let labels = grid.pager.navigationButtons[0].labels;
      


      

      


							
      Get the navigationButtons property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let navigationButtons = grid.pager.navigationButtons;
      


      
					
      
					
					navigationInputobject
					
      
							
	
      Describes the settings about navigation input option. 
      

      Properties
      	
      position
      	
      visible
      
	
      
	position"near" | "far"
	
      
			
	
      Sets the position of navigation input option. 
      
	
      Default value
      "far"
      

      


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.pager.navigationInput.position;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of navigation input option. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.pager.navigationInput.visible;
      


      

      


							
      Get the navigationInput property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let navigationInput = grid.pager.navigationInput;
      


      
					
      
					
					pageIndexSelectorsobject
					
      
							
	
      Describes the settings for the numeric page buttons. 
      

      Properties
      	
      visible
      	
      dataSource
      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of numeric page buttons. 
      
	
      Default value
      true
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.pager.pageIndexSelectors[0].visible;
      


      
	
      
	dataSourceany
	
      
			
	
      Sets the number of visible page buttons. 
      
	
      Default value
      10
      

      


							
      Get the dataSource property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dataSource = grid.pager.pageIndexSelectors[0].dataSource;
      


      

      


							
      Get the pageIndexSelectors property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let pageIndexSelectors = grid.pager.pageIndexSelectors;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of pager. 
      
	
      Default value
      false
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.pager.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.pager.visible;
      


      
							Try a demo showcasing the pager property.


      

      
					
      
					
					rowDetailobject
					
      
							
	
      Sets the row details. 
      

      Properties
      	
      enabled
      	
      height
      	
      position
      	
      template
      	
      visible
      	
      dialog
      
	
      
	enabledboolean
	
      
			
	
      Enables the row details. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rowDetail.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.rowDetail.enabled;
      


      
	
      
	heightnumber
	
      
			
	
      Sets the height of the row details. 
      
	
      Default value
      200
      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.rowDetail.height;
      


      
	
      
	position"near" | "far"
	
      
			
	
      Sets the position of the Column which allows you to dynamically expand/collapse the row details. 
      
	
      Default value
      "near"
      

      


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.rowDetail.position;
      


      
	
      
	templatestring | HTMLTemplateElement
	
      
			
	
      Sets the template of the row details. 
      
	
      Default value
      ""
      

      


							
      Get the template property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let template = grid.rowDetail.template;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets the visibility of the Column which allows you to dynamically expand/collapse the row details. 
      
	
      Default value
      true
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rowDetail.visible = true;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.rowDetail.visible;
      


      
					
      
					
					dialogobject
					
      
							
	
      Sets the row details dialog. When enabled, row details will be displayed in a Dialog. 
      

      Properties
      	
      header
      	
      height
      	
      width
      	
      left
      	
      top
      	
      enabled
      
	
      
	headerstring
	
      
			
	
      Sets the header of the dialog. 
      
	
      Default value
      "{{message}}"
      

      


							
      Get the header property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let header = grid.rowDetail.dialog.header;
      


      
	
      
	heightstring | number
	
      
			
	
      Sets the height of the dialog. 
      
	
      Default value
      300
      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.rowDetail.dialog.height;
      


      
	
      
	widthstring | number
	
      
			
	
      Sets the width of the dialog. 
      
	
      Default value
      360
      

      


							
      Get the width property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let width = grid.rowDetail.dialog.width;
      


      
	
      
	leftstring | number
	
      
			
	
      Sets the Left position of the dialog. 
      
	
      Default value
      center
      

      


							
      Get the left property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let left = grid.rowDetail.dialog.left;
      


      
	
      
	topstring | number
	
      
			
	
      Sets the Top position of the dialog. 
      
	
      Default value
      center
      

      


							
      Get the top property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let top = grid.rowDetail.dialog.top;
      


      
	
      
	enabledboolean
	
      
			
	
      Sets whether the row details dialog is enabled. When enabled, row details are displayed in a dialog. 
      
	
      Default value
      false
      

      


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.rowDetail.dialog.enabled;
      


      

      


							
      Get the dialog property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let dialog = grid.rowDetail.dialog;
      


      
							Try a demo showcasing the rowDetail property.


      

      
	
      
	rowCSSRulesany
	
      
			
	
      Sets or gets the rows  CSS class rules. Different CSS class names are conditionally applied. Example: rowCSSRules: { 'cell-class-1': settings => settings.data.quantity === 5, 'cell-class-2': settings => settings.data.quantity < 5, 'cell-class-3': settings => settings.data.quantity > 5 }.  The settings object contains the following properties: index, data, row, api. 
      

      

      

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

      Example
      							
      Set the rightToLeft property. 
      
							
       <smart-grid right-to-left></smart-grid>

      							
      Set the rightToLeft property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rightToLeft = false;

      
 


							
      Get the rightToLeft property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let rightToLeft = grid.rightToLeft;
      


      
				
      
				
				rowsSmart.Grid.Row[]
				
      
						
	
      The rows property is used to describe all rows displayed in the grid. 
      

      Properties
      	
      allowToggle
      	
      allowResize
      	
      allowSelect
      	
      allowCheck
      	
      checked
      	
      cells
      	
      children
      	
      data
      	
      detailHeight
      	
      detailTemplate
      	
      element
      	
      expanded
      	
      header
      	
      height
      	
      index
      	
      id
      	
      leaf
      	
      maxHeight
      	
      minHeight
      	
      freeze
      	
      selected
      	
      showDetail
      	
      setStyle
      	
      visible
      	
      visibleIndex
      	
      getCell
      
	
      
	allowToggleboolean
	
      
			
	
      Sets or gets the row can be expanded or collapsed. 
      
	
      Default value
      true
      

      Example
      							
      Set the allowToggle property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].allowToggle = true;

      
 


							
      Get the allowToggle property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowToggle = grid.rows[0].allowToggle;
      


      
	
      
	allowResizeboolean
	
      
			
	
      Sets or gets the row can be resized. 
      
	
      Default value
      true
      

      Example
      							
      Set the allowResize property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].allowResize = true;

      
 


							
      Get the allowResize property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowResize = grid.rows[0].allowResize;
      


      
	
      
	allowSelectboolean | null
	
      
			
	
      Sets or gets the row can be selected. 
      
	
      Default value
      true
      

      Example
      							
      Set the allowSelect property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].allowSelect = false;

      
 


							
      Get the allowSelect property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowSelect = grid.rows[0].allowSelect;
      


      
	
      
	allowCheckboolean
	
      
			
	
      Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode. 
      
	
      Default value
      true
      

      Example
      							
      Set the allowCheck property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].allowCheck = false;

      
 


							
      Get the allowCheck property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowCheck = grid.rows[0].allowCheck;
      


      
	
      
	checkedboolean
	
      
			
	
      Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode. 
      
	
      Default value
      true
      

      Example
      							
      Set the checked property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].checked = false;

      
 


							
      Get the checked property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let checked = grid.rows[0].checked;
      


      
				
      
				
				cellsSmart.Grid.Cell[]
				
      
						
	
      Gets the Row's Cells array. 
      
	
      Default value
      null
      Properties
      	
      align
      	
      column
      	
      color
      	
      background
      	
      borderColor
      	
      colSpan
      	
      editor
      	
      element
      	
      getFormattedValue
      	
      isEditing
      	
      oldValue
      	
      fontSize
      	
      fontWeight
      	
      fontFamily
      	
      fontStyle
      	
      readonly
      	
      row
      	
      rowSpan
      	
      selected
      	
      setProperties
      	
      tooltip
      	
      value
      	
      verticalAlign
      	
      setStyle
      
	
      
	alignstring
	
      
			
	
      "Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'". 
      
	
      Default value
      "'left'"
      

      Example
      							
      Set the align property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].align = 'right';

      
 


							
      Get the align property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let align = grid.rows[0].cells[0].align;
      


      
	
      
	columnSmart.Grid.Column
	
      
			
	
      Gets the column associated to the cell. 
      

      

      


							
      Get the column property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let column = grid.rows[0].cells[0].column;
      


      
	
      
	colorstring
	
      
			
	
      Sets or gets the cell's text color. 
      
	
      Default value
      "''"
      

      Example
      							
      Set the color property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].color = 'red';

      
 


							
      Get the color property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let color = grid.rows[0].cells[0].color;
      


      
	
      
	backgroundstring
	
      
			
	
      Sets or gets the cell's background. 
      
	
      Default value
      "''"
      

      Example
      							
      Set the background property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].background = 'yellow';

      
 


							
      Get the background property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let background = grid.rows[0].cells[0].background;
      


      
	
      
	borderColorstring
	
      
			
	
      Sets or gets the cell's borderColor. 
      
	
      Default value
      "''"
      

      Example
      							
      Set the borderColor property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].borderColor = 'red';

      
 


							
      Get the borderColor property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let borderColor = grid.rows[0].cells[0].borderColor;
      


      
	
      
	colSpannumber
	
      
			
	
      Sets or gets the cell's colSpan. 
      
	
      Default value
      1
      

      Example
      							
      Set the colSpan property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].colSpan = 1;

      
 


							
      Get the colSpan property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let colSpan = grid.rows[0].cells[0].colSpan;
      


      
	
      
	editor"Object{template: string, setValue: {(value: object): void}, getValue: {(): object}, blur: {(): void}, focus: {(): void}, attach: {(): void}, detach: {(): void}, selector: HTMLTemplateElement". Template values: 'checkBox', 'input', 'numberInput', 'autoComplete', 'dateTimePicker', 'custom'
	
      
			
	
      Sets or gets the cell's editor. 
      

      

      


							
      Get the editor property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let editor = grid.rows[0].cells[0].editor;
      


      
	
      
	elementHTMLElement
	
      
			
	
      Gets the HTMLElement associated to the cell. 
      

      

      


							
      Get the element property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let element = grid.rows[0].cells[0].element;
      


      
	
      
	getFormattedValue{(value: any, type: string): void}
	
      
			
	
      Gets a formatted number or Date. 
      

      

      


							
      Get the getFormattedValue property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let getFormattedValue = grid.rows[0].cells[0].getFormattedValue;
      


      
	
      
	isEditingboolean
	
      
			
	
      Gets whether the cell is in edit mode. 
      
	
      Default value
      false
      

      


							
      Get the isEditing property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let isEditing = grid.rows[0].cells[0].isEditing;
      


      
	
      
	oldValueany
	
      
			
	
      Gets the old value of the cell 
      

      

      


							
      Get the oldValue property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let oldValue = grid.rows[0].cells[0].oldValue;
      


      
	
      
	fontSizestring
	
      
			
	
      Sets or gets the cell's fontSize 
      
	
      Default value
      "''"
      

      Example
      							
      Set the fontSize property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].fontSize = '24px';

      
 


							
      Get the fontSize property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let fontSize = grid.rows[0].cells[0].fontSize;
      


      
	
      
	fontWeightstring
	
      
			
	
      Sets or gets the cell's fontWeight 
      
	
      Default value
      "''"
      

      Example
      							
      Set the fontWeight property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].fontWeight = '700';

      
 


							
      Get the fontWeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let fontWeight = grid.rows[0].cells[0].fontWeight;
      


      
	
      
	fontFamilystring
	
      
			
	
      Sets or gets the cell's fontFamily 
      
	
      Default value
      "''"
      

      Example
      							
      Set the fontFamily property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].fontFamily = 'Verdana';

      
 


							
      Get the fontFamily property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let fontFamily = grid.rows[0].cells[0].fontFamily;
      


      
	
      
	fontStylestring
	
      
			
	
      Sets or gets the cell's fontStyle 
      
	
      Default value
      "''"
      

      Example
      							
      Set the fontStyle property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].fontStyle = 'italic';

      
 


							
      Get the fontStyle property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let fontStyle = grid.rows[0].cells[0].fontStyle;
      


      
	
      
	readonlyboolean
	
      
			
	
      "Sets or gets whether the cell can be edited.". 
      
	
      Default value
      false
      

      Example
      							
      Set the readonly property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].readonly = false;

      
 


							
      Get the readonly property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let readonly = grid.rows[0].cells[0].readonly;
      


      
	
      
	rowSmart.Grid.Row
	
      
			
	
      Gets the row object associated to the cell. 
      

      

      


							
      Get the row property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let row = grid.rows[0].cells[0].row;
      


      
	
      
	rowSpannumber
	
      
			
	
      Sets or gets the row span. 
      
	
      Default value
      1
      

      


							
      Get the rowSpan property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let rowSpan = grid.rows[0].cells[0].rowSpan;
      


      
	
      
	selectedboolean
	
      
			
	
      Sets or gets whether the cell is selected. 
      
	
      Default value
      false
      

      Example
      							
      Set the selected property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].selected = false;

      
 


							
      Get the selected property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let selected = grid.rows[0].cells[0].selected;
      


      
	
      
	setProperties{(properties: {name: string, value: string}[]): void}
	
      
			
	
      "Each property is an object{name: string, value: any}. This function allows you to update multiple properties with single refresh.". 
      
	
      Default value
      ""
      

      


							
      Get the setProperties property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let setProperties = grid.rows[0].cells[0].setProperties;
      


      
	
      
	tooltipstring
	
      
			
	
      "Allowed values are: 'top', 'middle' or 'bottom'". 
      
	
      Default value
      ""
      

      Example
      							
      Set the tooltip property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].tooltip = 'my awesome tooltip';

      
 


							
      Get the tooltip property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let tooltip = grid.rows[0].cells[0].tooltip;
      


      
	
      
	valueany
	
      
			
	
      The cell's value 
      

      

      Example
      							
      Set the value property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].value = 400;

      
 


							
      Get the value property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let value = grid.rows[0].cells[0].value;
      


      
	
      
	verticalAlignstring
	
      
			
	
      "Sets or gets the vertical alignment. Allowed values are: 'top', 'center' or 'bottom'". 
      
	
      Default value
      "'center'"
      

      Example
      							
      Set the verticalAlign property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].cells[0].verticalAlign = 'bottom';

      
 


							
      Get the verticalAlign property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let verticalAlign = grid.rows[0].cells[0].verticalAlign;
      


      
	
      
	setStyle{(value: any): void}
	
      
			
	
      "Method which applies a cell style object. Expects a JSON object with the following possible values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration' 
      
	
      Default value
      null
      

      


							
      Get the setStyle property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let setStyle = grid.rows[0].cells[0].setStyle;
      


      

      


							
      Get the cells property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let cells = grid.rows[0].cells;
      


      
	
      
	childrenSmart.Grid.Row[]
	
      
			
	
      Gets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid. 
      

      

      


							
      Get the children property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let children = grid.rows[0].children;
      


      
	
      
	dataany
	
      
			
	
      Gets the row's bound data. 
      

      

      


							
      Get the data property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let data = grid.rows[0].data;
      


      
	
      
	detailHeightnumber
	
      
			
	
      Sets or gets the row's detail height. 
      
	
      Default value
      200
      

      


							
      Get the detailHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let detailHeight = grid.rows[0].detailHeight;
      


      
	
      
	detailTemplatestring | HTMLTemplateElement | null
	
      
			
	
      Sets or gets the row's detail template. 
      

      

      


							
      Get the detailTemplate property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let detailTemplate = grid.rows[0].detailTemplate;
      


      
	
      
	elementobject | null
	
      
			
	
      Gets the HTML Element. The property returns null when the Row is not in the View. 
      

      

      


							
      Get the element property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let element = grid.rows[0].element;
      


      
	
      
	expandedboolean
	
      
			
	
      Sets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode. 
      
	
      Default value
      false
      

      


							
      Get the expanded property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let expanded = grid.rows[0].expanded;
      


      
	
      
	headerHTMLElement
	
      
			
	
      Gets the row's header element. 
      

      

      


							
      Get the header property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let header = grid.rows[0].header;
      


      
	
      
	heightnumber
	
      
			
	
      Sets or gets the row's height. 
      
	
      Default value
      30
      

      


							
      Get the height property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let height = grid.rows[0].height;
      


      
	
      
	indexnumber
	
      
			
	
      Gets the row's bound index. 
      
	
      Default value
      -1
      

      


							
      Get the index property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let index = grid.rows[0].index;
      


      
	
      
	idstring | number
	
      
			
	
      Gets the row's bound id. 
      
	
      Default value
      ""
      

      


							
      Get the id property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let id = grid.rows[0].id;
      


      
	
      
	leafboolean
	
      
			
	
      Gets whether the row is leaf row in TreeGrid or Grouping mode. 
      
	
      Default value
      false
      

      


							
      Get the leaf property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let leaf = grid.rows[0].leaf;
      


      
	
      
	maxHeightnumber
	
      
			
	
      Sets or gets the row's maximum height. 
      
	
      Default value
      100
      

      


							
      Get the maxHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let maxHeight = grid.rows[0].maxHeight;
      


      
	
      
	minHeightnumber
	
      
			
	
      Sets or gets the row's minimum height. 
      
	
      Default value
      30
      

      


							
      Get the minHeight property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let minHeight = grid.rows[0].minHeight;
      


      
	
      
	freeze"near" | "far" | "true" | "false"
	
      
			
	
      Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the row to top(near) or bottom(far). 
      
	
      Default value
      false
      

      


							
      Get the freeze property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let freeze = grid.rows[0].freeze;
      


      
	
      
	selectedboolean
	
      
			
	
      Sets or gets whether the row is selected. 
      
	
      Default value
      false
      

      Example
      							
      Set the selected property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].selected = false;

      
 


							
      Get the selected property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let selected = grid.rows[0].selected;
      


      
	
      
	showDetailboolean
	
      
			
	
      Sets or gets whether the row detail is displayed. 
      
	
      Default value
      false
      

      


							
      Get the showDetail property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let showDetail = grid.rows[0].showDetail;
      


      
	
      
	setStyle{(value: any): void}
	
      
			
	
      "Method which applies a style object to all cells. Expects a JSON object with the following allowed values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration' 
      
	
      Default value
      null
      

      


							
      Get the setStyle property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let setStyle = grid.rows[0].setStyle;
      


      
	
      
	visibleboolean
	
      
			
	
      Sets or gets whether the row is visible. Set the property to 'false' to hide the row. 
      
	
      Default value
      true
      

      Example
      							
      Set the visible property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.rows[0].visible = false;

      
 


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.rows[0].visible;
      


      
	
      
	visibleIndexnumber
	
      
			
	
      Gets the visible index of the row. 
      
	
      Default value
      -1
      

      


							
      Get the visibleIndex property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visibleIndex = grid.rows[0].visibleIndex;
      


      
	
      
	getCellany
	
      
			
	
      Methods which gets a cell, which is inside a row. A dataField string is a required argument, when you call this method. 
      
	
      Default value
      -1
      

      


							
      Get the getCell property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let getCell = grid.rows[0].getCell;
      


      

      
				
      
	
      
	scrolling"physical" | "virtual" | "infinite" | "deferred"
	
      
			
	
      Sets the scroll mode settings. 
      
	
      Default value
      "physical"
      
							Try a demo showcasing the scrolling property.


      Example
      							
      Set the scrolling property. 
      
							
       <smart-grid scrolling='physical'></smart-grid>

      							
      Set the scrolling property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.scrolling = 'deferred';

      
 


							
      Get the scrolling property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let scrolling = grid.scrolling;
      


      
					
      
					
					summaryRowobject
					
      
							
	
      Describes the summary row settings. 
      

      Properties
      	
      visible
      	
      editing
      
	
      
	visibleboolean
	
      
			
	
      Sets the summary row visibility. 
      
	
      Default value
      false
      

      


							
      Get the visible property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let visible = grid.summaryRow.visible;
      


      
	
      
	editingboolean
	
      
			
	
      Sets the summary row editor. When you point over a summary row cell, an editor is displayed and you will be able to dynamically change the summary type. 
      
	
      Default value
      false
      

      


							
      Get the editing property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let editing = grid.summaryRow.editing;
      


      

      

      
					
      
					
					stateSettingsobject
					
      
							
	
      Sets the grid's state settings. 
      

      Properties
      	
      autoSave
      	
      autoLoad
      	
      enabled
      	
      current
      	
      storage
      	
      onStateChange
      	
      options
      
	
      
	autoSaveboolean
	
      
			
	
      Enables or disables auto-save of the Grid's state 
      
	
      Default value
      false
      

      


							
      Get the autoSave property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoSave = grid.stateSettings[0].autoSave;
      


      
	
      
	autoLoadboolean
	
      
			
	
      Enables or disables auto-load of the Grid's state on page reload. 
      
	
      Default value
      false
      

      


							
      Get the autoLoad property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoLoad = grid.stateSettings[0].autoLoad;
      


      
	
      
	enabledboolean
	
      
			
	
      Enables or disables save/load of the grid state. 
      
	
      Default value
      true
      

      


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.stateSettings[0].enabled;
      


      
	
      
	currentstring
	
      
			
	
      Sets or gets the current state. 
      
	
      Default value
      ""
      

      Example
      							
      Set the current property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.stateSettings[0].current = 'state2';

      
 


							
      Get the current property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let current = grid.stateSettings[0].current;
      


      
	
      
	storageany
	
      
			
	
      Container which is auto-filled with state objects when you call the saveState method or enable the autoSave of states. Each object has a key which is the state's name and value which is a json with the state's properties. 
      

      

      


							
      Get the storage property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let storage = grid.stateSettings[0].storage;
      


      
	
      
	onStateChangeany
	
      
			
	
      Function called when the state is changed. 
      
	
      Default value
      ""
      

      


							
      Get the onStateChange property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let onStateChange = grid.stateSettings[0].onStateChange;
      


      
	
      
	optionsstring[]
	
      
			
	
      Array with state options such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', 'columns'. This property determines which parts of the state would be saved or loaded. 
      

      

      


							
      Get the options property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let options = grid.stateSettings[0].options;
      


      
							Try a demo showcasing the stateSettings property.


      
				
      Example about dataSource
      
const grid = new smartGrid('#grid', {
	dataSource: new smartDataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
	
      
					
      
					
					selectionobject
					
      
							
	
      Describes the selection settings. 
      

      Properties
      	
      enabled
      	
      allowRowHeaderSelection
      	
      allowColumnHeaderSelection
      	
      allowRowSelection
      	
      allowCellSelection
      	
      allowDragSelection
      	
      allowDragSelectionAutoScroll
      	
      allowCellDragSelectionHandle
      	
      allowCellDragDropSelectionHandle
      	
      allowCellDragSelectionAutoFill
      	
      defaultSelection
      	
      mode
      	
      action
      	
      checkBoxes
      	
      selected
      
	
      
	enabledboolean
	
      
			
	
      Enables the selection option. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.selection.enabled;
      


      
	
      
	allowRowHeaderSelectionboolean
	
      
			
	
      Sets or gets whether selection by clicking on a Row header is allowed. 
      
	
      Default value
      false
      

      Example
      							
      Set the allowRowHeaderSelection property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.allowRowHeaderSelection = true;

      
 


							
      Get the allowRowHeaderSelection property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowRowHeaderSelection = grid.selection.allowRowHeaderSelection;
      


      
	
      
	allowColumnHeaderSelectionboolean
	
      
			
	
      Sets or gets whether selection by clicking on a Column header is allowed. 
      
	
      Default value
      false
      

      Example
      							
      Set the allowColumnHeaderSelection property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.allowColumnHeaderSelection = true;

      
 


							
      Get the allowColumnHeaderSelection property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowColumnHeaderSelection = grid.selection.allowColumnHeaderSelection;
      


      
	
      
	allowRowSelectionboolean
	
      
			
	
      Sets or gets whether selection by clicking on a Row is allowed. 
      
	
      Default value
      true
      
							Try a demo showcasing the allowRowSelection property.


      Example
      							
      Set the allowRowSelection property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.allowRowSelection = true;

      
 


							
      Get the allowRowSelection property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowRowSelection = grid.selection.allowRowSelection;
      


      
	
      
	allowCellSelectionboolean
	
      
			
	
      Sets or gets whether selection by clicking on a cell is allowed. 
      
	
      Default value
      false
      

      Example
      							
      Set the allowCellSelection property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.allowCellSelection = true;

      
 


							
      Get the allowCellSelection property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowCellSelection = grid.selection.allowCellSelection;
      


      
	
      
	allowDragSelectionboolean
	
      
			
	
      Sets or gets whether selection by dragging(like in Excel) is allowed. 
      
	
      Default value
      true
      

      Example
      							
      Set the allowDragSelection property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.allowDragSelection = true;

      
 


							
      Get the allowDragSelection property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowDragSelection = grid.selection.allowDragSelection;
      


      
	
      
	allowDragSelectionAutoScrollboolean
	
      
			
	
      Sets or gets whether selection by dragging will automatically scroll the Grid view. 
      
	
      Default value
      true
      

      Example
      							
      Set the allowDragSelectionAutoScroll property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.allowDragSelectionAutoScroll = true;

      
 


							
      Get the allowDragSelectionAutoScroll property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowDragSelectionAutoScroll = grid.selection.allowDragSelectionAutoScroll;
      


      
	
      
	allowCellDragSelectionHandleboolean
	
      
			
	
      Sets or gets whether the Cells selection bottom-right corner selection 'Drag Handle' (litte square like in Excel) is displayed. That handle allows you to resize the selection horizontally or vertically 
      
	
      Default value
      true
      

      Example
      							
      Set the allowCellDragSelectionHandle property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.allowCellDragSelectionHandle = true;

      
 


							
      Get the allowCellDragSelectionHandle property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowCellDragSelectionHandle = grid.selection.allowCellDragSelectionHandle;
      


      
	
      
	allowCellDragDropSelectionHandleboolean
	
      
			
	
      Sets or gets whether the Cells selection can be dragged and dropped. Drag happens when the cursor is moved to the bottom of the cells selection. The cursor is changed to a drag cursor. Press the button and hold and move the selection. By default the dragged cell values are copied on drop. 
      
	
      Default value
      true
      

      Example
      							
      Set the allowCellDragDropSelectionHandle property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.allowCellDragDropSelectionHandle = true;

      
 


							
      Get the allowCellDragDropSelectionHandle property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowCellDragDropSelectionHandle = grid.selection.allowCellDragDropSelectionHandle;
      


      
	
      
	allowCellDragSelectionAutoFillboolean
	
      
			
	
      Sets or gets whether the Cells selection will be auto-filled with values on drop when dragging through the 'Drag Handle'. 
      
	
      Default value
      true
      

      Example
      							
      Set the allowCellDragSelectionAutoFill property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.allowCellDragSelectionAutoFill = true;

      
 


							
      Get the allowCellDragSelectionAutoFill property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let allowCellDragSelectionAutoFill = grid.selection.allowCellDragSelectionAutoFill;
      


      
	
      
	defaultSelectionboolean
	
      
			
	
      Sets or gets whether the default browser's text selection is enabled. 
      
	
      Default value
      false
      

      Example
      							
      Set the defaultSelection property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.defaultSelection = true;

      
 


							
      Get the defaultSelection property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let defaultSelection = grid.selection.defaultSelection;
      


      
	
      
	mode"one" | "many" | "extended"
	
      
			
	
      Sets or gets whether the selection allows you to select 'one', 'many' or a variation of 'many' called 'extended'. 'one' allows you to have only single cell or row selected. 'many'  
      
	
      Default value
      "many"
      

      Example
      							
      Set the mode property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.mode = 'extended';

      
 


							
      Get the mode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let mode = grid.selection.mode;
      


      
	
      
	action"none" | "click" | "doubleClick"
	
      
			
	
      Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API. 
      
	
      Default value
      "click"
      

      


							
      Get the action property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let action = grid.selection.action;
      


      
					
      
					
					checkBoxesobject
					
      
							
	
       
      

      Properties
      	
      autoShow
      	
      enabled
      	
      action
      	
      selectAllMode
      	
      position
      
	
      
	autoShowboolean
	
      
			
	
      Sets or gets whether the checkboxes are automatically displayed only when the mouse is over the Grid. When false, checkboses are always displayed 
      
	
      Default value
      false
      

      Example
      							
      Set the autoShow property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.checkBoxes[0].autoShow = true;

      
 


							
      Get the autoShow property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let autoShow = grid.selection.checkBoxes[0].autoShow;
      


      
	
      
	enabledboolean
	
      
			
	
      Sets or gets whether the checkboxes selection is enabled. In that mode a new column with checkboxes is displayed. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.selection.checkBoxes[0].enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.selection.checkBoxes[0].enabled;
      


      
	
      
	action"none" | "click" | "doubleClick"
	
      
			
	
      Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API. 
      
	
      Default value
      "click"
      

      


							
      Get the action property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let action = grid.selection.checkBoxes[0].action;
      


      
	
      
	selectAllMode"none" | "page" | "all"
	
      
			
	
      Sets or gets whether the checkbox selection selects all rows in the current page or all rows. The 'none' setting disables the header checkbox. 
      
	
      Default value
      "page"
      

      


							
      Get the selectAllMode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let selectAllMode = grid.selection.checkBoxes[0].selectAllMode;
      


      
	
      
	position"near" | "far"
	
      
			
	
      Sets or gets whether the position of the checkbox selection column. 
      
	
      Default value
      "near"
      

      


							
      Get the position property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let position = grid.selection.checkBoxes[0].position;
      


      
							Try a demo showcasing the checkBoxes property.


      


							
      Get the checkBoxes property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let checkBoxes = grid.selection.checkBoxes;
      


      
	
      
	selectedstring
	
      
			
	
       
      
	
      Default value
      ""
      

      


							
      Get the selected property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let selected = grid.selection.selected;
      


      
							Try a demo showcasing the selection property.


      

      
					
      
					
					sortingobject
					
      
							
	
      Describes sorting settings. 
      

      Properties
      	
      enabled
      	
      sort
      	
      maintainSort
      	
      mode
      	
      commandKey
      	
      sortToggleThreeStates
      	
      sortToggleOnClick
      	
      sortToggleOnClickAndCommandKey
      
	
      
	enabledboolean
	
      
			
	
      Enables sorting. 
      
	
      Default value
      false
      

      Example
      							
      Set the enabled property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.sorting.enabled = true;

      
 


							
      Get the enabled property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let enabled = grid.sorting.enabled;
      


      
	
      
	sortstring[]
	
      
			
	
      Sets the sort columns to be sorted. 
      

      

      


							
      Get the sort property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let sort = grid.sorting.sort;
      


      
	
      
	maintainSortboolean
	
      
			
	
      Maintains sorting when user edits data in the sorted column. The feature is useful when you want to apply sort just once and you set the property to false. 
      
	
      Default value
      true
      

      Example
      							
      Set the maintainSort property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.sorting.maintainSort = false;

      
 


							
      Get the maintainSort property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let maintainSort = grid.sorting.maintainSort;
      


      
	
      
	mode"one" | "many"
	
      
			
	
      Sets the count of allowed sorting columns. When the property value is set to 'many', users can sort data by multiple columns. 
      
	
      Default value
      "one"
      

      Example
      							
      Set the mode property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.sorting.mode = 'many';

      
 


							
      Get the mode property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let mode = grid.sorting.mode;
      


      
	
      
	commandKey"Default" | "Alt" | "Control" | "Shift"
	
      
			
	
      Sets the command key. The property is used in the multi-column sorting. If commandKey='Control', users will be able to sort by multiple columns only while holding the 'Control' key. 
      
	
      Default value
      "Default"
      

      Example
      							
      Set the commandKey property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.sorting.commandKey = 'Shift';

      
 


							
      Get the commandKey property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let commandKey = grid.sorting.commandKey;
      


      
	
      
	sortToggleThreeStatesboolean
	
      
			
	
      Enables switching between the three sort states: ascending, descending and not sorted. 
      
	
      Default value
      true
      

      Example
      							
      Set the sortToggleThreeStates property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.sorting.sortToggleThreeStates = true;

      
 


							
      Get the sortToggleThreeStates property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let sortToggleThreeStates = grid.sorting.sortToggleThreeStates;
      


      
	
      
	sortToggleOnClickboolean
	
      
			
	
      Enables switching between the sort states on column click. This is the default behavior. 
      
	
      Default value
      true
      

      Example
      							
      Set the sortToggleOnClick property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.sorting.sortToggleOnClick = true;

      
 


							
      Get the sortToggleOnClick property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let sortToggleOnClick = grid.sorting.sortToggleOnClick;
      


      
	
      
	sortToggleOnClickAndCommandKeyboolean
	
      
			
	
      Enables switching between the sort states on column click and holding down the command key. 
      
	
      Default value
      false
      

      Example
      							
      Set the sortToggleOnClickAndCommandKey property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.sorting.sortToggleOnClickAndCommandKey = true;

      
 


							
      Get the sortToggleOnClickAndCommandKey property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let sortToggleOnClickAndCommandKey = grid.sorting.sortToggleOnClickAndCommandKey;
      


      
							Try a demo showcasing the sorting property.


      

      
	
      
	users[]
	
      
			
	
      Sets the grid users. Expects an array with 'id', 'name' and optionally 'color' and 'image' properties. 
      
	
      Default value
      []
      

      Example
      							
      Set the users property. 
      
							
       <smart-grid users='[]'></smart-grid>

      							
      Set the users property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.users = [];

      
 


							
      Get the users property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let users = grid.users;
      


      
					
      
					
					uploadSettingsobject
					
      
							
	
      Sets the grid's image and filter upload settings for the image and attachment columns. 
      

      Properties
      	
      url
      	
      removeUrl
      	
      name
      	
      data
      	
      onUploadCompleted
      	
      onUploadError
      
	
      
	urlstring
	
      
			
	
      Sets or file/image upload url. 
      
	
      Default value
      ""
      

      Example
      							
      Set the url property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.uploadSettings[0].url = 'https://myuploadurl.com';

      
 


							
      Get the url property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let url = grid.uploadSettings[0].url;
      


      
	
      
	removeUrlstring
	
      
			
	
      Sets or file/image remove url. 
      
	
      Default value
      ""
      

      Example
      							
      Set the removeUrl property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.uploadSettings[0].removeUrl = 'https://myuploadurl.com';

      
 


							
      Get the removeUrl property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let removeUrl = grid.uploadSettings[0].removeUrl;
      


      
	
      
	namestring
	
      
			
	
      Sets or gets the upload field name. In the backend, you can use this name to access the images data. For example in expressJS, you can use something like that: const images = req['files']['userfile[]']; 
      
	
      Default value
      "userfile[]"
      

      Example
      							
      Set the name property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.uploadSettings[0].name = 'files';

      
 


							
      Get the name property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let name = grid.uploadSettings[0].name;
      


      
	
      
	datastring
	
      
			
	
      Additional data to pass to the server. The format should be a JSON string. 
      
	
      Default value
      ""
      

      Example
      							
      Set the data property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.uploadSettings[0].data = 'files';

      
 


							
      Get the data property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let data = grid.uploadSettings[0].data;
      


      
	
      
	onUploadCompletedany
	
      
			
	
      Function called when the upload is completed. JSON object with 'files', 'status', 'fileURL' and 'serverResponse' are passed as parameters when the function is called by the Grid. 
      
	
      Default value
      ""
      

      


							
      Get the onUploadCompleted property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let onUploadCompleted = grid.uploadSettings[0].onUploadCompleted;
      


      
	
      
	onUploadErrorany
	
      
			
	
      Function called when the upload has failed. JSON object with 'files', 'status' and 'serverResponse' are passed as parameters when the function is called by the Grid. 
      
	
      Default value
      ""
      

      


							
      Get the onUploadError property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let onUploadError = grid.uploadSettings[0].onUploadError;
      


      
							Try a demo showcasing the uploadSettings property.


      
				
      Example about dataSource
      
const grid = new smartGrid('#grid', {
	dataSource: new smartDataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
	
      
	
      
	viewstring
	
      
			
	
      Sets the current data view. The possible values are 'grid', 'kanban' and 'card'. 
      
	
      Default value
      "grid"
      

      Example
      							
      Set the view property. 
      
							
       <smart-grid view='grid'></smart-grid>

      							
      Set the view property by using the HTML Element's instance. 
      
							
       const grid = document.querySelector('smart-grid');
      
 
							
       grid.view = 'card';

      
 


							
      Get the view property. 
      
							
       const grid = document.querySelector('smart-grid');
      
							
       let view = grid.view;
      


      Events
      
				
      
					beginEditCustomEvent
				
      
			
	
      This event is triggered, when the edit begins. After the event occurs, editing starts. If you need to prevent the editing for specific cells, rows or columns, you can call event.preventDefault();.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onBeginEdit
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.id

	string | number
 - The edited row id.
      
	
      ev.detail.dataField

	string
 - The edited column data field.
      
	
      ev.detail.row

	Smart.Grid.Row
 - The edited row.
      
	
      ev.detail.column

	Smart.Grid.Column
 - The edited column.
      
	
      ev.detail.cell

	Smart.Grid.Cell
 - The edited cell.
      
	
      ev.detail.data

	object
 - The edited row's data.
      
	
      ev.detail.value

	object
 - The edited cell's value.
      
			
      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 beginEdit event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('beginEdit', function (event) {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        column = detail.column,
        cell = detail.cell,
        data = detail.data,
        value = detail.value;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					batchChangeCustomEvent
				
      
			
	
      This event is triggered, when the Grid's header toolbar is displayed and the 'OK' button of a header dropdown is clicked. For example, when you open the columns customize panel, reorder columns and click the 'OK' button.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onBatchChange
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.type

	string
 - The type of dropdown. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'
      
			
      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 batchChange event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('batchChange', function (event) {
    const detail = event.detail,
        type = detail.type;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					batchCancelCustomEvent
				
      
			
	
      This event is triggered, when the Grid's header toolbar is displayed and the 'Cancel' button of a header dropdown is clicked.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onBatchCancel
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.type

	string
 - The type of dropdown. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'
      
			
      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 batchCancel event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('batchCancel', function (event) {
    const detail = event.detail,
        type = detail.type;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					changeCustomEvent
				
      
			
	
      This event is triggered, when the selection is changed. When you select with a drag, the event is triggered when the drag starts and ends. 
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onChange
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.started

	boolean
 - The flag is true, when the selection starts. The flag is false, when the selection ends and when the user changes the selection by dragging.
      
	
      ev.detail.finished

	boolean
 - The flag is true, when the selection ends. The flag is false, when the selection starts and when the user changes the selection by dragging.
      
	
      ev.detail.originalEvent

	Event
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
			
      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 change event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('change', function (event) {
    const detail = event.detail,
        started = detail.started,
        finished = detail.finished,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					columnClickCustomEvent
				
      
			
	
      This event is triggered, when the user clicks on the header of a column.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onColumnClick
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.column

	Smart.Grid.Column
 - The clicked column.
      
	
      ev.detail.dataField

	string
 - The column's data field.
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
			
      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 columnClick event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('columnClick', function (event) {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					columnDoubleClickCustomEvent
				
      
			
	
      This event is triggered, when the user double clicks on the header of a column.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onColumnDoubleClick
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.column

	Smart.Grid.Column
 - The double-clicked column.
      
	
      ev.detail.dataField

	string
 - The column's data field.
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
			
      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 columnDoubleClick event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('columnDoubleClick', function (event) {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					columnResizeCustomEvent
				
      
			
	
      This event is triggered, when the user resized a column.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onColumnResize
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.column

	Smart.Grid.Column
 - The resized column.
      
	
      ev.detail.dataField

	string
 - The column's data field.
      
	
      ev.detail.oldWidth

	string | number
 - The old width of the column.
      
	
      ev.detail.width

	string | number
 - The new width of the column.
      
			
      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 columnResize event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('columnResize', function (event) {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        oldWidth = detail.oldWidth,
        width = detail.width;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					columnDragStartCustomEvent
				
      
			
	
      This event is triggered, when the user starts a column drag.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onColumnDragStart
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.column

	Smart.Grid.Column
 - The column.
      
	
      ev.detail.dataField

	string
 - The column's data field.
      
	
      ev.detail.index

	number
 - The column's index
      
	
      ev.detail.originalEvent
 - The origianl Event object.
      
			
      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 columnDragStart event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('columnDragStart', function (event) {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        index = detail.index,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					columnChangeCustomEvent
				
      
			
	
      This event is triggered, when a column property is changed.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onColumnChange
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.column

	Smart.Grid.Column
 - The resized column.
      
	
      ev.detail.propertyName

	string
 - The changed property's name.
      
	
      ev.detail.oldValue

	string | number | string[]
 - The old value(s) of the column.
      
	
      ev.detail.value

	string | number | string[]
 - The new value(s) of the column.
      
			
      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 columnChange event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('columnChange', function (event) {
    const detail = event.detail,
        column = detail.column,
        propertyName = detail.propertyName,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					columnDraggingCustomEvent
				
      
			
	
      This event is triggered, when the user drags a column.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	Yes
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onColumnDragging
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.column

	Smart.Grid.Column
 - The column.
      
	
      ev.detail.dataField

	string
 - The column's data field.
      
	
      ev.detail.index

	number
 - The column's index
      
	
      ev.detail.data
 - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
      
	
      ev.detail.originalEvent
 - The origianl Event object.
      
			
      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 columnDragging event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('columnDragging', function (event) {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        index = detail.index,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					columnDragEndCustomEvent
				
      
			
	
      This event is triggered, when the user drops a column.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onColumnDragEnd
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.column

	Smart.Grid.Column
 - The column.
      
	
      ev.detail.dataField

	string
 - The column's data field.
      
	
      ev.detail.index

	number
 - The column's index
      
	
      ev.detail.newIndex

	number
 - The column's new index
      
	
      ev.detail.data
 - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
      
	
      ev.detail.originalEvent
 - The origianl Event object.
      
			
      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 columnDragEnd event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('columnDragEnd', function (event) {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					columnReorderCustomEvent
				
      
			
	
      This event is triggered, when the user reorders a column.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onColumnReorder
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.column

	Smart.Grid.Column
 - The column.
      
	
      ev.detail.dataField

	string
 - The column's data field.
      
	
      ev.detail.index

	number
 - The column's index
      
	
      ev.detail.newIndex

	number
 - The column's new index
      
	
      ev.detail.data
 - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
      
	
      ev.detail.originalEvent
 - The origianl Event object.
      
			
      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 columnReorder event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('columnReorder', function (event) {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					commentAddCustomEvent
				
      
			
	
      This event is triggered, when the user enters a comment in the row edit dialog.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onCommentAdd
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.id

	string | number
 - The row's id.
      
	
      ev.detail.comment

	object
 - The comment object. The comment object has 'text: string', 'id: string', 'userId: string | number', and 'time: date' fields. The 'text' is the comment's text. 'id' is the comment's unique id, 'userId' is the user's id who entered the comment and 'time' is a javascript date object.
      
			
      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 commentAdd event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('commentAdd', function (event) {
    const detail = event.detail,
        id = detail.id,
        comment = detail.comment;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					commentRemoveCustomEvent
				
      
			
	
      This event is triggered, when the user removes a comment in the row edit dialog.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onCommentRemove
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.id

	string | number
 - The row's id.
      
	
      ev.detail.comment

	object
 - The comment object. The comment object has 'text: string', 'id: string', 'userId: string | number', and 'time: date' fields. The 'text' is the comment's text. 'id' is the comment's unique id, 'userId' is the user's id who entered the comment and 'time' is a javascript date object.
      
			
      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 commentRemove event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('commentRemove', function (event) {
    const detail = event.detail,
        id = detail.id,
        comment = detail.comment;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					contextMenuItemClickCustomEvent
				
      
			
	
      This event is triggered, when the user clicks on a context menu item.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onContextMenuItemClick
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.id

	string
 - The row's id.
      
	
      ev.detail.dataField

	string
 - The column's data field.
      
	
      ev.detail.command

	object
 - Command function.
      
			
      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 contextMenuItemClick event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('contextMenuItemClick', function (event) {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        command = detail.command;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowDragStartCustomEvent
				
      
			
	
      This event is triggered, when the user starts a row drag.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowDragStart
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The row.
      
	
      ev.detail.id

	string | number
 - The row's id
      
	
      ev.detail.index

	number
 - The row's index
      
	
      ev.detail.originalEvent
 - The origianl Event object.
      
			
      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 rowDragStart event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowDragStart', function (event) {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        index = detail.index,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowDraggingCustomEvent
				
      
			
	
      This event is triggered, when the user drags a row.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	Yes
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowDragging
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The row.
      
	
      ev.detail.id

	string | number
 - The row's id
      
	
      ev.detail.index

	number
 - The row's index
      
	
      ev.detail.data
 - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
      
	
      ev.detail.originalEvent
 - The origianl Event object.
      
			
      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 rowDragging event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowDragging', function (event) {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        index = detail.index,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowDragEndCustomEvent
				
      
			
	
      This event is triggered, when the user drags a row.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowDragEnd
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The row.
      
	
      ev.detail.id

	string | number
 - The row's id
      
	
      ev.detail.index

	number
 - The row's index
      
	
      ev.detail.newIndex

	number
 - The row's new index
      
	
      ev.detail.data
 - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
      
	
      ev.detail.originalEvent
 - The origianl Event object.
      
			
      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 rowDragEnd event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowDragEnd', function (event) {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowReorderCustomEvent
				
      
			
	
      This event is triggered, when the user reorders a row.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowReorder
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The row.
      
	
      ev.detail.id

	string | number
 - The row's id
      
	
      ev.detail.index

	number
 - The row's index
      
	
      ev.detail.newIndex

	number
 - The row's new index
      
	
      ev.detail.data
 - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
      
	
      ev.detail.originalEvent
 - The origianl Event object.
      
			
      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 rowReorder event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowReorder', function (event) {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowExpandCustomEvent
				
      
			
	
      This event is triggered, when the user expands a row of the grid. The Grid is in TreeGrid/Grouping mode.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowExpand
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The expanded row.
      
	
      ev.detail.id

	string | number
 - The row's id
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
			
      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 rowExpand event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowExpand', function (event) {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowCollapseCustomEvent
				
      
			
	
      This event is triggered, when the user collapsed a row of the grid. The Grid is in TreeGrid/Grouping mode.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowCollapse
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The collapsed row. 
      
	
      ev.detail.id

	string | number
 - The row's id
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
			
      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 rowCollapse event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowCollapse', function (event) {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowClickCustomEvent
				
      
			
	
      This event is triggered, when the user clicks on a row of the grid.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowClick
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The clicked row.
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
	
      ev.detail.id

	string | number
 - Gets the row id.
      
	
      ev.detail.data

	object
 - Gets the row data.
      
	
      ev.detail.isRightClick

	boolean
 - Gets whether the pointing device's right button is clicked.
      
	
      ev.detail.pageX

	number
 - Gets the click's X position.
      
	
      ev.detail.pageY

	number
 - Gets the click's Y position.
      
			
      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 rowClick event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowClick', function (event) {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent,
        id = detail.id,
        data = detail.data,
        isRightClick = detail.isRightClick,
        pageX = detail.pageX,
        pageY = detail.pageY;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowDoubleClickCustomEvent
				
      
			
	
      This event is triggered, when the user double clicks on a row of the grid.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowDoubleClick
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The double-clicked row.
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
	
      ev.detail.id

	string | number
 - Gets the row id.
      
	
      ev.detail.data

	object
 - Gets the row data.
      
	
      ev.detail.isRightClick

	boolean
 - Gets whether the pointing device's right button is clicked.
      
	
      ev.detail.pageX

	number
 - Gets the click's X position.
      
	
      ev.detail.pageY

	number
 - Gets the click's Y position.
      
			
      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 rowDoubleClick event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowDoubleClick', function (event) {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent,
        id = detail.id,
        data = detail.data,
        isRightClick = detail.isRightClick,
        pageX = detail.pageX,
        pageY = detail.pageY;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowResizeCustomEvent
				
      
			
	
      This event is triggered, when the user resized a row.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowResize
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The resized row.
      
	
      ev.detail.id

	string | number
 - Gets the row id.
      
	
      ev.detail.oldHeight

	string | number
 - The old height of the row.
      
	
      ev.detail.height

	string | number
 - The new height of the row.
      
			
      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 rowResize event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowResize', function (event) {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        oldHeight = detail.oldHeight,
        height = detail.height;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowStarredCustomEvent
				
      
			
	
      This event is triggered, when the user clicks on the row header's star.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowStarred
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The clicked row.
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
	
      ev.detail.id

	string | number
 - Gets the row id.
      
	
      ev.detail.value

	boolean
 - Gets whether the row is starred or not.
      
			
      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 rowStarred event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowStarred', function (event) {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent,
        id = detail.id,
        value = detail.value;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					cellClickCustomEvent
				
      
			
	
      This event is triggered, when the user clicks on a cell of the grid.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onCellClick
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.cell

	Smart.Grid.Cell
 - The clicked cell.
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
	
      ev.detail.id

	string | number
 - Gets the row id.
      
	
      ev.detail.dataField

	string
 - Gets the column dataField.
      
	
      ev.detail.value

	object
 - Gets the cell value.
      
	
      ev.detail.isRightClick

	boolean
 - Gets whether the pointing device's right button is clicked.
      
	
      ev.detail.pageX

	number
 - Gets the click's X position.
      
	
      ev.detail.pageY

	number
 - Gets the click's Y position.
      
			
      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 cellClick event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('cellClick', function (event) {
    const detail = event.detail,
        cell = detail.cell,
        originalEvent = detail.originalEvent,
        id = detail.id,
        dataField = detail.dataField,
        value = detail.value,
        isRightClick = detail.isRightClick,
        pageX = detail.pageX,
        pageY = detail.pageY;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					cellDoubleClickCustomEvent
				
      
			
	
      This event is triggered, when the user double clicks on a cell of the grid.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onCellDoubleClick
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.cell

	Smart.Grid.Cell
 - The double-clicked cell. 
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
	
      ev.detail.id

	string | number
 - Gets the row id.
      
	
      ev.detail.dataField

	string
 - Gets the column dataField.
      
	
      ev.detail.value

	object
 - Gets the cell value.
      
	
      ev.detail.isRightClick

	boolean
 - Gets whether the pointing device's right button is clicked.
      
	
      ev.detail.pageX

	number
 - Gets the click's X position.
      
	
      ev.detail.pageY

	number
 - Gets the click's Y position.
      
			
      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 cellDoubleClick event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('cellDoubleClick', function (event) {
    const detail = event.detail,
        cell = detail.cell,
        originalEvent = detail.originalEvent,
        id = detail.id,
        dataField = detail.dataField,
        value = detail.value,
        isRightClick = detail.isRightClick,
        pageX = detail.pageX,
        pageY = detail.pageY;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					endEditCustomEvent
				
      
			
	
      This event is triggered, when the edit ends.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onEndEdit
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.id

	string | number
 - The edited row id.
      
	
      ev.detail.dataField

	string
 - The edited column data field.
      
	
      ev.detail.row

	Smart.Grid.Row
 - The edited row.
      
	
      ev.detail.column

	Smart.Grid.Column
 - The edited column.
      
	
      ev.detail.cell

	Smart.Grid.Cell
 - The edited cell.
      
	
      ev.detail.data

	object
 - The edited row's data.
      
	
      ev.detail.value

	object
 - The edited cell's value.
      
			
      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 endEdit event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('endEdit', function (event) {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        column = detail.column,
        cell = detail.cell,
        data = detail.data,
        value = detail.value;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					filterCustomEvent
				
      
			
	
      This event is triggered, when a filter is added or removed.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onFilter
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.columns

	Smart.Grid.Column[]
 - Array of columns.
      
	
      ev.detail.data
 - Array of {dataField: string, filter: object}. dataField is the column's data field. filter is a FilterGroup object.
      
	
      ev.detail.expressions
 - Array of {dataField: string, filter: string}. dataField is the column's data field. filter is a filter expression like 'startsWith B'. In each array item, you will have an object with column's name and filter string. Example: [['firstName', 'contains Andrew or contains Nancy'], ['quantity', '<= 3 and >= 8']], [['firstName', 'EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']], [['lastName','CONTAINS' 'burke' or 'CONTAINS' 'peterson']]. Filter conditions used in the filter expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
      
			
      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 grid = document.querySelector('smart-grid');
grid.addEventListener('filter', function (event) {
    const detail = event.detail,
        columns = detail.columns,
        data = detail.data,
        expressions = detail.expressions;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					groupCustomEvent
				
      
			
	
      This event is triggered, when the rows grouping is changed.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onGroup
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.groups

	[]
 - Array of column data fields.
      
			
      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 group event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('group', function (event) {
    const detail = event.detail,
        groups = detail.groups;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					openColumnDialogCustomEvent
				
      
			
	
      This event is triggered, when the add new column dialog is opened.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onOpenColumnDialog
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.dataField

	string
 - The column data field.
      
			
      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 openColumnDialog event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('openColumnDialog', function (event) {
    const detail = event.detail,
        dataField = detail.dataField;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					closeColumnDialogCustomEvent
				
      
			
	
      This event is triggered, when the add new column dialog is closed.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onCloseColumnDialog
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.dataField

	string
 - The column data field.
      
			
      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 closeColumnDialog event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('closeColumnDialog', function (event) {
    const detail = event.detail,
        dataField = detail.dataField;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					resizeCustomEvent
				
      
			
	
      This event is triggered, when the grid is resized.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onResize
        • 


      
	
      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 resize event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('resize', function (event) {
	// event handling code goes here.
})

      
				
      
	
      
				
      
					rowTapCustomEvent
				
      
			
	
      This event is triggered when the user touches and holds on the row for at least 300ms.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onRowTap
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.row

	Smart.Grid.Row
 - The tapped row.
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
			
      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 rowTap event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('rowTap', function (event) {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					cellTapCustomEvent
				
      
			
	
      This event is triggered when the user touches and holds on the cell for at least 300ms.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onCellTap
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.cell

	Smart.Grid.Cell
 - The tapped row.
      
	
      ev.detail.originalEvent
 - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
      
			
      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 cellTap event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('cellTap', function (event) {
    const detail = event.detail,
        cell = detail.cell,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					pageCustomEvent
				
      
			
	
      This event is triggered, when the user changes the pages.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onPage
        • 


      
	
      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 page event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('page', function (event) {
	// event handling code goes here.
})

      
				
      
	
      
				
      
					sortCustomEvent
				
      
			
	
      This event is triggered, when a sorting column is added or removed.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onSort
        • 


      
	
      Arguments
      
	
      evCustomEvent
      
	
      ev.detailObject
      
	
      ev.detail.columns

	Smart.Grid.Column[]
 - Array of columns.
      
	
      ev.detail.data
 - Array of {dataField: string, sortOrder: string, sortIndex: number}. dataField is the column's data field. sortOrder is 'asc' or 'desc', sortIndex is the index of the column in multi column sorting.
      
	
      ev.detail.sortDataFields

	string[]
 - Array of column data fields.
      
	
      ev.detail.sortDataTypes

	string[]
 - Array of column data types. The values in the array would be 'string', 'date', 'boolean' or 'number'.
      
	
      ev.detail.sortOrders

	string[]
 - Array of column orders. The values in the array would be 'asc' or 'desc'.
      
	
      ev.detail.sortIndexes

	int[]
 - Array of column sort indexes. When multiple sorting is applied the sort index is an important parameter as it specifies the priority of sorting.
      
			
      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 grid = document.querySelector('smart-grid');
grid.addEventListener('sort', function (event) {
    const detail = event.detail,
        columns = detail.columns,
        data = detail.data,
        sortDataFields = detail.sortDataFields,
        sortDataTypes = detail.sortDataTypes,
        sortOrders = detail.sortOrders,
        sortIndexes = detail.sortIndexes;

	// event handling code goes here.
})

      
				
      
	
      
				
      
					scrollBottomReachedCustomEvent
				
      
			
	
      This event is triggered, when the user reaches the bottom of the grid.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onScrollBottomReached
        • 


      
	
      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 scrollBottomReached event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
})

      
				
      
	
      
				
      
					scrollTopReachedCustomEvent
				
      
			
	
      This event is triggered, when the user reaches the top of the grid.
      

        

      • Bubbles	Yes
        • 

      • Cancelable	No
        • 

      • Interface	CustomEvent
        • 

      • Event handler property onScrollTopReached
        • 


      
	
      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 scrollTopReached event.
				
      
				
      
			
					
      const grid = document.querySelector('smart-grid');
grid.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
})

      
				
      
	
      
	
      Methods
      

	
      addRow(	data: any, 	insertAtBottom?: boolean, 	callback?: {(row: GridRow): void}): void
      
	
      Adds a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
      	
      Arguments
      	
      dataany
      row data matching the data source
      	
      insertAtBottom?boolean
      Determines whether to add the new row to the bottom or top of the collection. The default value is 'true'
      	
      callback?{(row: GridRow): void}
      Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
      	
      
			
      Invoke the addRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.addRow({"firstName":"Nancy","lastName":"Johnes","age":32});
      


      
	
      addNewRow(	position?: string): boolean
      
	
      Adds a new row and puts it into edit mode. When batch editing is enabled, the row is not saved until the batch edit is saved.
      	
      Arguments
      	
      position?string
      'near' or 'far'
      	
      Returnsboolean
      
			
      Invoke the addNewRow method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.addNewRow();
      


      
	
      addNewColumn(	column: any): boolean
      
	
      Adds a new column.
      	
      Arguments
      	
      columnany
      A Grid column object. See 'columns' property.
      	
      Returnsboolean
      
			
      Invoke the addNewColumn method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.addNewColumn({"label":"First Name","dataField":"firstName"});
      


      
	
      addUnboundRow(	count: number, 	position?: string): boolean
      
	
      Adds a new unbound row to the top or bottom. Unbound rows are not part of the Grid's dataSource. They become part of the dataSource, after an unbound row is edited.
      	
      Arguments
      	
      countnumber
      The count of unbound rows.
      	
      position?string
      'near' or 'far'
      	
      Returnsboolean
      
			
      Invoke the addUnboundRow method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.addUnboundRow(5);
      


      
	
      addFilter(	dataField: string, 	filter: string, 	refreshFilters?: boolean): void
      
	
      Adds a filter to a column. This method will apply a filter to the Grid data. Example for adding multiple filters to a column: grid.addFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"']). Example for adding single filter to a column: grid.addFilter('lastName', 'CONTAINS "burke"'). Example for adding numeric filter:  grid.addFilter('quantity', '<= 5')
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      filterstring
      Filter expression like: 'startsWith B'. Example 2: ['contains Andrew or contains Nancy'], Example 3:  ['quantity', '<= 3 and >= 8'].  Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
      	
      refreshFilters?boolean
      Set this to false, if you will use multiple 'addFilter' calls. By doing this, you will avoid unnecessary renders.
      	
      
			
      Invoke the addFilter method.
      
			
      const grid = document.querySelector('smart-grid');
grid.addFilter("firstName","startsWith B");
      


      
	
      addGroup(	dataField: string): void
      
	
      Groups the Grid by a data field. This method will add a group to the Grid when grouping is enabled.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      
			
      Invoke the addGroup method.
      
			
      const grid = document.querySelector('smart-grid');
grid.addGroup("firstName");
      


      
	
      addSort(	dataField: string, 	sortOrder: string): void
      
	
      Sorts the Grid by a data field. This method will add a sorting to the Grid when sorting is enabled.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      sortOrderstring
      column's sort order. Use 'asc' or 'desc'.
      	
      
			
      Invoke the addSort method.
      
			
      const grid = document.querySelector('smart-grid');
grid.addSort("firstName","desc");
      


      
	
      autoSizeRows(): void
      
	
      Auto-sizes grid rows. This method will update the height of all Grid rows.
      	
      
			
      Invoke the autoSizeRows method.
      
			
      const grid = document.querySelector('smart-grid');
grid.autoSizeRows();
      


      
	
      autoSizeColumns(): void
      
	
      Auto-sizes grid columns. This method will update the width of all Grid columns.
      	
      
			
      Invoke the autoSizeColumns method.
      
			
      const grid = document.querySelector('smart-grid');
grid.autoSizeColumns();
      


      
	
      autoSizeColumn(	dataField?: string): void
      
	
      Auto-sizes grid column. This method will update the width of a Grid column by measuring the cells and column header label width.
      	
      Arguments
      	
      dataField?string
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      
			
      Invoke the autoSizeColumn method.
      
			
      const grid = document.querySelector('smart-grid');
grid.autoSizeColumn("firstName");
      


      
	
      areAllRowsSelected(): boolean
      
	
      This method returns true, if all rows in the Grid are selected.
      	
      Returnsboolean
      
			
      Invoke the areAllRowsSelected method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.areAllRowsSelected();
      


      
	
      beginUpdate(): void
      
	
      Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
      	
      
			
      Invoke the beginUpdate method.
      
			
      const grid = document.querySelector('smart-grid');
grid.beginUpdate();
      


      
	
      beginEdit(	rowId: string | number, 	dataField?: string): void
      
	
      Begins row, cell or column. This method allows you to programmatically start a cell, row or column editing. After calling it, an editor HTMLElement will be created and displayed in the Grid.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataField?string
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      
			
      Invoke the beginEdit method.
      
			
      const grid = document.querySelector('smart-grid');
grid.beginEdit(1,"firstName");
      


      
	
      clearFilter(): void
      
	
      Clears all filters. Refreshes the view and updates all filter input components.
      	
      
			
      Invoke the clearFilter method.
      
			
      const grid = document.querySelector('smart-grid');
grid.clearFilter();
      


      
	
      clearGroups(): void
      
	
      Clears all data groups. Refreshes the view and updates the DataGrid component.
      	
      
			
      Invoke the clearGroups method.
      
			
      const grid = document.querySelector('smart-grid');
grid.clearGroups();
      


      
	
      clearSort(): void
      
	
      Clears all sorting. Refreshes the view and updates the DataGrid component.
      	
      
			
      Invoke the clearSort method.
      
			
      const grid = document.querySelector('smart-grid');
grid.clearSort();
      


      
	
      clearSelection(): void
      
	
      Clears the selection that user have made. All row, cell and column selection highlights will be removed.
      	
      
			
      Invoke the clearSelection method.
      
			
      const grid = document.querySelector('smart-grid');
grid.clearSelection();
      


      
	
      cancelEdit(): void
      
	
      Cancels the editing. This method closes the cell editor and cancels the changes.
      	
      
			
      Invoke the cancelEdit method.
      
			
      const grid = document.querySelector('smart-grid');
grid.cancelEdit();
      


      
	
      checkRow(	rowId: string | number): void
      
	
      Checks a TreeGrid row. This method updates the row's check-box.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      
			
      Invoke the checkRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.checkRow(1);
      


      
	
      checkAllRows(): void
      
	
      Checks all TreeGrid or Grouping rows. This method updates all check-boxes in the TreeGrid or Grouping rows.
      	
      
			
      Invoke the checkAllRows method.
      
			
      const grid = document.querySelector('smart-grid');
grid.checkAllRows();
      


      
	
      clearRows(): void
      
	
      Clears the user selection and empties the data source. The Grid will display 'No Rows' in the view.
      	
      
			
      Invoke the clearRows method.
      
			
      const grid = document.querySelector('smart-grid');
grid.clearRows();
      


      
	
      closeMenu(): void
      
	
      Closes the column drop-down menu.
      	
      
			
      Invoke the closeMenu method.
      
			
      const grid = document.querySelector('smart-grid');
grid.closeMenu();
      


      
	
      collapseRow(	rowId: string | number): void
      
	
      Collapses a TreeGrid or Grouping row.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      
			
      Invoke the collapseRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.collapseRow(1);
      


      
	
      collapseAllRows(): void
      
	
      Collapses all TreeGrid or Grouping rows.
      	
      
			
      Invoke the collapseAllRows method.
      
			
      const grid = document.querySelector('smart-grid');
grid.collapseAllRows();
      


      
	
      createChart(	type: string, 	dataSource?: any): void
      
	
      Creates a Chart, when charting is enabled.
      	
      Arguments
      	
      typestring
      Chart's type
      	
      dataSource?any
      Chart's data source
      	
      
			
      Invoke the createChart method.
      
			
      const grid = document.querySelector('smart-grid');
grid.createChart("pie");
      


      
	
      deleteRow(	rowId: string | number, 	callback?: {(row: GridRow): void}): void
      
	
      Delete a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      callback?{(row: GridRow): void}
      Sets a callback function, which is called after the row is deleted. The callback's argument is the deleted row.
      	
      
			
      Invoke the deleteRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.deleteRow(1);
      


      
	
      ensureVisible(	rowId: string | number, 	dataField?: string): boolean
      
	
      Scrolls to a row or cell. This method scrolls to a row or cell, when scrolling is necessary. If pagination is enabled, it will automatically change the page.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataField?string
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      Returnsboolean
      
			
      Invoke the ensureVisible method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.ensureVisible(1,"firstName");
      


      
	
      endEdit(): void
      
	
      Ends the editing. This method confirms all changes and closes the opened cell editor(s).
      	
      
			
      Invoke the endEdit method.
      
			
      const grid = document.querySelector('smart-grid');
grid.endEdit();
      


      
	
      endUpdate(	refresh?: boolean): void
      
	
      Ends the update operation. This method will resume the rendering and will refresh the Grid.
      	
      Arguments
      	
      refresh?boolean
      The flag that control the calls of the refresh method.
      	
      
			
      Invoke the endUpdate method.
      
			
      const grid = document.querySelector('smart-grid');
grid.endUpdate();
      


      
	
      expandRow(	rowId: string | number): void
      
	
      Expands a TreeGrid or Grouping row. For example, if you want to expand the first group, then its second sub grup, then the first sub sub group, you can use: grid.expandRow('0.1.0');
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      
			
      Invoke the expandRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.expandRow(1);
      


      
	
      expandRowsToGroupLevel(	level: number): void
      
	
      Expands rows to a given group level. For example 'grid.expandRowsToGroupLevel(1);' means that all groups at the root level will be expanded.
      	
      Arguments
      	
      levelnumber
      row group level
      	
      
			
      Invoke the expandRowsToGroupLevel method.
      
			
      const grid = document.querySelector('smart-grid');
grid.expandRowsToGroupLevel(1);
      


      
	
      expandAllRows(): void
      
	
      Expands all TreeGrid or Grouping rows.
      	
      
			
      Invoke the expandAllRows method.
      
			
      const grid = document.querySelector('smart-grid');
grid.expandAllRows();
      


      
	
      exportData(	Dataformat: string, 	callback?: any, 	dataCallback?: any): void
      
	
      Exports the Grid data to .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG or .PNG. The method uses the options of the dataExport property.
      	
      Arguments
      	
      Dataformatstring
      'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.
      	
      callback?any
      A callback that allows to format the exported data based on a condition. For additional details, refer to the Smart Export Documentation.
      	
      dataCallback?any
      A callback that allows to change the exported data.
      	
      
			
      Invoke the exportData method.
      
			
      const grid = document.querySelector('smart-grid');
grid.exportData("pdf");
      


      							Try a demo showcasing the exportData method.


      
	
      find(	query: string, 	dataField?: string, 	condition?: string): []
      
	
      Finds entries by using a query and returns an array of row ids. Example: const rows = grid.find('nancy'); returns all rows that have 'nancy' value. Example 2: const rows = grid.find('nancy, davolio'); returns all rows that have 'nancy' and 'davolio' values in the same row. Example 3: const rows = grid.find(5, 'quantity', '>'); returns all rows where the value of the 'quantity' field is > 5. 
      	
      Arguments
      	
      querystring
      Search query
      	
      dataField?string
      Column data field.
      	
      condition?string
      Conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
      	
      Returns[]
      
			
      Invoke the find method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.find("nancy","davolio");
      


      
	
      findCells(	query: string): []
      
	
      Finds entries by using a query and returns an array of cells. Each cell in the array is also an array in this format: [id, dataField, value]. Example: const cells = grid.findCells('nancy'); returns all cells that have 'nancy' value. Example 2: const cells = grid.findCells('nancy, davolio'); returns all cells that have 'nancy' and 'davolio' values.
      	
      Arguments
      	
      querystring
      Search query. You can enter multiple search strings, by using ','. Example: 'nancy, davolio'
      	
      Returns[]
      
			
      Invoke the findCells method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.findCells("nancy","davolio");
      


      
	
      filterBy(	query: string, 	dataType?: string): void
      
	
      Filter by all columns. This method works like a global filter and applies a filter to all grid columns.
      	
      Arguments
      	
      querystring
      Filter query to filter by.
      	
      dataType?string
      Optionally filter by a specific data type like 'string', 'boolean', 'date', 'number'.
      	
      
			
      Invoke the filterBy method.
      
			
      const grid = document.querySelector('smart-grid');
grid.filterBy("firstName","startsWith B");
      


      
	
      goToPage(	index: number): void
      
	
      Navigates to a page, when paging is enabled.
      	
      Arguments
      	
      indexnumber
      page index
      	
      
			
      Invoke the goToPage method.
      
			
      const grid = document.querySelector('smart-grid');
grid.goToPage(1);
      


      
	
      nextPage(): void
      
	
      Navigates to the next page, when grid paging is enabled.
      	
      
			
      Invoke the nextPage method.
      
			
      const grid = document.querySelector('smart-grid');
grid.nextPage();
      


      
	
      prevPage(): void
      
	
      Navigates to the prev page, when grid paging is enabled.
      	
      
			
      Invoke the prevPage method.
      
			
      const grid = document.querySelector('smart-grid');
grid.prevPage();
      


      
	
      firstPage(): void
      
	
      Navigates to the first page, when grid paging is enabled.
      	
      
			
      Invoke the firstPage method.
      
			
      const grid = document.querySelector('smart-grid');
grid.firstPage();
      


      
	
      lastPage(): void
      
	
      Navigates to the last page, when grid paging is enabled.
      	
      
			
      Invoke the lastPage method.
      
			
      const grid = document.querySelector('smart-grid');
grid.lastPage();
      


      
	
      focusAndSelect(	rowId: string | number, 	dataField?: string): void
      
	
      Focuses and selects a cell or row. The keyboard navigation starts from the focused cell or row. Any previously applied selection will be cleared after calling this method.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataField?string
      column bound data field
      	
      
			
      Invoke the focusAndSelect method.
      
			
      const grid = document.querySelector('smart-grid');
grid.focusAndSelect(1,"firstName");
      


      
	
      forEachRow(	rowCallback: any): void
      
	
      Iterates through each row in the grid and calls the callback for each row. This is similar to the forEach method on a JavaScript array. This is called for each row, ignoring grouping, filtering or sorting applied in the Grid.
      	
      Arguments
      	
      rowCallbackany
      Callback function with a row object as parameter. Example: grid.forEachRow((row) => { console.log(row.id) });
      	
      
			
      Invoke the forEachRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.forEachRow((row) => { console.log(row.id) );
      


      
	
      forEachRowAfterFilterAndSort(	rowCallback: any): void
      
	
      Similar to forEachRow. Iterates through each row in the grid and calls the callback for each row. This method takes into account filtering and sorting applied to the Grid.
      	
      Arguments
      	
      rowCallbackany
      Callback function with a row object as parameter. Example: grid.forEachRow((row) => { console.log(row.id) });
      	
      
			
      Invoke the forEachRowAfterFilterAndSort method.
      
			
      const grid = document.querySelector('smart-grid');
grid.forEachRowAfterFilterAndSort((row) => { console.log(row.id) );
      


      
	
      getVerticalScrollMax(): number
      
	
      Gets the maximum position of the vertical scrollbar. You can use this method in combination with the setVerticalScrollValue to apply a new scroll position.
      	
      Returnsnumber
      
			
      Invoke the getVerticalScrollMax method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getVerticalScrollMax();
      


      
	
      getVerticalScrollValue(): number
      
	
      Gets the position of the vertical scrollbar.
      	
      Returnsnumber
      
			
      Invoke the getVerticalScrollValue method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getVerticalScrollValue();
      


      
	
      getHorizontalScrollMax(): number
      
	
      Gets the maximum position of the horizontal scrollbar. You can use this method in combination with the setHorizontalScrollValue to apply a new scroll position.
      	
      Returnsnumber
      
			
      Invoke the getHorizontalScrollMax method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getHorizontalScrollMax();
      


      
	
      getHorizontalScrollValue(): number
      
	
      Gets the position of the horizontal scrollbar.
      	
      Returnsnumber
      
			
      Invoke the getHorizontalScrollValue method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getHorizontalScrollValue();
      


      
	
      getColumns(): Smart.Grid.Column[]
      
	
      Gets the columns array. Each item in the array contains the column properties which are dynamically set by the user interaction and the columns initialization data properties such as: 'label', 'dataField', 'dataType', 'visible'.
      	
      ReturnsSmart.Grid.Column[]
      
			
      Invoke the getColumns method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getColumns();
      


      
	
      getEditCells(): []
      
	
      Gets the editing cell(s), when the grid is editing.
      	
      Returns[]
      
			
      Invoke the getEditCells method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getEditCells();
      


      
	
      getGroups(): []
      
	
      Gets the groups array.
      	
      Returns[]
      
			
      Invoke the getGroups method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getGroups();
      


      
	
      getSortedColumns(): {[dataField: string]: { sortOrder: string, sortIndex: number }}
      
	
      Gets an array of columns with applied sorting. Each member in the array is with column's data field used as a key and 'sortOrder' and 'sortIndex' as a value.
      	
      Returns{[dataField: string]: { sortOrder: string, sortIndex: number }}
      
			
      Invoke the getSortedColumns method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getSortedColumns();
      


      
	
      getSelection(): { rows: Smart.Grid.Row[], columns: Smart.Grid.Column[], cells: Smart.Grid.Cell[], focused: {id: string, dataField: string} }
      
	
      Gets the selection.
      	
      Returns{ rows: Smart.Grid.Row[], columns: Smart.Grid.Column[], cells: Smart.Grid.Cell[], focused: {id: string, dataField: string} }
      
			
      Invoke the getSelection method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getSelection();
      


      
	
      getSelectedRows(): []
      
	
      Gets an Array where each item is an Array of row id and row data. If the Grid is used in virtual mode, the row data parameter is empty object, because the data is loaded on demand.
      	
      Returns[]
      
			
      Invoke the getSelectedRows method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getSelectedRows();
      


      
	
      getSelectedRowsData(): []
      
	
      Gets an Array where each item contains the row data.
      	
      Returns[]
      
			
      Invoke the getSelectedRowsData method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getSelectedRowsData();
      


      
	
      getSelectedRowIds(): []
      
	
      Gets the selected row ids.
      	
      Returns[]
      
			
      Invoke the getSelectedRowIds method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getSelectedRowIds();
      


      
	
      getSelectedRowIndexes(): []
      
	
      Gets the selected row indexes.
      	
      Returns[]
      
			
      Invoke the getSelectedRowIndexes method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getSelectedRowIndexes();
      


      
	
      getSelectedCells(): []
      
	
      Gets the selected cells. The method returns an array of cell. Each cell is an array with row id, column data field and cell value.
      	
      Returns[]
      
			
      Invoke the getSelectedCells method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getSelectedCells();
      


      
	
      getFilteredColumns(): {[dataField: string]: Smart.Grid.Column}[]
      
	
      Gets an array of columns with applied filters.
      	
      Returns{[dataField: string]: Smart.Grid.Column}[]
      
			
      Invoke the getFilteredColumns method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getFilteredColumns();
      


      
	
      getVisibleRows(): Smart.Grid.Row[]
      
	
      Gets an array of rows, which are visible and match the applied filter.
      	
      ReturnsSmart.Grid.Row[]
      
			
      Invoke the getVisibleRows method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getVisibleRows();
      


      
	
      getViewRows(): Smart.Grid.Row[]
      
	
      Gets the result of the getVisibleRows or the rows hierarchy, when the Grid is in TreeGrid/Grouping mode.
      	
      ReturnsSmart.Grid.Row[]
      
			
      Invoke the getViewRows method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getViewRows();
      


      
	
      getState(): {sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}
      
	
      Gets a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
      	
      Returns{sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}
      
			
      Invoke the getState method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getState();
      


      
	
      getBatchEditChanges(): { updated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }
      
	
      Gets the changes from the batch edit.
      	
      Returns{ updated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }
      
			
      Invoke the getBatchEditChanges method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getBatchEditChanges();
      


      
	
      getCellValue(	rowId: string | number, 	dataField: string): any
      
	
      Gets a value of a cell.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      Returnsany
      
			
      Invoke the getCellValue method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getCellValue(1,"firstName");
      


      
	
      getColumn(	dataField: string): GridColumn
      
	
      Gets a column. Returns a Grid column object.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      ReturnsGridColumn
      
			
      Invoke the getColumn method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getColumn("firstName");
      


      
	
      getColumnProperty(	dataField: string, 	propertyName: string): any
      
	
      Gets a value of a column.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      propertyNamestring
      The property name.
      	
      Returnsany
      
			
      Invoke the getColumnProperty method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getColumnProperty(1,"freeze");
      


      
	
      getRowProperty(	rowId: string | number, 	propertyName: string): any
      
	
      Gets a value of a row.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      propertyNamestring
      The property name.
      	
      Returnsany
      
			
      Invoke the getRowProperty method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getRowProperty(1,"freeze");
      


      
	
      getRow(	rowId: string | number): GridRow
      
	
      Gets a row. Returns a Grid row object.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      ReturnsGridRow
      
			
      Invoke the getRow method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getRow(1);
      


      
	
      getRowByIndex(	rowIndex: number): GridRow
      
	
      Gets a row by its index. Returns a Grid row object.
      	
      Arguments
      	
      rowIndexnumber
      row bound index
      	
      ReturnsGridRow
      
			
      Invoke the getRowByIndex method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getRowByIndex(1);
      


      
	
      getRowData(	rowId: string | number): any
      
	
      Gets the Data source data associated to the row.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      Returnsany
      
			
      Invoke the getRowData method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getRowData(1);
      


      
	
      getRowId(	rowIndex: number): string | number
      
	
      Gets the Row's id by a row index.
      	
      Arguments
      	
      rowIndexnumber
      row index
      	
      Returnsstring | number
      
			
      Invoke the getRowId method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.getRowId(1);
      


      
	
      hasMenu(): boolean
      
	
      Gets whether a column's drop-down menu is opened.
      	
      Returnsboolean
      
			
      Invoke the hasMenu method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.hasMenu();
      


      
	
      hasSelectedRows(): boolean
      
	
      This method returns true, if any rows in the Grid are selected.
      	
      Returnsboolean
      
			
      Invoke the hasSelectedRows method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.hasSelectedRows();
      


      
	
      hideDetail(	rowId: string | number): void
      
	
      Hides the Details of a Row, when row details are enabled.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      
			
      Invoke the hideDetail method.
      
			
      const grid = document.querySelector('smart-grid');
grid.hideDetail(1);
      


      
	
      highlightColumn(	dataField: string): void
      
	
      Highlights a column. Highlights a Grid column.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      
			
      Invoke the highlightColumn method.
      
			
      const grid = document.querySelector('smart-grid');
grid.highlightColumn("firstName");
      


      
	
      highlightCell(	rowId: string | number, 	dataField: string, 	className?: string): void
      
	
      Highlights a cell. Calling the method a second time toggle the highlight state.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      className?string
      CSS Class Name
      	
      
			
      Invoke the highlightCell method.
      
			
      const grid = document.querySelector('smart-grid');
grid.highlightCell(1,"firstName","cssClass");
      


      
	
      highlightRow(	rowId: string | number, 	className?: string): void
      
	
      Highlights a row. Calling the method a second time toggle the highlight state.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      className?string
      CSS Class Name
      	
      
			
      Invoke the highlightRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.highlightRow(1,"cssClass");
      


      
	
      insertRow(	data: any, 	index?: number, 	callback?: {(row: GridRow): void}): void
      
	
      Inserts a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
      	
      Arguments
      	
      dataany
      row data matching the data source
      	
      index?number
      Determines the insert index. The default value is the last index.
      	
      callback?{(row: GridRow): void}
      Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
      	
      
			
      Invoke the insertRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.insertRow({"firstName":"My Name"},1);
      


      
	
      loadState(	state: any): {sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}
      
	
      Loads a previously saved Grid state. You can pass a state name when there is a state which was previously saved with the saveState(stateName) method call or a state object returned by the saveState or getState method calls. The state object is required to be a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
      	
      Arguments
      	
      stateany
      state name or state object
      	
      Returns{sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}
      
			
      Invoke the loadState method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.loadState();
      


      
	
      openMenu(	dataField: string): void
      
	
      Opens a column drop-down menu.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      
			
      Invoke the openMenu method.
      
			
      const grid = document.querySelector('smart-grid');
grid.openMenu("firstName");
      


      
	
      openContextMenu(	left: number, 	top: number): void
      
	
      Opens a context menu. Note that context menu should be enabled.
      	
      Arguments
      	
      leftnumber
      Left Position.
      	
      topnumber
      Top Position.
      	
      
			
      Invoke the openContextMenu method.
      
			
      const grid = document.querySelector('smart-grid');
grid.openContextMenu(10,10);
      


      
	
      openDropDown(): void
      
	
      Opens the Grid when the 'dropDownMode' property is true.
      	
      
			
      Invoke the openDropDown method.
      
			
      const grid = document.querySelector('smart-grid');
grid.openDropDown();
      


      
	
      closeDropDown(): void
      
	
      Closes the Grid when the 'dropDownMode' property is true.
      	
      
			
      Invoke the closeDropDown method.
      
			
      const grid = document.querySelector('smart-grid');
grid.closeDropDown();
      


      
	
      print(): void
      
	
      Prints the Grid data. The method uses the options of the dataExport property. When printed, the Grid will not display any scrollbars so all rows and columns will be displayed. The grid will auto resize width and height to fit all contents. To customize the printing options, you can use  the dataExport property.
      	
      
			
      Invoke the print method.
      
			
      const grid = document.querySelector('smart-grid');
grid.print();
      


      
	
      render(): void
      
	
      Renders the grid. This method will make a full-refresh like in the initial Grid creation. It will create Rows, Columns and Cells HTML Elements and then refresh the Grid layout.
      	
      
			
      Invoke the render method.
      
			
      const grid = document.querySelector('smart-grid');
grid.render();
      


      
	
      refresh(): void
      
	
      Refreshes the grid with the current property values. This method will refresh the Grid layout.
      	
      
			
      Invoke the refresh method.
      
			
      const grid = document.querySelector('smart-grid');
grid.refresh();
      


      
	
      refreshView(): void
      
	
      Refreshes the grid cells in view. The method is useful for live-updates of cell values.
      	
      
			
      Invoke the refreshView method.
      
			
      const grid = document.querySelector('smart-grid');
grid.refreshView();
      


      
	
      resetState(): void
      
	
      Resets the Grid state.
      	
      
			
      Invoke the resetState method.
      
			
      const grid = document.querySelector('smart-grid');
grid.resetState();
      


      
	
      removeFilter(	dataField: string, 	refreshFilters?: boolean): void
      
	
      Removes a column filter. 
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      refreshFilters?boolean
      Set this to false, if you need to make multiple removeFilter calls.
      	
      
			
      Invoke the removeFilter method.
      
			
      const grid = document.querySelector('smart-grid');
grid.removeFilter("firstName");
      


      
	
      removeGroup(	dataField: string): void
      
	
      Removes a group by data field. This method will remove a group to the Grid when grouping is enabled.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      
			
      Invoke the removeGroup method.
      
			
      const grid = document.querySelector('smart-grid');
grid.removeGroup("firstName");
      


      
	
      removeSort(	dataField: string): void
      
	
      Removes a sorting by data field. This method will remove a sorting from a Grid column.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      
			
      Invoke the removeSort method.
      
			
      const grid = document.querySelector('smart-grid');
grid.removeSort("firstName");
      


      
	
      refreshSort(): void
      
	
      Re-sorts the Grid by using the already applied column sortings and re-renders the Grid.
      	
      
			
      Invoke the refreshSort method.
      
			
      const grid = document.querySelector('smart-grid');
grid.refreshSort();
      


      
	
      revertBatchEdit(): void
      
	
      Reverts the batch edit changes. This method cancels all changes made by the end-user.
      	
      
			
      Invoke the revertBatchEdit method.
      
			
      const grid = document.querySelector('smart-grid');
grid.revertBatchEdit();
      


      
	
      reorderColumns(	dataField: string | number, 	referenceDataField: string | number, 	insertAfter?: boolean): void
      
	
      Reorders two DataGrid columns.
      	
      Arguments
      	
      dataFieldstring | number
      The data field or column index of the first grid column.
      	
      referenceDataFieldstring | number
      The data field or column index of the second grid column.
      	
      insertAfter?boolean
      Determines whether to insert the first column after the reference column.
      	
      
			
      Invoke the reorderColumns method.
      
			
      const grid = document.querySelector('smart-grid');
grid.reorderColumns("firstName","productName");
      


      
	
      saveState(	name?: string): {sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}
      
	
      Saves the Grid state and returns a JSON object with the following fields: 'sort', 'columns', 'expandedRows', 'filter', 'groups', 'paging', 'selectedCells', 'selectedrows'. The 'sort' represents an object which contains the sorted columns. Each key in that json object is the column's dataField item which has sortOrder: string and sortIndex: int properties. The sortOrder could be either 'asc' or 'desc'. Similarly, the filter object contains the filtered columns. Each key in that object is a column data field and each value has 'filters' array property with the applied filters to the column. The 'columns' property contains an array of columns with saved properties such as visible, width and freeze. The 'expandedRows' property contains the indexes of the expanded rows. The 'groups' property contains the grouped column data fields and the selectedCells and selectedRows include information about the cells or rows selection. These depend on the selection mode used in the Grid. The 'paging' object includes the sub-properties 'count', 'index' and 'size' which determine the count of pages, the current page's index and the page size.
      	
      Arguments
      	
      name?string
      state name
      	
      Returns{sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}
      
			
      Invoke the saveState method.
      
			
      const grid = document.querySelector('smart-grid');
const result = grid.saveState();
      


      
	
      sortBy(	dataField: string, 	sortOrder: string | null): void
      
	
      Sorts the Grid by a data field. This method will add or remove sorting, when sorting is enabled. To remove the sorting, use 'null' for the sortOrder parameter.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      sortOrderstring | null
      column's sort order. Use 'asc', 'desc' or null.
      	
      
			
      Invoke the sortBy method.
      
			
      const grid = document.querySelector('smart-grid');
grid.sortBy("firstName","asc");
      


      
	
      swapColumns(	dataField: string | number, 	referenceDataField: string | number): void
      
	
      Swaps two DataGrid columns.
      	
      Arguments
      	
      dataFieldstring | number
      The data field or column index of the first grid column.
      	
      referenceDataFieldstring | number
      The data field or column index of the second grid column.
      	
      
			
      Invoke the swapColumns method.
      
			
      const grid = document.querySelector('smart-grid');
grid.swapColumns("firstName","productName");
      


      
	
      saveBatchEdit(): void
      
	
      Saves the batch edit changes. This method confirms the editing changes made by the end-user.
      	
      
			
      Invoke the saveBatchEdit method.
      
			
      const grid = document.querySelector('smart-grid');
grid.saveBatchEdit();
      


      
	
      select(	rowId: string | number, 	dataField?: string): void
      
	
      Selects a row, cell or column.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataField?string
      column bound data field
      	
      
			
      Invoke the select method.
      
			
      const grid = document.querySelector('smart-grid');
grid.select(1);
      


      
	
      selectRange(	rowId: string | number, 	dataField: string, 	endRowId: string | number, 	endDataField: string): void
      
	
      Selects a range of rows, cells or columns. The result of the method depends on the selection configuration of the Grid.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataFieldstring
      column bound data field
      	
      endRowIdstring | number
      row bound id
      	
      endDataFieldstring
      column bound data field
      	
      
			
      Invoke the selectRange method.
      
			
      const grid = document.querySelector('smart-grid');
grid.selectRange(1,"firstName",5,"lastName");
      


      
	
      selectRowsRange(	rowId: string | number, 	endRowId: string | number): void
      
	
      Selects a range of rows.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      endRowIdstring | number
      row bound id
      	
      
			
      Invoke the selectRowsRange method.
      
			
      const grid = document.querySelector('smart-grid');
grid.selectRowsRange(1,3);
      


      
	
      selectRows(	rowId: (string | number)[]): void
      
	
      Selects multiple rows by their ids.
      	
      Arguments
      	
      rowId(string | number)[]
      Array of row ids
      	
      
			
      Invoke the selectRows method.
      
			
      const grid = document.querySelector('smart-grid');
grid.selectRows([1,3,5]);
      


      
	
      selectAllRows(): void
      
	
      Selects all rows.
      	
      
			
      Invoke the selectAllRows method.
      
			
      const grid = document.querySelector('smart-grid');
grid.selectAllRows();
      


      
	
      selectRowsByIndex(	rowIndex: number[]): void
      
	
      Selects multiple rows by their index.
      	
      Arguments
      	
      rowIndexnumber[]
      Array of row indexes
      	
      
			
      Invoke the selectRowsByIndex method.
      
			
      const grid = document.querySelector('smart-grid');
grid.selectRowsByIndex([1,5]);
      


      
	
      selectRowsByQuery(	query: string, 	dataField?: string, 	condition?: string): void
      
	
      Selects rows by using a query. Example: grid.selectRowsByQuery('nancy'); selects all rows that have 'nancy' value. Example 2: grid.selectRowsByQuery('nancy, davolio'); selects all rows that have 'nancy' and 'davolio' values in the same row. Example 3: grid.selectRowsByQuery(5, 'quantity', '>'); selects all rows where the value of the 'quantity' field is > 5. 
      	
      Arguments
      	
      querystring
      Search query
      	
      dataField?string
      Column data field.
      	
      condition?string
      Conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
      	
      
			
      Invoke the selectRowsByQuery method.
      
			
      const grid = document.querySelector('smart-grid');
grid.selectRowsByQuery("Nancy","firstName","EQUAL");
      


      
	
      selectCells(	rowIds: (string | number)[], 	dataFields: string[]): void
      
	
      Selects multiple cells by their ids and dataFields. Example: grid.selectCells([0, 1, 2], ['firstName', 'quantity', 'date']); - selects the 'firstName', 'quantity' and 'date' cells from the first, second and third rows.
      	
      Arguments
      	
      rowIds(string | number)[]
      Array of row ids
      	
      dataFieldsstring[]
      Array of data fields.
      	
      
			
      Invoke the selectCells method.
      
			
      const grid = document.querySelector('smart-grid');
grid.selectCells([0,1,2],["firstName","quantity","date"]);
      


      
	
      selectCellsByQuery(	query: string): void
      
	
      Selects cells by using a query. Example: grid.selectCellsByQuery('nancy'); selects all cells that have 'nancy' value. Example 2: grid.selectCellsByQuery('nancy, davolio'); selects all cells that have 'nancy' and 'davolio' values in the same row. 
      	
      Arguments
      	
      querystring
      Search query
      	
      
			
      Invoke the selectCellsByQuery method.
      
			
      const grid = document.querySelector('smart-grid');
grid.selectCellsByQuery("nancy","davolio");
      


      
	
      setCellValue(	rowId: string | number, 	dataField: string, 	value: string | number | Date | boolean): void
      
	
      Sets a new value to a cell.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      valuestring | number | Date | boolean
      New Cell value.
      	
      
			
      Invoke the setCellValue method.
      
			
      const grid = document.querySelector('smart-grid');
grid.setCellValue(1,"firstName","new value");
      


      
	
      setColumns(	columns: GridColumn[]): void
      
	
      Sets new columns to the Grid. The grid will redraw all the column headers, and then redraw all of the rows. By using 'setColumns', the grid will compare the new columns passed as argument to the method with existing columns. The Grid will automatically create new columns, keep old columns if they already exist and remove columns which are not in the 'setColumns' method argument. The benefit of that is that the state of the column like(sort, filter, width or other) will be kept, if the column exsits after the new columns are applied.
      	
      Arguments
      	
      columnsGridColumn[]
      Columns array.
      	
      
			
      Invoke the setColumns method.
      
			
      const grid = document.querySelector('smart-grid');
grid.setColumns([{"label":"First Name","dataField":"firstName"}]);
      


      
	
      setColumnProperty(	dataField: string, 	propertyName: string, 	value: any): void
      
	
      Sets a property to a column.
      	
      Arguments
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      propertyNamestring
      The column property's name.
      	
      valueany
      The new property value.
      	
      
			
      Invoke the setColumnProperty method.
      
			
      const grid = document.querySelector('smart-grid');
grid.setColumnProperty("firstName","freeze",true);
      


      
	
      setRowProperty(	rowId: string | number, 	propertyName: string, 	value: any): void
      
	
      Sets a property to a row.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      propertyNamestring
      The row property's name.
      	
      valueany
      The new property value.
      	
      
			
      Invoke the setRowProperty method.
      
			
      const grid = document.querySelector('smart-grid');
grid.setRowProperty(1,"freeze",true);
      


      
	
      setRowStyle(	rowId: string | number, 	rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void
      
	
      Sets a style to a row.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      rowStyle{background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}
      The row style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
      	
      
			
      Invoke the setRowStyle method.
      
			
      const grid = document.querySelector('smart-grid');
grid.setRowStyle(1,{"background":"blue","color":"white"});
      


      
	
      setCellStyle(	rowId: string | number, 	dataField: string, 	rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void
      
	
      Sets a style to a row.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataFieldstring
      Column bound field name.
      	
      rowStyle{background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}
      The cell style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
      	
      
			
      Invoke the setCellStyle method.
      
			
      const grid = document.querySelector('smart-grid');
grid.setCellStyle(1,"firstName",{"background":"blue","color":"white"});
      


      
	
      setDropDownLabel(	label: string): void
      
	
      Sets the label of the Grid when the 'dropDownMode' property is true.
      	
      Arguments
      	
      labelstring
      The label to be displayed in the dropdown button.
      	
      
			
      Invoke the setDropDownLabel method.
      
			
      const grid = document.querySelector('smart-grid');
grid.setDropDownLabel("firstName");
      


      
	
      setVerticalScrollValue(	value: number): void
      
	
      Sets the position of the vertical scrollbar. You can use this method in combination with the getVerticalScrollValue and getVerticalScrollMax.
      	
      Arguments
      	
      valuenumber
      The new scroll position
      	
      
			
      Invoke the setVerticalScrollValue method.
      
			
      const grid = document.querySelector('smart-grid');
grid.setVerticalScrollValue(100);
      


      
	
      setHorizontalScrollValue(	value: number): void
      
	
      Sets the position of the horizontal scrollbar. You can use this method in combination with the getHorizontalScrollValue and getHorizontalScrollMax.
      	
      Arguments
      	
      valuenumber
      The new scroll position
      	
      
			
      Invoke the setHorizontalScrollValue method.
      
			
      const grid = document.querySelector('smart-grid');
grid.setHorizontalScrollValue(100);
      


      
	
      closeSidePanel(): void
      
	
      Closes the Grid's side panel.
      	
      
			
      Invoke the closeSidePanel method.
      
			
      const grid = document.querySelector('smart-grid');
grid.closeSidePanel();
      


      
	
      showSidePanel(	content: any, 	width?: number, 	callback?: any): void
      
	
      Shows the side panel of the Grid.
      	
      Arguments
      	
      contentany
      This is the content which will be displayed in the side panel. It can be String, HTML Element, HTML Template Element or Component
      	
      width?number
      This is the width of the side panel
      	
      callback?any
      Function called when the panel is opened. It can be used for dynamically showing content and initializing it.
      	
      
			
      Invoke the showSidePanel method.
      
			
      const grid = document.querySelector('smart-grid');
grid.showSidePanel(1);
      


      
	
      showDetail(	rowId: string | number): void
      
	
      Shows the Details of a Row, when row details are enabled.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      
			
      Invoke the showDetail method.
      
			
      const grid = document.querySelector('smart-grid');
grid.showDetail(1);
      


      
	
      showCellMessage(	rowId: string | number, 	dataField: string, 	value: string): void
      
	
      Shows an overlay message below a cell. This method can be used for onboarding tips or in scenarios when you want to display custom messages to the user.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataFieldstring
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      valuestring
      The message to be shown below the cell
      	
      
			
      Invoke the showCellMessage method.
      
			
      const grid = document.querySelector('smart-grid');
grid.showCellMessage(1,"firstName","value");
      


      
	
      updateRow(	rowId: string | number, 	data: any, 	callback?: {(row: GridRow): void}): void
      
	
      Updates a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataany
      row data matching the data source
      	
      callback?{(row: GridRow): void}
      Sets a callback function, which is called after the row is updated. The callback's argument is the updated row.
      	
      
			
      Invoke the updateRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.updateRow(1,{"firstName":"Nancy","lastName":"Davolio","age":32});
      


      
	
      unselect(	rowId: string | number, 	dataField?: string): void
      
	
      Unselects a row, cell or column.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      dataField?string
      column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
      	
      
			
      Invoke the unselect method.
      
			
      const grid = document.querySelector('smart-grid');
grid.unselect(1);
      


      
	
      uncheckRow(	rowId: string | number): void
      
	
      Unchecks a TreeGrid row. Sets its check-box to false.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      
			
      Invoke the uncheckRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.uncheckRow(1);
      


      
	
      uncheckAllRows(): void
      
	
      Unchecks all TreeGrid or Grouping rows. Sets all check-boxes to false.
      	
      
			
      Invoke the uncheckAllRows method.
      
			
      const grid = document.querySelector('smart-grid');
grid.uncheckAllRows();
      


      
	
      toggleRow(	rowId: string | number): void
      
	
      Toggles a TreeGrid row. When this method is called, the row is expanded, if it's state is collapsed and collapsed if it's state is expanded.
      	
      Arguments
      	
      rowIdstring | number
      row bound id
      	
      
			
      Invoke the toggleRow method.
      
			
      const grid = document.querySelector('smart-grid');
grid.toggleRow(1);
      


      CSS Variables
      
			
      
				--smart-grid-default-widthvar()
			
      
			
      Default value
      "800px"
      
	
      Used to set the default width.
      

			
      
				--smart-grid-default-heightvar()
			
      
			
      Default value
      "400px"
      
	
      Used to set the default height.
      

			
      
				--smart-grid-footer-heightvar()
			
      
			
      Default value
      "var(--smart-bar-height)"
      
	
      Sets footer height.
      

			
      
				--smart-grid-header-heightvar()
			
      
			
      Default value
      "var(--smart-bar-height)"
      
	
      Sets header height.
      

			
      
				--smart-grid-group-header-heightvar()
			
      
			
      Default value
      "var(--smart-bar-height)"
      
	
      Sets group header height.
      

			
      
				--smart-grid-row-heightvar()
			
      
			
      Default value
      "30px"
      
	
      Sets rows height.
      

			
      
				--smart-grid-column-header-heightvar()
			
      
			
      Default value
      "var(--smart-bar-height)"
      
	
      Sets columns height.
      

			
      
				--smart-grid-filter-footer-heightvar()
			
      
			
      Default value
      "var(--smart-bar-height)"
      
	
      Sets filter row height.
      

			
      
				--smart-grid-aggregate-footer-heightvar()
			
      
			
      Default value
      "var(--smart-bar-height)"
      
	
      Sets aggregates height.
      

			
      
				--smart-grid-header-background-freezevar()
			
      
			
      Default value
      "var(--smart-surface)"
      
	
      Sets row/column header background, when row/column is frozen.
      

			
      
				--smart-grid-header-color-freezevar()
			
      
			
      Default value
      "var(--smart-surface-color)"
      
	
      Sets row/column header text color, when row/column is frozen.
      

			
      
				--smart-grid-column-menu-widthvar()
			
      
			
      Default value
      "200px"
      
	
      Sets column menu's width.
      

			
      
				--smart-grid-column-menu-heightvar()
			
      
			
      Default value
      "auto"
      
	
      Sets column menu's height.
      

			
      
				--smart-grid-column-buttons-widthvar()
			
      
			
      Default value
      "23px"
      
	
      Sets column buttons width.
      

			
      
				--smart-grid-cell-color-freezevar()
			
      
			
      Default value
      "var(--smart-surface-color)"
      
	
      Sets text color of cells, when row/column is frozen.
      

			
      
				--smart-grid-cell-background-freezevar()
			
      
			
      Default value
      "var(--smart-surface)"
      
	
      Sets background color of cells, when row/column is frozen
      

			
      
				--smart-grid-cell-color-deletevar()
			
      
			
      Default value
      "#333"
      
	
      Sets text color of cells, when row is deleted.
      

			
      
				--smart-grid-cell-background-deletevar()
			
      
			
      Default value
      "#FFDCDC"
      
	
      Sets background color of cells, when row is deleted.
      

			
      
				--smart-grid-cell-color-updatevar()
			
      
			
      Default value
      "#333"
      
	
      Sets text color of cells, when cell is updated..
      

			
      
				--smart-grid-cell-background-updatevar()
			
      
			
      Default value
      "#D7F9C7"
      
	
      Sets background color of cells, when cell is updated..
      

			
      
				--smart-grid-cell-color-addvar()
			
      
			
      Default value
      "#333"
      
	
      Sets text color of cells, when row is added..
      

			
      
				--smart-grid-cell-background-addvar()
			
      
			
      Default value
      "#FED59B"
      
	
      Sets background color of cells, when row is deleted..
      

			
      
				--smart-grid-cell-color-unboundvar()
			
      
			
      Default value
      "var(--smart-surface-color)"
      
	
      Sets text color of cells, when row is unbound.
      

			
      
				--smart-grid-cell-background-unboundvar()
			
      
			
      Default value
      "var(--smart-surface)"
      
	
      Sets background color of cells, when row is unbound.
      

			
      
				--smart-grid-cell-color-sortvar()
			
      
			
      Default value
      "var(--smart-surface-color)"
      
	
      Sets text color of cells, when column is sorted.
      

			
      
				--smart-grid-cell-background-sortvar()
			
      
			
      Default value
      "var(--smart-surface)"
      
	
      Sets background color of cells, when column is sorted.
      

			
      
				--smart-grid-cell-color-filtervar()
			
      
			
      Default value
      "var(--smart-surface-color)"
      
	
      Sets text color of cells, when column is filtered.
      

			
      
				--smart-grid-cell-background-filtervar()
			
      
			
      Default value
      "var(--smart-surface)"
      
	
      Sets background color of cells, when column is filtered.
      

			
      
				--smart-grid-group-row-vertical-offsetvar()
			
      
			
      Default value
      "5"
      
	
      Sets grouped rows vertical offset.
      

			
      
				--smart-grid-group-row-horizontal-offsetvar()
			
      
			
      Default value
      "1"
      
	
      Sets grouped rows horizontal offset.
      

			
      
				--smart-grid-template-columnsvar()
			
      
			
      Default value
      "none"
      
	
      Sets Template columns.
      

			
      
				--smart-grid-column-gapvar()
			
      
			
      Default value
      "0px"
      
	
      Sets the element's grid-column-gap (related to CSS Grid)
      

			
      
				--smart-grid-row-gapvar()
			
      
			
      Default value
      "0px"
      
	
      Sets the element's grid-row-gap (related to CSS Grid)
      

			
      
				--smart-grid-freeze-splitter-sizevar()
			
      
			
      Default value
      "1px"
      
	
      Sets frozen split bar size.
      

			
      
				--smart-grid-resize-line-sizevar()
			
      
			
      Default value
      "1px"
      
	
      Sets resize line size.