StackedColumnModel

23 Sep 202511 minutes to read

Interface for a class StackedColumn

Properties

allowEditing boolean

If allowEditing set to false, then it disables editing of a particular column.
By default all columns are editable.

allowFiltering boolean

If allowFiltering set to false, then it disables filtering option and filter bar element of a particular column.
By default all columns are filterable.

allowGrouping boolean

If allowGrouping set to false, then it disables grouping of a particular column.
By default all columns are groupable.

allowReordering boolean

If allowReordering set to false, then it disables reorder of a particular column.
By default all columns can be reorder.

allowResizing boolean

If allowResizing set to false, it disables resize option of a particular column.

allowSearching boolean

If allowSearching set to false, then it disables Searching of a particular column.
By default all columns allow Searching.

allowSorting boolean

If allowSorting set to false, then it disables sorting option of a particular column.
By default all columns are sortable.

autoFit boolean

If autoFit set to true, then the particular column content width will be
adjusted based on its content in the initial rendering itself.
Setting this property as true is equivalent to calling autoFitColumns method in the dataBound event.

clipMode ClipMode

Defines the cell content’s overflow mode. The available modes are

• Clip - Truncates the cell content when it overflows its area.
• Ellipsis - Displays ellipsis when the cell content overflows its area.
• EllipsisWithTooltip - Displays ellipsis when the cell content overflows its area
  also it will display tooltip while hover on ellipsis applied cell.

columns string[]|ColumnModel[]

Defines stacked columns

commands CommandModel[]

commands provides an option to display command buttons in every cell.
The available built-in command buttons are

