@syncfusion/ej2-treegrid 20.4.54 → 21.1.35

package/src/treegrid/models/edit-settings-model.d.ts

@@ -28,10 +28,12 @@ export interface EditSettingsModel {
 
     /**
      * Defines the mode to edit. The available editing modes are:
-     * * Cell
-     * * Row
-     * * Dialog
-     * * Batch
+     * ```props
+     * * Cell :- Defines the editing mode as Cell.
+     * * Row :- Defines the editing mode as Row.
+     * * Dialog :- Defines the editing mode as Dialog.
+     * * Batch :- Defines the editing mode as Batch.
+     * ```
      *
      * @default Cell
      * @isEnumeration true
@@ -40,11 +42,13 @@ export interface EditSettingsModel {
 
     /**
      * Defines the row position for new records. The available row positions are:
-     * * Top
-     * * Bottom
-     * * Above
-     * * Below
-     * * Child
+     * ```props
+     * * Top :- Defines the row position as Top.
+     * * Bottom :- Defines the row position as Bottom.
+     * * Above :- Defines the row position as Above.
+     * * Below :- Defines the row position as Below.
+     * * Child :- Defines the row position as Child.
+     * ```
      * {% codeBlock src='treegrid/newRowPosition/index.md' %}{% endcodeBlock %}
      *
      * @default Top

package/src/treegrid/models/edit-settings.d.ts

@@ -25,10 +25,12 @@ export declare class EditSettings extends ChildProperty<EditSettings> {
     allowDeleting: boolean;
     /**
      * Defines the mode to edit. The available editing modes are:
-     * * Cell
-     * * Row
-     * * Dialog
-     * * Batch
+     * ```props
+     * * Cell :- Defines the editing mode as Cell.
+     * * Row :- Defines the editing mode as Row.
+     * * Dialog :- Defines the editing mode as Dialog.
+     * * Batch :- Defines the editing mode as Batch.
+     * ```
      *
      * @default Cell
      * @isEnumeration true
@@ -36,11 +38,13 @@ export declare class EditSettings extends ChildProperty<EditSettings> {
     mode: EditMode;
     /**
      * Defines the row position for new records. The available row positions are:
-     * * Top
-     * * Bottom
-     * * Above
-     * * Below
-     * * Child
+     * ```props
+     * * Top :- Defines the row position as Top.
+     * * Bottom :- Defines the row position as Bottom.
+     * * Above :- Defines the row position as Above.
+     * * Below :- Defines the row position as Below.
+     * * Child :- Defines the row position as Child.
+     * ```
      * {% codeBlock src='treegrid/newRowPosition/index.md' %}{% endcodeBlock %}
      *
      * @default Top

package/src/treegrid/models/filter-settings-model.d.ts

@@ -161,9 +161,10 @@ export interface FilterSettingsModel {
 
     /**
      * Defines the filter bar modes. The available options are,
-     * * `OnEnter`: Initiates filter operation after Enter key is pressed.
-     * * `Immediate`: Initiates filter operation after a certain time interval. By default, time interval is 1500 ms.
-     *
+     * ```props
+     * *  OnEnter :- Initiates filter operation after Enter key is pressed.
+     * *  Immediate :- Initiates filter operation after a certain time interval. By default, time interval is 1500 ms.
+     * ```
      * @default Syncfusion.EJ2.Grids.FilterBarMode.OnEnter
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.FilterBarMode
@@ -204,14 +205,18 @@ export interface FilterSettingsModel {
     ignoreAccent?: boolean;
 
     /**
-     * Defines the filter types. The available options are,
-     * `Parent`: Shows the filtered record with parent record.
-     * `Child`: Shows the filtered record with child record.
-     * `Both` : shows the filtered record with both parent and child record.
-     * `None` : Shows only filtered record.
+     *  Defines the filter hierarchy modes. The available options are,
+     * ```props
+     * *  Parent :- Shows the filtered record with parent record.
+     * *  Child :- Shows the filtered record with child record.
+     * *  Both :- Shows the filtered record with both parent and child record.
+     * *  None :- Shows only the filtered record.
+     * ```
      * {% codeBlock src='treegrid/hierarchyMode/index.md' %}{% endcodeBlock %}
      *
      * @default Parent
+     * @isEnumeration true
+     * @aspType FilterHierarchyMode
      */
     hierarchyMode?: FilterHierarchyMode;
 

package/src/treegrid/models/filter-settings.d.ts

@@ -146,9 +146,10 @@ export declare class FilterSettings extends ChildProperty<FilterSettings> {
     type: FilterType;
     /**
      * Defines the filter bar modes. The available options are,
-     * * `OnEnter`: Initiates filter operation after Enter key is pressed.
-     * * `Immediate`: Initiates filter operation after a certain time interval. By default, time interval is 1500 ms.
-     *
+     * ```props
+     * *  OnEnter :- Initiates filter operation after Enter key is pressed.
+     * *  Immediate :- Initiates filter operation after a certain time interval. By default, time interval is 1500 ms.
+     * ```
      * @default Syncfusion.EJ2.Grids.FilterBarMode.OnEnter
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.FilterBarMode
@@ -184,14 +185,18 @@ export declare class FilterSettings extends ChildProperty<FilterSettings> {
      */
     ignoreAccent: boolean;
     /**
-     * Defines the filter types. The available options are,
-     * `Parent`: Shows the filtered record with parent record.
-     * `Child`: Shows the filtered record with child record.
-     * `Both` : shows the filtered record with both parent and child record.
-     * `None` : Shows only filtered record.
+     *  Defines the filter hierarchy modes. The available options are,
+     * ```props
+     * *  Parent :- Shows the filtered record with parent record.
+     * *  Child :- Shows the filtered record with child record.
+     * *  Both :- Shows the filtered record with both parent and child record.
+     * *  None :- Shows only the filtered record.
+     * ```
      * {% codeBlock src='treegrid/hierarchyMode/index.md' %}{% endcodeBlock %}
      *
      * @default Parent
+     * @isEnumeration true
+     * @aspType FilterHierarchyMode
      */
     hierarchyMode: FilterHierarchyMode;
 }

package/src/treegrid/models/loading-indicator-model.d.ts

@@ -7,8 +7,10 @@ export interface LoadingIndicatorModel {
 
     /**
      * Defines the loading indicator. The available loading indicator are:
-     * * Spinner
-     * * Shimmer
+     * ```props
+     * * Spinner :- Defines Loading Indicator as Spinner.
+     * * Shimmer :- Defines Loading Indicator as Shimmer.
+     * ```
      *
      * @default Syncfusion.EJ2.Grids.IndicatorType.Spinner
      * @isEnumeration true

package/src/treegrid/models/loading-indicator.d.ts

@@ -6,8 +6,10 @@ import { IndicatorType } from '@syncfusion/ej2-grids';
 export declare class LoadingIndicator extends ChildProperty<LoadingIndicator> {
     /**
      * Defines the loading indicator. The available loading indicator are:
-     * * Spinner
-     * * Shimmer
+     * ```props
+     * * Spinner :- Defines Loading Indicator as Spinner.
+     * * Shimmer :- Defines Loading Indicator as Shimmer.
+     * ```
      *
      * @default Syncfusion.EJ2.Grids.IndicatorType.Spinner
      * @isEnumeration true

package/src/treegrid/models/search-settings-model.d.ts

@@ -60,11 +60,17 @@ export interface SearchSettingsModel {
     key?: string;
 
     /**
-     * Defines the filter types. The available options are,
-     * * `Parent`: Initiates filter operation after Enter key is pressed.
-     * * `Child`: Initiates filter operation after a certain time interval. By default, time interval is 1500 ms.
+     *  Defines the search hierarchy modes. The available options are,
+     * ```props
+     * * Parent :- Shows the searched record with parent record.
+     * * Child :- Shows the searched record with child record.
+     * * Both :- shows the searched record with both parent and child record.
+     * * None :- Shows only the searched record.
+     * ```
      *
      * @default Parent
+     * @isEnumeration true
+     * @aspType FilterHierarchyMode
      */
     hierarchyMode?: FilterHierarchyMode;
 

package/src/treegrid/models/search-settings.d.ts

@@ -55,11 +55,17 @@ export declare class SearchSettings extends ChildProperty<SearchSettings> {
      */
     key: string;
     /**
-     * Defines the filter types. The available options are,
-     * * `Parent`: Initiates filter operation after Enter key is pressed.
-     * * `Child`: Initiates filter operation after a certain time interval. By default, time interval is 1500 ms.
+     *  Defines the search hierarchy modes. The available options are,
+     * ```props
+     * * Parent :- Shows the searched record with parent record.
+     * * Child :- Shows the searched record with child record.
+     * * Both :- shows the searched record with both parent and child record.
+     * * None :- Shows only the searched record.
+     * ```
      *
      * @default Parent
+     * @isEnumeration true
+     * @aspType FilterHierarchyMode
      */
     hierarchyMode: FilterHierarchyMode;
 }

package/src/treegrid/models/selection-settings-model.d.ts

@@ -7,6 +7,11 @@ export interface SelectionSettingsModel {
 
     /**
      * TreeGrid supports row, cell, and both (row and cell) selection mode.
+     * ```props
+     * * Row :- Selects the entire row.
+     * * Cell :- Selects the cell alone.
+     * * Both :- Selects the entire row and its cell.
+     * ```
      *
      * @default Syncfusion.EJ2.Grids.SelectionMode.Row
      * @isEnumeration true
@@ -17,9 +22,10 @@ export interface SelectionSettingsModel {
     /**
      * The cell selection modes are flow and box. It requires the selection
      * [`mode`](#mode) to be either cell or both.
-     * * `Flow`: Selects the range of cells between start index and end index that also includes the other cells of the selected rows.
-     * * `Box`: Selects the range of cells within the start and end column indexes that includes in between cells of rows within the range.
-     *
+     * ```props
+     * * Flow :- Selects the range of cells between start index and end index that also includes the other cells of the selected rows.
+     * * Box :- Selects the range of cells within the start and end column indexes that includes in between cells of rows within the range.
+     * ```
      * @default Syncfusion.EJ2.Grids.CellSelectionMode.Flow
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.CellSelectionMode
@@ -28,9 +34,10 @@ export interface SelectionSettingsModel {
 
     /**
      * Defines options for selection type. They are
-     * * `Single`: Allows selection of only a row or a cell.
-     * * `Multiple`: Allows selection of multiple rows or cells.
-     *
+     * ```props
+     * * Single :- Allows selection of only a row or a cell.
+     * * Multiple :- Allows selection of multiple rows or cells.
+     * ```
      * @default Syncfusion.EJ2.Grids.SelectionType.Single
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.SelectionType
@@ -47,8 +54,10 @@ export interface SelectionSettingsModel {
 
     /**
      * Defines options for checkbox selection Mode. They are
-     * * `Default`: This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one.
-     * * `ResetOnRowClick`: In ResetOnRowClick mode, on clicking a row it will reset previously selected row and also multiple
+     * ```props
+     * * Default :- This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one.
+     * * ResetOnRowClick :- In ResetOnRowClick mode, on clicking a row it will reset previously selected row and also multiple.
+     * ```
      *  rows can be selected by using CTRL or SHIFT key.
      *
      * @default Syncfusion.EJ2.Grids.CheckboxSelectionType.Default

package/src/treegrid/models/selection-settings.d.ts

@@ -6,6 +6,11 @@ import { SelectionMode, CellSelectionMode, SelectionType, CheckboxSelectionType
 export declare class SelectionSettings extends ChildProperty<SelectionSettings> {
     /**
      * TreeGrid supports row, cell, and both (row and cell) selection mode.
+     * ```props
+     * * Row :- Selects the entire row.
+     * * Cell :- Selects the cell alone.
+     * * Both :- Selects the entire row and its cell.
+     * ```
      *
      * @default Syncfusion.EJ2.Grids.SelectionMode.Row
      * @isEnumeration true
@@ -15,9 +20,10 @@ export declare class SelectionSettings extends ChildProperty<SelectionSettings>
     /**
      * The cell selection modes are flow and box. It requires the selection
      * [`mode`](#mode) to be either cell or both.
-     * * `Flow`: Selects the range of cells between start index and end index that also includes the other cells of the selected rows.
-     * * `Box`: Selects the range of cells within the start and end column indexes that includes in between cells of rows within the range.
-     *
+     * ```props
+     * * Flow :- Selects the range of cells between start index and end index that also includes the other cells of the selected rows.
+     * * Box :- Selects the range of cells within the start and end column indexes that includes in between cells of rows within the range.
+     * ```
      * @default Syncfusion.EJ2.Grids.CellSelectionMode.Flow
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.CellSelectionMode
@@ -25,9 +31,10 @@ export declare class SelectionSettings extends ChildProperty<SelectionSettings>
     cellSelectionMode: CellSelectionMode;
     /**
      * Defines options for selection type. They are
-     * * `Single`: Allows selection of only a row or a cell.
-     * * `Multiple`: Allows selection of multiple rows or cells.
-     *
+     * ```props
+     * * Single :- Allows selection of only a row or a cell.
+     * * Multiple :- Allows selection of multiple rows or cells.
+     * ```
      * @default Syncfusion.EJ2.Grids.SelectionType.Single
      * @isEnumeration true
      * @aspType Syncfusion.EJ2.Grids.SelectionType
@@ -42,8 +49,10 @@ export declare class SelectionSettings extends ChildProperty<SelectionSettings>
     persistSelection: boolean;
     /**
      * Defines options for checkbox selection Mode. They are
-     * * `Default`: This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one.
-     * * `ResetOnRowClick`: In ResetOnRowClick mode, on clicking a row it will reset previously selected row and also multiple
+     * ```props
+     * * Default :- This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one.
+     * * ResetOnRowClick :- In ResetOnRowClick mode, on clicking a row it will reset previously selected row and also multiple.
+     * ```
      *  rows can be selected by using CTRL or SHIFT key.
      *
      * @default Syncfusion.EJ2.Grids.CheckboxSelectionType.Default

package/src/treegrid/renderer/render.js

@@ -136,7 +136,7 @@ var Render = /** @class */ (function () {
                 addClass([expandIcon], (expand) ? 'e-treegridexpand' : 'e-treegridcollapse');
                 totalIconsWidth += 18;
                 container.appendChild(expandIcon);
-                emptyExpandIcon.style.width = '7px';
+                emptyExpandIcon.style.width = '4px';
                 totalIconsWidth += 7;
                 container.appendChild(emptyExpandIcon.cloneNode());
             }
@@ -263,7 +263,7 @@ var Render = /** @class */ (function () {
                 }
                 else {
                     var str = 'isStringTemplate';
-                    var result = args.column["" + templateFn](extend({ 'index': '' }, args.data), this.parent, 'template', tempID, this.parent["" + str], undefined, undefined, this.parent['root']);
+                    var result = args.column["" + templateFn](extend({ 'index': '' }, args.data), this.parent, 'template', tempID, this.parent["" + str]);
                     appendChildren(cellElement, result);
                 }
                 delete args.column.template;

package/styles/bootstrap-dark.css

@@ -161,9 +161,6 @@
   width: 20px;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
-  font-size: 12px;
-  line-height: 12px;
-  padding: 2px 0;
   height: 20px;
   width: 20px;
 }
@@ -226,11 +223,8 @@
   vertical-align: middle;
 }
 .e-treegrid .e-hierarchycheckbox .e-frame {
-  font-size: 10px;
-  height: 16px;
-  line-height: 11px;
-  padding: 2px 0;
-  width: 16px;
+  height: 20px;
+  width: 20px;
 }
 .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
 .e-treegrid .e-checkselection .e-movableheader .e-rowcell,

package/styles/highcontrast-light.css

@@ -134,9 +134,6 @@
   width: 20px;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
-  font-size: 12px;
-  line-height: 12px;
-  padding: 2px 0;
   height: 20px;
   width: 20px;
 }
@@ -199,11 +196,8 @@
   vertical-align: middle;
 }
 .e-treegrid .e-hierarchycheckbox .e-frame {
-  font-size: 10px;
-  height: 16px;
-  line-height: 11px;
-  padding: 2px 0;
-  width: 16px;
+  height: 20px;
+  width: 20px;
 }
 .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
 .e-treegrid .e-checkselection .e-movableheader .e-rowcell,

package/styles/treegrid/_bootstrap5-definition.scss

@@ -7,14 +7,14 @@ $error-elem-color: $danger !default;
 // Layout
 
 $error-elem-content: '\e839' !default;
-$treegrid-right-arrow-icon-font-size: 18px !default;
+$treegrid-right-arrow-icon-font-size: $text-lg !default;
 $treegrid-right-arrow-icon-padding: 0 !default;
 $treegrid-right-arrow-icon-vertical-align: unset;
 $treegrid-right-arrow-icon-height: 18px !default;
 $treegrid-right-arrow-icon-width: 16px !default;
 $treegrid-bigger-icon-size: 22px !default;
 $treegrid-smaller-icon-size: 16px !default;
-$treegrid-bigger-icon-font-size: 22px !default;
+$treegrid-bigger-icon-font-size: $font-icon-22 !default;
 $treegrid-frame-bigger-icon-height: 18px !default;
 $treegrid-frame-bigger-icon-width: 18px !default;
 $treegrid-frame-icon-height: 16px !default;

package/styles/treegrid/_fluent-definition.scss

@@ -7,14 +7,14 @@ $error-elem-color: $danger !default;
 // Layout
 
 $error-elem-content: '\e839' !default;
-$treegrid-right-arrow-icon-font-size: 18px !default;
+$treegrid-right-arrow-icon-font-size: $text-lg !default;
 $treegrid-right-arrow-icon-padding: 0 !default;
 $treegrid-right-arrow-icon-vertical-align: unset;
 $treegrid-right-arrow-icon-height: 18px !default;
 $treegrid-right-arrow-icon-width: 16px !default;
 $treegrid-bigger-icon-size: 22px !default;
 $treegrid-smaller-icon-size: 16px !default;
-$treegrid-bigger-icon-font-size: 22px !default;
+$treegrid-bigger-icon-font-size: $font-icon-22 !default;
 $treegrid-frame-bigger-icon-height: 18px !default;
 $treegrid-frame-bigger-icon-width: 18px !default;
 $treegrid-frame-icon-height: 16px !default;

package/styles/treegrid/_tailwind-definition.scss

@@ -7,14 +7,14 @@ $error-elem-color: $danger !default;
 // Layout
 
 $error-elem-content: '\e77e' !default;
-$treegrid-right-arrow-icon-font-size: 18px !default;
+$treegrid-right-arrow-icon-font-size: $text-lg !default;
 $treegrid-right-arrow-icon-padding: 0 !default;
 $treegrid-right-arrow-icon-vertical-align: unset;
 $treegrid-right-arrow-icon-height: 18px !default;
 $treegrid-right-arrow-icon-width: 16px !default;
 $treegrid-bigger-icon-size: 22px !default;
 $treegrid-smaller-icon-size: 16px !default;
-$treegrid-bigger-icon-font-size: 22px !default;
+$treegrid-bigger-icon-font-size: $font-icon-22 !default;
 $treegrid-frame-bigger-icon-height: 18px !default;
 $treegrid-frame-bigger-icon-width: 18px !default;
 $treegrid-frame-icon-height: 16px !default;

package/styles/treegrid/bootstrap-dark.css

@@ -161,9 +161,6 @@
   width: 20px;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
-  font-size: 12px;
-  line-height: 12px;
-  padding: 2px 0;
   height: 20px;
   width: 20px;
 }
