Represents the TreeGrid component.
<div id='treegrid'></div>
<script>
var treegridObj = new TreeGrid({ allowPaging: true });
treegridObj.appendTo('#treegrid');
</script>
Configures the TreeGrid aggregate rows.
Check the
Aggregates
for its configuration.
Defaults to []
boolean
If allowExcelExport
set to true, then it will allow the user to export treegrid to Excel file.
Check the
ExcelExport
to configure exporting document.
Defaults to false
boolean
If allowFiltering
is set to true the filter bar will be displayed.
If set to false the filter bar will not be displayed.
Filter bar allows the user to filter tree grid records with required criteria.
Defaults to false
boolean
If allowMultiSorting
set to true, then it will allow the user to sort multiple column in the treegrid.
allowSorting
should be true.
Defaults to true
boolean
If allowPaging
is set to true, pager renders.
Defaults to false
boolean
If allowPdfExport
set to true, then it will allow the user to export treegrid to Pdf file.
Check the
Pdfexport
to configure the exporting document.
Defaults to false
boolean
If allowReordering
is set to true, TreeGrid columns can be reordered.
Reordering can be done by drag and drop of a particular column from one index to another index.
If TreeGrid is rendered with stacked headers, reordering is allowed only at the same level as the column headers.
Defaults to false
boolean
If allowResizing
is set to true, TreeGrid columns can be resized.
Defaults to false
boolean
If allowRowDragAndDrop
is set to true, you can drag and drop treegrid rows at another treegrid.
Defaults to false
boolean
If allowSelection
is set to true, it allows selection of (highlight row) TreeGrid records by clicking it.
Defaults to true
boolean
If allowSorting
is set to true, it allows sorting of treegrid records when column header is clicked.
Defaults to false
boolean
If allowTextWrap
set to true,
then text content will wrap to the next line when its text content exceeds the width of the Column Cells.
Defaults to false
boolean
If autoCheckHierarchy
is set to true, hierarchy checkbox selection is enabled in TreeGrid.
Defaults to false
string
Specifies the mapping property path for child records in data source
<div id="TreeGrid"></div>
import { TreeGrid } from '@syncfusion/ej2-treegrid';
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: summaryRowData,
childMapping: 'children',
});
treegrid.appendTo('#TreeGrid');
Defaults to null
ClipMode
Defines the mode of clip. 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 the tooltip while hover on ellipsis is applied.
Defaults to Syncfusion.EJ2.Grids.ClipMode.Ellipsis
TreeClipboard
clipboardModule
is used to handle TreeGrid copy action.
ColumnMenuItem[]
| ColumnMenuItemModel[]
columnMenuItems
defines both built-in and custom column menu items.
The available built-in items are,
AutoFitAll
- Auto fit the size of all columns.AutoFit
- Auto fit the current column.SortAscending
- Sort the current column in ascending order.SortDescending
- Sort the current column in descending order.Filter
- Filter options will show based on filterSettings property like filterbar, menu filter.Defaults to null
ColumnMenu
The columnMenuModule
is used to manipulate column menu items and its action in TreeGrid.
ColumnQueryModeType
columnQueryMode
provides options to retrieves data from the data source.Their types are
All
: It retrieves whole data source.Schema
: retrieves data for all the defined columns in TreeGrid from the data source.ExcludeHidden
: retrieves data only for visible columns of TreeGrid from the data Source.Defaults to All
ColumnModel[]
| string[]
| Column[]
Defines the schema of dataSource.
If the columns
declaration is empty or undefined then the columns
are automatically generated from data source.
<div id="TreeGrid"></div>
import { TreeGrid } from '@syncfusion/ej2-treegrid';
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: summaryRowData,
childMapping: 'children',
treeColumnIndex: 0,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 130 },
{ field: 'taskName', width: 200, headerText: 'Task Name', width: 130 },
{ field: 'duration', headerText: 'Duration', width: 140 },
{ field: 'progress', headerText: 'Progress', width: 140 }
]
});
treegrid.appendTo('#TreeGrid');
Defaults to []
ContextMenuItem[]
| ContextMenuItemModel[]
contextMenuItems
defines both built-in and custom context menu items.
The available built-in items are,
AutoFitAll
- Auto fit the size of all columns.AutoFit
- Auto fit the current column.Edit
- Edit the current record.Delete
- Delete the current record.Save
- Save the edited record.Cancel
- Cancel the edited state.PdfExport
- Export the grid as Pdf format.ExcelExport
- Export the grid as Excel format.CsvExport
- Export the grid as CSV format.SortAscending
- Sort the current column in ascending order.SortDescending
- Sort the current column in descending order.FirstPage
- Go to the first page.PrevPage
- Go to the previous page.LastPage
- Go to the last page.NextPage
- Go to the next page.Defaults to null
ContextMenu
The contextMenuModule
is used to handle context menu items and its action in the TreeGrid.
copyHierarchyMode
Defines the copy clipboard types.
The available built-in items are,
Parent
- Copy the selected data with parent record.Child
- Copy the selected data with child record.Both
- Copy the selected data with both parent and child record.None
- Copy only the selected record.Defaults to Parent
Object
| DataManager
It is used to render TreeGrid table rows.
<div id="TreeGrid"></div>
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { summaryRowData } from './data-source';
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: summaryRowData,
childMapping: 'children',
});
treegrid.appendTo('#TreeGrid');
Defaults to []
string
| Function
The detail template allows you to show or hide additional information about a particular row.
It accepts either the template string or the HTML element ID.
The editModule
is used to handle TreeGrid content manipulation.
Configures the edit settings.
Defaults to { allowAdding: false, allowEditing: false, allowDeleting: false, mode:‘Normal’,allowEditOnDblClick: true, showConfirmDialog: true, showDeleteConfirmDialog: false }
boolean
If enableAdaptiveUI
is set to true, the pop-up UI will become adaptive to small screens,
and be used for filtering and other features.
<div id='treegrid'></div>
<script>
var treegridObj = new TreeGrid({ enableAdaptiveUI: true });
treegridObj.appendTo('#treegrid');
</script>
Defaults to false
boolean
If enableAltRow
is set to true, the TreeGrid will render with e-altrow
CSS class to the alternative tr elements.
Check the
AltRow
to customize the styles of alternative rows.
Defaults to true
boolean
If enableAutoFill
is set to true, then the auto fill icon will displayed on cell selection for copy cells.
It requires the selection mode
to be Cell and cellSelectionMode
to be Box
.
Defaults to false
boolean
Specifies whether to load all the rows in collapsed state when the TreeGrid is rendered for the first time.
Defaults to false
boolean
If enableColumnVirtualization
set to true, then the Tree Grid will render only the columns visible within the view-port
and load subsequent columns on horizontal scrolling. This helps to load large dataset of columns in Tree Grid.
Defaults to false
boolean
If enableHover
is set to true, the row hover is enabled in the TreeGrid.
Defaults to false
boolean
Specifies whether to display or remove the untrusted HTML values in the TreeGrid component.
If enableHtmlSanitizer
is set to true, then it will sanitize any suspected untrusted strings and scripts before rendering them.
Defaults to false
boolean
If enableImmutableMode
is set to true, the TreeGrid will reuse old rows if it exists in the new result instead of
full refresh while performing the TreeGrid actions.
Defaults to false
boolean
If enableInfiniteScrolling
set to true, then the data will be loaded in TreeGrid when the scrollbar reaches the end.
This helps to load large dataset in TreeGrid.
Defaults to false
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Specifies whether to display shimmer effect during scrolling action in virtual scrolling feature. If disabled, spinner is shown instead of shimmer effect.
Defaults to true
boolean
If enableVirtualization
set to true, then the TreeGrid will render only the rows visible within the view-port
and load subsequent rows on vertical scrolling. This helps to load large dataset in TreeGrid.
Defaults to false
string
Specifies the mapping property path for the expand status of a record in data source.
Defaults to null
Configures the filter settings of the TreeGrid.
Defaults to {columns: [], type: ‘FilterBar’, mode: ‘Immediate’, showFilterBarStatus: true, immediateModeDelay: 1500 , operators: {}}
number
Gets or sets the number of frozen columns.
Defaults to 0
number
Gets or sets the number of frozen rows.
Defaults to 0
GridLine
Defines the mode of TreeGrid lines. The available modes are,
* Both :- Displays both horizontal and vertical TreeGrid lines.
* None :- No TreeGrid lines are displayed.
* Horizontal :- Displays the horizontal TreeGrid lines only.
* Vertical :- Displays the vertical TreeGrid lines only.
* Default :- Displays TreeGrid lines based on the theme.
Defaults to Syncfusion.EJ2.Grids.GridLine.Default
string
Specifies whether record is parent or not for the remote data binding
Defaults to null
string
| number
Defines the scrollable height of the TreeGrid content.
Defaults to ‘auto’
string
Specifies the name of the field in the dataSource, which contains the id of that row.
<div id="TreeGrid"></div>
import { TreeGrid } from '@syncfusion/ej2-treegrid';
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: projectData,
idMapping: 'TaskID',
parentIdMapping: 'parentID',
});
treegrid.appendTo('#TreeGrid');
Defaults to null
Configures the infinite scroll settings.
Defaults to { enableCache: false, maxBlocks: 5, initialBlocks: 5 }
KeyboardEvents
The keyboardModule
is used to manipulate keyboard interactions in TreeGrid.
boolean
When enabled, only parent records would be rendered during the initial render and child records will be loaded only when expanding a parent record. This property is only applicable for remote data binding. Loading child records on demand can improve the performance of data-bound controls with a large number of records. Child records are only loaded when they are requested, rather than loading all child records at once.
Defaults to true
Configures the loading indicator of the Tree Grid. Specifies whether to display spinner or shimmer effect during the waiting time on any actions (paging, sorting, filtering, CRUD operations) performed in Tree Grid.
Defaults to {indicatorType: ‘Spinner’}
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Configures the pager in the TreeGrid.
Defaults to {currentPage: 1, pageSize: 12, pageCount: 8, enableQueryString: false, pageSizes: false, template: null}
Page
The pagerModule
is used to manipulate paging in the TreeGrid.
string
Specifies the name of the field in the dataSource, which contains the parent’s id
<div id="TreeGrid"></div>
import { TreeGrid } from '@syncfusion/ej2-treegrid';
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: projectData,
idMapping: 'TaskID',
parentIdMapping: 'parentID',
});
treegrid.appendTo('#TreeGrid');
Defaults to null
PrintMode
Defines the print modes. The available print modes are
* AllPages :- Prints all pages of the TreeGrid.
* CurrentPage :- Prints the current page of the TreeGrid.
Defaults to Syncfusion.EJ2.Grids.PrintMode.AllPages
Print
The printModule
is used to handle the printing feature of the TreeGrid.
Query
Defines the external Query
that will be executed along with data processing.
Defaults to null
Reorder
The reorderModule
is used to manipulate reordering in TreeGrid.
RowDD
The rowDragandDrop
is used to manipulate Row Reordering in TreeGrid.
RowDropSettingsModel
Configures the row drop settings of the TreeGrid.
number
Defines the height of TreeGrid rows.
Defaults to null
string
| Function
The row template that renders customized rows from the given template. By default, TreeGrid renders a table row for every data source item.
- It accepts either template string or HTML element ID.
- The row template must be a table row. Check the
Row Template
customization.
Configures the search settings of the TreeGrid.
Defaults to {search: [] , operators: {}}
number
The selectedRowIndex
allows you to select a row at initial rendering.
You can also get the currently selected row index.
Defaults to -1
Configures the selection settings.
Defaults to {mode: ‘Row’, cellSelectionMode: ‘Flow’, type: ‘Single’}
boolean
If showColumnChooser
is set to true, it allows you to dynamically show or hide columns.
Defaults to false
boolean
If showColumnMenu
set to true, then it will enable the column menu options in each columns.
Check the
Column menu
for its configuration.
Defaults to false
Sort
The sortModule
is used to manipulate sorting in TreeGrid.
Configures the sort settings of the TreeGrid.
Defaults to {columns:[]}
Configures the text wrap in the TreeGrid.
Defaults to {wrapMode:“Both”}
[]
toolbar
defines the ToolBar items of the TreeGrid.
It contains built-in and custom toolbar items.
If a string value is assigned to the toolbar
option, it is considered as the template for the whole TreeGrid ToolBar.
If an array value is assigned, it is considered as the list of built-in and custom toolbar items in the TreeGrid’s Toolbar.
The available built-in ToolBar items are:
Defaults to null
Toolbar
The toolbarModule
is used to manipulate ToolBar items and its action in the TreeGrid.
number
Specifies the index of the column that needs to have the expander button.
Defaults to 0
string
| number
Defines the TreeGrid width.
Defaults to ‘auto’
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
Adds a new record to the TreeGrid. Without passing parameters, it adds empty rows.
editSettings.allowEditing
should be true.
Parameter | Type | Description |
---|---|---|
data (optional) | Object |
Defines the new add record data. |
index (optional) | number |
Defines the row index to be added. |
position (optional) | RowPosition |
Defines the new row position to be added. |
Returns void
Appends the control within the given HTML element
Parameter | Type | Description |
---|---|---|
selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
Adding unload event to persist data when enable persistence true
Returns void
Changes the column width to automatically fit its content to ensure that the width shows the content without wrapping/hiding.
- This method ignores the hidden columns.
- Uses the
autoFitColumns
method in thedataBound
event to resize at initial rendering.
Parameter | Type | Description |
---|---|---|
fieldNames (optional) | string | string[] |
Defines the column names. |
Returns void
Clears all the filtered rows of the TreeGrid.
Returns void
Deselects the current selected rows and cells.
Returns void
Clears all the sorted columns of the TreeGrid.
Returns void
Cancels edited state.
Returns void
Collapses All the rows
Returns void
Collapses the records at specific hierarchical level
Parameter | Type | Description |
---|---|---|
level | number |
Define the parent row level which needs to be collapsed |
Returns void
Collapses the records by given primary key value
Parameter | Type | Description |
---|---|---|
key | Object |
Collapses the parent rows with given primary key value |
Returns void
Collapses child rows
Parameter | Type | Description |
---|---|---|
row | HTMLTableRowElement |
Collapse the given row |
record (optional) | Object |
Collapse the given record |
key (optional) | Object |
Primary key value |
Returns void
Copy the selected rows or cells data into clipboard.
Parameter | Type | Description |
---|---|---|
withHeader (optional) | boolean |
Specifies whether the column header text needs to be copied along with rows or cells. |
Returns void
Export TreeGrid data to CSV file.
Parameter | Type | Description |
---|---|---|
excelExportProperties (optional) | ExcelExportProperties |
Defines the export properties of the TreeGrid. |
isMultipleExport (optional) | boolean |
Define to enable multiple export. |
workbook (optional) | any |
Defines the Workbook if multiple export is enabled. |
isBlob (optional) | boolean |
If ‘isBlob’ set to true, then it will be returned as blob data. |
Returns Promise
Delete a record with Given options. If fieldName and data is not given then TreeGrid will delete the selected record.
editSettings.allowDeleting
should be true.
Parameter | Type | Description |
---|---|---|
fieldName (optional) | string |
Defines the primary key field, ‘Name of the column’. |
data (optional) | Object |
Defines the JSON data of the record to be deleted. |
Returns void
Delete any visible row by TR element.
Parameter | Type | Description |
---|---|---|
tr | HTMLTableRowElement |
Defines the table row element. |
Returns void
Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
Returns void
Removing unload event to persist data when enable persistence true
Returns void
To edit any particular cell using row index and cell index.
Parameter | Type | Description |
---|---|---|
rowIndex (optional) | number |
Defines row index to edit a particular cell. |
field (optional) | string |
Defines the field name of the column to perform cell edit. |
Returns void
Enables or disables ToolBar items.
Parameter | Type | Description |
---|---|---|
items | string[] |
Defines the collection of itemID of ToolBar items. |
isEnable | boolean |
Defines the items to be enabled or disabled. |
Returns void
If TreeGrid is in editable state, you can save a record by invoking endEdit.
Returns void
Export TreeGrid data to Excel file(.xlsx).
Parameter | Type | Description |
---|---|---|
excelExportProperties (optional) | ExcelExportProperties | TreeGridExcelExportProperties |
Defines the export properties of the Tree Grid. |
isMultipleExport (optional) | boolean |
Define to enable multiple export. |
workbook (optional) | any |
Defines the Workbook if multiple export is enabled. |
isBlob (optional) | boolean |
If ‘isBlob’ set to true, then it will be returned as blob data. |
Returns Promise
Expands All the rows
Returns void
Expands the records at specific hierarchical level
Parameter | Type | Description |
---|---|---|
level | number |
Expands the parent rows at given level |
Returns void
Expands the records by given primary key value
Parameter | Type | Description |
---|---|---|
key | Object |
Expands the parent rows with given primary key value |
Returns void
Expands child rows
Parameter | Type | Description |
---|---|---|
row | HTMLTableRowElement |
Expands the given row |
record (optional) | Object |
Expands the given record |
key (optional) | Object |
Primary key value |
level (optional) | number |
Specifies the hierarchical level of the record |
Returns void
Filters TreeGrid row by column name with the given options.
Parameter | Type | Description |
---|---|---|
fieldName | string |
Defines the field name of the column. |
filterOperator | string |
Defines the operator to filter records. |
filterValue | string | number | Date | boolean | number[] | string[] | Date[] | boolean[] |
Defines the value used to filter records. |
predicate (optional) | string |
Defines the relationship between one filter query and another by using AND or OR predicate. |
matchCase (optional) | boolean |
If match case is set to true, the TreeGrid filters the records with exact match. if false, it filters case insensitive records (uppercase and lowercase letters are treated the same). |
ignoreAccent (optional) | boolean |
If ignoreAccent is set to true, then filter ignores diacritic characters or accents while filtering. |
actualFilterValue (optional) | string |
Defines the actual filter value for filter column. |
actualOperator (optional) | string |
Defines the actual filter operator for filter column. |
Returns void
Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.
Returns Object
Gets a cell by row and column index.
Parameter | Type | Description |
---|---|---|
rowIndex | number |
Specifies the row index. |
columnIndex | number |
Specifies the column index. |
Returns Element
Get the records of checked rows.
Returns Object[]
Get the indexes of checked rows.
Returns number[]
Gets a Column by column name.
Parameter | Type | Description |
---|---|---|
field | string |
Specifies the column name. |
Returns Column
Gets a column by UID.
Parameter | Type | Description |
---|---|---|
uid | string |
Specifies the column UID. |
Returns Column
Gets the collection of column fields.
Returns string[]
Gets a column header by column name.
Parameter | Type | Description |
---|---|---|
field | string |
Specifies the column name. |
Returns Element
Gets a column header by column index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the column index. |
Returns Element
Gets a column header by UID.
Parameter | Type | Description |
---|---|---|
uid | string |
Specifies the column uid. |
Returns Element
Gets a column index by column name.
Parameter | Type | Description |
---|---|---|
field | string |
Specifies the column name. |
Returns number
Gets a column index by UID.
Parameter | Type | Description |
---|---|---|
uid | string |
Specifies the column UID. |
Returns number
Gets the columns from the TreeGrid.
Parameter | Type | Description |
---|---|---|
isRefresh (optional) | boolean |
Defined whether to update DOM |
Returns Column[]
Gets the content div of the TreeGrid.
Returns Element
Gets the content table of the TreeGrid.
Returns Element
Get current visible data of TreeGrid.
Returns Object[]
Gets the data module.
Returns Object
Gets all the TreeGrid’s data rows.
Returns Element[]
Gets the footer div of the TreeGrid.
Returns Element
Gets the footer table element of the TreeGrid.
Returns Element
Gets a frozen left column header by column index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the column index. |
Returns Element
Gets a frozen right table cell by row and column index.
Parameter | Type | Description |
---|---|---|
rowIndex | number |
Specifies the row index. |
columnIndex | number |
Specifies the column index. |
Returns Element
Gets a frozen right column header by column index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the column index. |
Returns Element
Gets all the Tree Grid’s frozen right table data rows.
Returns Element[]
Gets a frozen right tables row element by index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the row index. |
Returns Element
Gets the Tree Grid’s frozen right content rows from frozen Tree Grid.
Returns Element[]
Gets the header div of the TreeGrid.
Returns Element
Gets the header table element of the TreeGrid.
Returns Element
Returns the persistence data for component
Returns any
Gets a movable table cell by row and column index.
Parameter | Type | Description |
---|---|---|
rowIndex | number |
Specifies the row index. |
columnIndex | number |
Specifies the column index. |
Returns Element
Gets a movable column header by column index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the column index. |
Returns Element
Gets all the TreeGrid’s movable table data rows.
Returns Element[]
Gets a movable tables row by index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the row index. |
Returns Element
Gets the TreeGrid’s movable content rows from frozen treegrid.
Returns Element[]
Gets the pager of the TreeGrid.
Returns Element
Get the names of the primary key columns of the TreeGrid.
Returns string[]
Returns the route element of the component
Returns HTMLElement
Gets a row by index.
Parameter | Type | Description |
---|---|---|
index | number |
Specifies the row index. |
Returns Element
Get a row information based on cell
Parameter | Type | Description |
---|---|---|
target | Element | EventTarget |
Target row element |
Returns RowInfo
Returns TreeGrid rows
Returns HTMLTableRowElement[]
Gets the collection of selected records.
Returns Object[]
Gets the collection of selected row and cell indexes.
Returns ISelectedCell[]
Gets the collection of selected row indexes.
Returns number[]
Gets the collection of selected rows.
Returns Element[]
Gets UID by column name.
Parameter | Type | Description |
---|---|---|
field | string |
Specifies the column name. |
Returns string
Gets the visible columns from the TreeGrid.
Returns Column[]
Get the visible records corresponding to rows visually displayed.
Returns Object[]
Navigates to the specified target page.
Parameter | Type | Description |
---|---|---|
pageNo | number |
Defines the page number to navigate. |
Returns void
Handling unload event to persist data when enable persistence true
Returns void
Hides a column by column name.
Parameter | Type | Description |
---|---|---|
keys | string | string[] |
Defines a single or collection of column names. |
hideBy (optional) | string |
Defines the column key either as field name or header text. |
Returns void
Manually shown spinner needs to hide by hideSpinnner
.
Returns void
Indents the record to one level of hierarchy. Moves the selected row as the last child of its previous row.
Parameter | Type | Description |
---|---|---|
record (optional) | Object |
– specifies the record to do indented |
Returns void
Column chooser can be displayed on screen by given position(X and Y axis).
Parameter | Type | Description |
---|---|---|
x (optional) | number |
Defines the X axis. |
y (optional) | number |
Defines the Y axis. |
Returns void
Outdent the record to one level of hierarchy. Moves the selected row as sibling to its parent row.
Parameter | Type | Description |
---|---|---|
record (optional) | Object |
– specifies the record to do outdented |
Returns void
Paste data from clipboard to selected cells.
Parameter | Type | Description |
---|---|---|
data | string |
Specifies the date for paste. |
rowIndex | number |
Specifies the row index. |
colIndex | number |
Specifies the column index. |
Returns void
Export TreeGrid data to PDF document.
Parameter | Type | Description |
---|---|---|
pdfExportProperties (optional) | PdfExportProperties | TreeGridPdfExportProperties |
Defines the export properties of the Tree Grid. |
isMultipleExport (optional) | boolean |
Define to enable multiple export. |
pdfDoc (optional) | Object |
Defined the Pdf Document if multiple export is enabled. |
isBlob (optional) | boolean |
If ‘isBlob’ set to true, then it will be returned as blob data. |
Returns Promise
By default, prints all the pages of the TreeGrid and hides the pager.
You can customize print options using the
printMode
.
Returns void
Refreshes the TreeGrid header and content.
Returns void
Refreshes the TreeGrid column changes.
Parameter | Type | Description |
---|---|---|
refreshUI (optional) | boolean |
Defined whether to refresh the DOM |
Returns void
Refreshes the TreeGrid header.
Returns void
Removes the handler from the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event to remove |
handler | Function |
Specifies the function to remove |
Returns void
Changes the TreeGrid column positions by field names.
Parameter | Type | Description |
---|---|---|
fromFName | string | string[] |
Defines the origin field name. |
toFName | string |
Defines the destination field name. |
Returns void
Reorder the rows based on given indexes and position
Parameter | Type | Description |
---|---|---|
fromIndexes | number[] |
Source indexes of rows |
toIndex | number |
Destination index of row |
position | string |
Defines drop position as above or below or child |
Returns void
Saves the cell that is currently edited. It does not save the value to the DataSource.
Returns void
Searches TreeGrid records using the given key.
You can customize the default search option by using the
searchSettings
.
Parameter | Type | Description |
---|---|---|
searchString | string |
Defines the key. |
Returns void
Selects a cell by the given index.
Parameter | Type | Description |
---|---|---|
cellIndex | IIndex |
Defines the row and column indexes. |
isToggle (optional) | boolean |
If set to true, then it toggles the selection. |
Returns void
Checked the checkboxes using rowIndexes.
Parameter | Type | Description |
---|---|---|
indexes | number[] |
row indexes |
Returns void
Selects a row by given index.
Parameter | Type | Description |
---|---|---|
index | number |
Defines the row index. |
isToggle (optional) | boolean |
If set to true, then it toggles the selection. |
Returns void
Selects a collection of rows by indexes.
Parameter | Type | Description |
---|---|---|
rowIndexes | number[] |
Specifies the row indexes. |
Returns void
Sends a Post request to export Tree Grid to CSV file in server side.
Parameter | Type | Description |
---|---|---|
url | string |
Pass URL for server-side csv export action. |
Returns void
Sends a post request to export tree grid to excel file in server side.
Parameter | Type | Description |
---|---|---|
url | string |
Pass URL for server side excel export action. |
Returns void
Sends a post request to export tree grid to pdf file in server side.
Parameter | Type | Description |
---|---|---|
url | string |
Pass URL for server-side pdf export action. |
Returns void
Updates particular cell value based on the given primary key value.
Primary key column must be specified using
columns.isPrimaryKey
property.
Parameter | Type | Description |
---|---|---|
key | string | number |
Specifies the PrimaryKey value of dataSource. |
field | string |
Specifies the field name which you want to update. |
value | string | number | boolean | Date |
To update new value for the particular cell. |
Returns void
Updates and refresh the particular row values based on the given primary key value.
Primary key column must be specified using
columns.isPrimaryKey
property.
Parameter | Type | Description |
---|---|---|
key | string | number |
Specifies the PrimaryKey value of dataSource. |
rowData (optional) | ITreeData |
To update new data for the particular row. |
Returns void
Shows a column by its column name.
Parameter | Type | Description |
---|---|---|
keys | string | string[] |
Defines a single or collection of column names. |
showBy (optional) | string |
Defines the column key either as field name or header text. |
Returns void
By default, TreeGrid shows the spinner for all its actions. You can use this method to show spinner at your needed time.
Returns void
Sorts a column with the given options.
Parameter | Type | Description |
---|---|---|
columnName | string |
Defines the column name to be sorted. |
direction | SortDirection |
Defines the direction of sorting field. |
isMultiSort (optional) | boolean |
Specifies whether the previous sorted columns are to be maintained. |
Returns void
To edit any particular row by TR element.
Parameter | Type | Description |
---|---|---|
row (optional) | HTMLTableRowElement |
Defines the table row to be edited. |
Returns void
To update the specified cell by given value without changing into edited state.
Parameter | Type | Description |
---|---|---|
rowIndex | number |
Defines the row index. |
field | string |
Defines the column field. |
value | string | number | boolean | Date |
Defines the value to be changed. |
Returns void
Defines the text of external message.
Parameter | Type | Description |
---|---|---|
message | string |
Defines the message to update. |
Returns void
To update the specified row by given values without changing into edited state.
Parameter | Type | Description |
---|---|---|
index | number |
Defines the row index. |
data | Object |
Defines the data object to be updated. |
Returns void
Dynamically injects the required modules to the component.
Parameter | Type | Description |
---|---|---|
moduleList | Function[] |
? |
Returns void
EmitType<PageEventArgs|FilterEventArgs|SortEventArgs|SearchEventArgs|AddEventArgs|SaveEventArgs|EditEventArgs|DeleteEventArgs>
Triggers when TreeGrid actions such as sorting, filtering, paging etc., starts.
EmitType<PageEventArgs|FilterEventArgs|SortEventArgs|SearchEventArgs|AddEventArgs|SaveEventArgs|EditEventArgs|DeleteEventArgs>
Triggers when TreeGrid actions such as sorting, filtering, paging etc. are completed.
EmitType<FailureEventArgs>
Triggers when any TreeGrid action failed to achieve the desired results.
EmitType<BatchAddArgs>
Triggers when records are added in batch mode.
EmitType<BatchCancelArgs>
Triggers before records are added in batch mode.
EmitType<BatchDeleteArgs>
Triggers when records are deleted in batch mode.
EmitType<BeforeBatchAddArgs>
Triggers before records are added in batch mode.
EmitType<BeforeBatchDeleteArgs>
Triggers before records are deleted in batch mode.
EmitType<BeforeBatchSaveArgs>
Triggers before records are saved in batch mode.
EmitType<BeforeCopyEventArgs>
Triggers before TreeGrid copy action.
EmitType<BeforeDataBoundArgs>
Triggers before data is bound to Tree Grid.
EmitType<Object>
Triggers before TreeGrid data is exported to Excel file.
EmitType<BeforePasteEventArgs>
Triggers before TreeGrid paste action.
EmitType<Object>
Triggers before TreeGrid data is exported to PDF document.
EmitType<PrintEventArgs>
Triggers before the print action starts.
EmitType<BeginEditArgs>
Triggers before the record is to be edit.
EmitType<CellDeselectEventArgs>
Triggers when a particular selected cell is deselected.
EmitType<CellDeselectEventArgs>
Triggers before the selected cell is deselecting.
EmitType<CellEditArgs>
Triggers when the cell is being edited.
EmitType<CellSaveArgs>
Triggers when cell is saved.
EmitType<CellSaveArgs>
Triggers when cell is saved.
EmitType<CellSelectEventArgs>
Triggers after a cell is selected.
EmitType<CellSelectingEventArgs>
Triggers before any cell selection occurs.
EmitType<CheckBoxChangeEventArgs>
Triggers when the check box state change in checkbox column.
EmitType<RowCollapsedEventArgs>
Triggers after the record is collapsed.
EmitType<RowCollapsingEventArgs>
Triggers while collapsing the TreeGrid record
EmitType<ColumnDragEventArgs>
Triggers when column header element is dragged (moved) continuously.
EmitType<ColumnDragEventArgs>
Triggers when column header element drag (move) starts.
EmitType<ColumnDragEventArgs>
Triggers when a column header element is dropped on the target column.
EmitType<MenuEventArgs>
Triggers when click on column menu.
EmitType<ColumnMenuOpenEventArgs>
Triggers before column menu opens.
EmitType<MenuEventArgs>
Triggers when click on context menu.
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before context menu opens.
EmitType<Object>
Triggers when the component is created.
EmitType<Object>
Triggers when data source is populated in the TreeGrid.
EmitType<DataSourceChangedEventArgs>
Triggers when the TreeGrid data is added, deleted and updated. Invoke the done method from the argument to start render after edit operation.
EmitType<DataStateChangeEventArgs>
Triggers when the TreeGrid actions such as Sorting, Paging etc., are done.
In this event,the current view data and total record count should be assigned to the dataSource
based on the action performed.
EmitType<DetailDataBoundEventArgs>
Triggers after detail row expands.
This event triggers at initial expand.
EmitType<ExcelExportCompleteArgs>
Triggers after TreeGrid data is exported to Excel file.
EmitType<ExcelHeaderQueryCellInfoEventArgs>
Triggers before exporting each header cell to Excel file. You can also customize the Excel cells.
EmitType<ExcelQueryCellInfoEventArgs>
Triggers before exporting each cell to Excel file. You can also customize the Excel cells.
EmitType<RowExpandedEventArgs>
Triggers after the record is expanded
EmitType<RowExpandingEventArgs>
Triggers while expanding the TreeGrid record
EmitType<HeaderCellInfoEventArgs>
Triggered for stacked header.
EmitType<Object>
This event allows customization of TreeGrid properties before rendering.
EmitType<PdfExportCompleteArgs>
Triggers after TreeGrid data is exported to PDF document.
EmitType<PdfHeaderQueryCellInfoEventArgs>
Triggers before exporting each header cell to PDF document. You can also customize the PDF cells.
EmitType<PdfQueryCellInfoEventArgs>
Triggers before exporting each cell to PDF document. You can also customize the PDF cells.
EmitType<PrintEventArgs>
Triggers after print action is completed.
EmitType<QueryCellInfoEventArgs>
Triggered every time a request is made to access cell information, element, or data. This will be triggered before the cell element is appended to the TreeGrid element.
EmitType<RecordDoubleClickEventArgs>
Triggers when record is double clicked.
EmitType<ResizeArgs>
Triggers when column resize starts.
EmitType<ResizeArgs>
Triggers when column resize ends.
EmitType<ResizeArgs>
Triggers on column resizing.
EmitType<RowDataBoundEventArgs>
Triggered every time a request is made to access row information, element, or data. This will be triggered before the row element is appended to the TreeGrid element.
EmitType<RowDeselectEventArgs>
Triggers when a selected row is deselected.
EmitType<RowDeselectEventArgs>
Triggers before deselecting the selected row.
EmitType<RowDragEventArgs>
Triggers when row elements are dragged (moved) continuously.
EmitType<RowDragEventArgs>
Triggers when row element’s drag(move) starts.
EmitType<RowDragEventArgs>
Triggers when row element’s before drag(move).
EmitType<RowDragEventArgs>
Triggers when row elements are dropped on the target row.
EmitType<RowSelectEventArgs>
Triggers after a row is selected.
EmitType<RowSelectingEventArgs>
Triggers before row selection occurs.
EmitType<ClickEventArgs>
Triggers when toolbar item is clicked.