• Edit - Edit the record.
• Delete - Delete the record.
• Save - Save the record.
• Cancel - Cancel the edit state.
  The following code example implements the custom command column.
  ```html

```typescript
var gridObj = new Grid({
datasource: window.gridData,
columns : [
 { field: 'CustomerID', headerText: 'Customer ID' },
 { field: 'CustomerName', headerText: 'Customer Name' },
 {commands: [{buttonOption:{content: 'Details', click: onClick, cssClass: details-icon}}], headerText: 'Customer Details'}
]
gridObj.appendTo("#Grid");

customAttributes { : }

The CSS styles and attributes of the content cells of a particular column can be customized.

<div id="Grid"></div>

let gridObj: Grid = new Grid({
dataSource: filterData,
columns: [
   { field: 'OrderID', headerText: 'Order ID' },
   {
       field: 'EmployeeID', headerText: 'Employee ID', customAttributes: {
          class: 'employeeid',
          type: 'employee-id-cell'
     }
  }]
});
gridObj.appendTo('#Grid');

dataSource Object[]|DataManager|DataResult

Defines the column data source which will act as foreign data source.

defaultValue string|number|Date|boolean|null

Defines default values for the component when adding a new record to the Grid.

disableHtmlEncode boolean

If disableHtmlEncode is set to true, it encodes the HTML of the header and content cells.

displayAsCheckBox boolean

If displayAsCheckBox is set to true, it displays the column value as a check box instead of Boolean value.

edit IEditCell

Defines the IEditCell(../../grid/edit/#cell-edit-template) object to customize default edit cell.

editTemplate string|Function

Defines the cell edit template that used as editor for a particular column.
It accepts either template string or HTML element ID.

editType string

Defines the type of component for editing.

enableColumnSpan boolean

Allows grid to perform column spanning on the specified column.

enableGroupByFormat boolean

If enableGroupByFormat set to true, then it groups the particular column by formatted values.
By default no columns are group by format.

enableRowSpan boolean

Allows grid to perform row spanning on the specified column.

field string

Defines the field name of column which is mapped with mapping name of DataSource.
The bounded columns can be sort, filter and group etc.,
If the field name contains “dot”, then it is considered as complex binding.
The field name must be a valid JavaScript identifier,
the first character must be an alphabet and should not contain spaces and special characters.

filter IFilter

Defines the filter options to customize filtering for the particular column.

filterBarTemplate IFilterUI

The filterBarTemplate is used to add a custom component instead of default input component for filter bar.
It have create and read functions.

• create: It is used for creating custom components.
• read: It is used to perform custom filter action.
  ```html

```typescript
let gridObj: Grid = new Grid({
dataSource: filterData,
columns: [
  { field: 'OrderID', headerText: 'Order ID' },
  {
     field: 'EmployeeID', filterBarTemplate: {
        create: (args: { element: Element, column: Column }) => {
             let input: HTMLInputElement = document.createElement('input');
             input.id = 'EmployeeID';
             input.type = 'text';
             return input;
        },
        write: (args: { element: Element, column: Column }) => {
            args.element.addEventListener('input', args.column.filterBarTemplate.read as EventListener);
        },
        read: (args: { element: HTMLInputElement, columnIndex: number, column: Column }) => {
            gridObj.filterByColumn(args.element.id, 'equal', args.element.value);
       }
    }
 }],
  allowFiltering: true
});
gridObj.appendTo('#Grid');

filterTemplate string|Function

Defines the filter template/UI that used as filter for a particular column.
It accepts either template string or HTML element ID.

foreignKeyField string

Defines the mapping column name of the foreign data source.
If it is not defined then the columns.field will be considered as mapping column name

foreignKeyValue string

Defines the display column name from the foreign data source which will be obtained from comparing local and foreign data

format string|NumberFormatOptions|DateFormatOptions

It is used to change display value with the given format and does not affect the original data.
Gets the format from the user which can be standard or custom
number
and date formats.

formatter Object|ICellFormatter|Function

Defines the method which is used to achieve custom formatting from an external function.
This function triggers before rendering of each cell.

<div id="Grid"></div>

class ExtendedFormatter implements ICellFormatter {
public getValue(column: Column, data: Object): Object {
  return '<span style="color:' + (data['Verified'] ? 'green' : 'red') + '"><i>' + data['Verified'] + '</i><span>';
}
}
let gridObj: Grid = new Grid({
    dataSource: filterData,
    columns: [
        { field: 'ShipName', headerText: 'Ship Name' },
        { field: 'Verified', headerText: 'Verified Status', formatter: ExtendedFormatter }]
});
gridObj.appendTo('#Grid');

freeze freezeDirection

defines which side the column need to freeze
The available built-in freeze directions are

• Left - Freeze the column at left side.
• Right - Freeze the column at right side.
• Fixed - Freeze the column at Center.
• None - Does not freeze the column.

headerTemplate string|Function

Defines the column template as string or HTML element ID which is used to add customized element in the column header.

headerText string

Defines the header text of column which is used to display in column header.
If headerText is not defined, then field name value will be assigned to header text.

headerTextAlign TextAlign

Define the alignment of column header which is used to align the text of column header.

headerValueAccessor HeaderValueAccessor|string

Defines the method used to apply custom header cell values from external function and display this on each cell rendered.

<div id="Grid"></div>

let gridObj: Grid = new Grid({
dataSource: [{ EmployeeID: 1, EmployeeName: ['John', 'M'] }, { EmployeeID: 2, EmployeeName: ['Peter', 'A'] }],
columns: [
    { field: 'EmployeeID', headerText: 'Employee ID' },
    { field: 'EmployeeName', headerText: 'Employee First Name',
      headerValueAccessor: (field: string,column: Column) => {
            return "newheadername";
        },
    }]
});

hideAtMedia string

column visibility can change based on its Media Queries.
hideAtMedia accepts only valid Media Queries.

index number

Gets the unique identifier value of the column. It is used to get the object.

isFrozen boolean

You can use this property to freeze selected columns in grid.

isIdentity boolean

If isIdentity is set to true, then this column is considered as identity column.

isPrimaryKey boolean

If isPrimaryKey is set to true, considers this column as the primary key constraint.

lockColumn boolean

Defines the mapping column name of the foreign data source.
If it is not defined then the columns.field will be considered as mapping column name

maxWidth string|number

Defines the maximum width of the column in pixel or percentage, which will restrict resizing beyond this pixel or percentage.

minWidth string|number

Defines the minimum width of the column in pixels or percentage.

showColumnMenu boolean

If showColumnMenu set to false, then it disable the column menu of a particular column.
By default column menu will show for all columns

showInColumnChooser boolean

If showInColumnChooser set to false, then hides the particular column in column chooser.
By default all columns are displayed in column Chooser.

sortComparer SortComparer|string

It defines the custom sort comparer function.

template string|Function

Defines the column template that renders customized element in each cell of the column.
It accepts either template string or HTML element ID.

templateOptions TemplateProps

Determines the behavior of the aria-label attribute for cells in template columns.
If enableAriaLabel is set to false, the aria-label attribute is not applied to template column cells, which affects screen reader accessibility.

textAlign TextAlign

Defines the alignment of the column in both header and content cells.

type string

Defines the data type of the column.

uid string

Gets the unique identifier value of the column. It is used to get the object.

validationRules Object

editType(../../grid/edit/#cell-edit-type-and-its-params) Defines rules to validate data before creating and updating.

valueAccessor ValueAccessor|string

Defines the method used to apply custom cell values from external function and display this on each cell rendered.

<div id="Grid"></div>

let gridObj: Grid = new Grid({
dataSource: [{ EmployeeID: 1, EmployeeName: ['John', 'M'] }, { EmployeeID: 2, EmployeeName: ['Peter', 'A'] }],
columns: [
    { field: 'EmployeeID', headerText: 'Employee ID' },
    { field: 'EmployeeName', headerText: 'Employee First Name',
      valueAccessor: (field: string, data: Object, column: Column) => {
            return data['EmployeeName'][0];
        },
    }]
});

visible boolean

If visible is set to false, hides the particular column. By default, all columns are displayed.

width string|number

Defines the width of the column in pixels or percentage.