@@ -226,11 +223,8 @@
   vertical-align: middle;
 }
 .e-treegrid .e-hierarchycheckbox .e-frame {
-  font-size: 10px;
-  height: 16px;
-  line-height: 11px;
-  padding: 2px 0;
-  width: 16px;
+  height: 20px;
+  width: 20px;
 }
 .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
 .e-treegrid .e-checkselection .e-movableheader .e-rowcell,

package/styles/treegrid/highcontrast-light.css

@@ -134,9 +134,6 @@
   width: 20px;
 }
 .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
-  font-size: 12px;
-  line-height: 12px;
-  padding: 2px 0;
   height: 20px;
   width: 20px;
 }
@@ -199,11 +196,8 @@
   vertical-align: middle;
 }
 .e-treegrid .e-hierarchycheckbox .e-frame {
-  font-size: 10px;
-  height: 16px;
-  line-height: 11px;
-  padding: 2px 0;
-  width: 16px;
+  height: 20px;
+  width: 20px;
 }
 .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
 .e-treegrid .e-checkselection .e-movableheader .e-rowcell,

package/styles/treegrid/_material3-definition.scss

@@ -1,28 +0,0 @@
-// color
-$treegrid-right-arrow-icon-color: $icon-color !default;
-$treegrid-right-arrow-hover-color: $icon-color-hover !default;
-$childborder-color: $primary !default;
-$error-elem-color: $danger !default;
-
-// Layout
-
-$error-elem-content: '\e839' !default;
-$treegrid-right-arrow-icon-font-size: 18px !default;
-$treegrid-right-arrow-icon-padding: 0 !default;
-$treegrid-right-arrow-icon-vertical-align: unset;
-$treegrid-right-arrow-icon-height: 18px !default;
-$treegrid-right-arrow-icon-width: 16px !default;
-$treegrid-bigger-icon-size: 22px !default;
-$treegrid-smaller-icon-size: 16px !default;
-$treegrid-bigger-icon-font-size: 22px !default;
-$treegrid-frame-bigger-icon-height: 18px !default;
-$treegrid-frame-bigger-icon-width: 18px !default;
-$treegrid-frame-icon-height: 16px !default;
-$treegrid-frame-icon-width: 16px !default;
-$treegrid-content-right-padding: 21px !default;
-$treegrid-rowdrag-childborder-border: 2px solid #4f46e5;
-$treegrid-rowdd-topbottom-border: 2px solid #4f46e5 !default;
-$treegrid-rowdd-boxshadow: $primary !default;
-$treegrid-rowdd-childborder-width: 2px 0 0 !default;
-$treegrid-lastrowdd-childborder-width: 2px 0 !default;
-$treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;