diff --git a/grid-sdk/javascript/tree-grid/accessibility.md b/grid-sdk/javascript/tree-grid/accessibility.md index aaf089e1..5f4089e9 100644 --- a/grid-sdk/javascript/tree-grid/accessibility.md +++ b/grid-sdk/javascript/tree-grid/accessibility.md @@ -3,22 +3,21 @@ layout: post title: JavaScript TreeGrid Accessibility | Syncfusion description: Learn how JavaScript TreeGrid supports accessibility with WAI-ARIA roles, keyboard navigation, and ADA, Section 508, and WCAG compliance. platform: grid-sdk -control: Accessibility -publishingplatform: grid-sdk +control: Accessibility documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Accessibility in JavaScript TreeGrid -The Tree Grid component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Tree Grid component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Tree Grid component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | intermediate | -| [Section 508](https://www.section508.gov/) Support | Yes | +| [WCAG 2.2](https://www.w3.org/TR/WCAG22) Support | intermediate | +| [Section 508](https://www.section508.gov) Support | Yes | | Screen Reader Support | intermediate | | Right-To-Left Support | Yes | | Color Contrast | Yes | @@ -41,7 +40,7 @@ The accessibility compliance for the Tree Grid component is outlined below. ## WAI-ARIA attributes -The Tree Grid component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) patterns to meet the accessibility. The following ARIA attributes are used in the Tree Grid component: +The Tree Grid component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid) patterns to meet the accessibility. The following ARIA attributes are used in the Tree Grid component: | Attributes | Purpose | | --- | --- | @@ -57,7 +56,7 @@ The Tree Grid component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/ ## Keyboard interaction -The Tree Grid component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Tree Grid component. +The Tree Grid component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Tree Grid component. Interaction Keys |Description -----|----- diff --git a/grid-sdk/javascript/tree-grid/adaptive.md b/grid-sdk/javascript/tree-grid/adaptive.md index 53f6fa6f..bb1834c1 100644 --- a/grid-sdk/javascript/tree-grid/adaptive.md +++ b/grid-sdk/javascript/tree-grid/adaptive.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Adaptive UI | Syncfusion description: Learn how to enable adaptive UI in JavaScript TreeGrid for optimized mobile, tablet, and small-screen user experiences. platform: grid-sdk -control: Adaptive -publishingplatform: grid-sdk +control: Adaptive documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/grid-sdk The Tree Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, edit dialog and other features adaptively. For example, Filtering opens the UI for user in a pop-up occupying the entire screen. -To make the tree grid adaptive, set the [`enableAdaptiveUI`](../api/treegrid/#enableAdaptiveUI) to true. +To make the tree grid adaptive, set the [`enableAdaptiveUI`](../api/treegrid#enableAdaptiveUI) to true. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/aggregates/aggregates.md b/grid-sdk/javascript/tree-grid/aggregates/aggregates.md index 0aace3db..3074916f 100644 --- a/grid-sdk/javascript/tree-grid/aggregates/aggregates.md +++ b/grid-sdk/javascript/tree-grid/aggregates/aggregates.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Aggregates | Syncfusion description: Learn how to configure, display, and customize aggregate values in JavaScript TreeGrid, including built-in aggregate types and child aggregation. platform: grid-sdk -control: Aggregates -publishingplatform: grid-sdk +control: Aggregates documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -12,15 +11,15 @@ domainurl: https://help.syncfusion.com/grid-sdk # Aggregates in JavaScript TreeGrid Aggregate values are displayed in the TreeGrid footer and in parent row footer for child row aggregate values. It can be configured through `aggregates` property. - [`field`](../../api/treegrid/aggregateColumnModel/#field) and [`type`](../../api/treegrid/aggregateColumnModel/#type) are the minimum properties required to represent an aggregate column. + [`field`](../../api/treegrid/aggregateColumnModel#field) and [`type`](../../api/treegrid/aggregateColumnModel#type) are the minimum properties required to represent an aggregate column. To use the aggregate feature, you have to inject the `Aggregate` module. -By default, the aggregate value can be displayed in the treegrid footer, and footer of child rows. To show the aggregate value in one of the cells, use the [`footerTemplate`](../../api/treegrid/aggregateColumnModel/#footertemplate). +By default, the aggregate value can be displayed in the treegrid footer, and footer of child rows. To show the aggregate value in one of the cells, use the [`footerTemplate`](../../api/treegrid/aggregateColumnModel#footertemplate). ## Built-in aggregate types -The aggregate type should be specified in the [`type`](../../api/treegrid/aggregateColumnModel/#type) property to configure an aggregate column. +The aggregate type should be specified in the [`type`](../../api/treegrid/aggregateColumnModel#type) property to configure an aggregate column. The built-in aggregates are, @@ -32,12 +31,12 @@ The built-in aggregates are, * Truecount * Falsecount -> * Multiple aggregates can be used for an aggregate column by setting the [`type`](../../api/treegrid/aggregateColumnModel/#type) property with an array of aggregate types. +> * Multiple aggregates can be used for an aggregate column by setting the [`type`](../../api/treegrid/aggregateColumnModel#type) property with an array of aggregate types. > * Multiple types for a column is supported only when one of the aggregate templates is used. ## Child aggregate -Aggregate value is calculated for child rows, and it is displayed in the parent row footer. Use the [`childSummary`](../../api/treegrid/aggregateRowModel/#showchildsummary) property to render the child rows aggregate value. +Aggregate value is calculated for child rows, and it is displayed in the parent row footer. Use the [`childSummary`](../../api/treegrid/aggregateRowModel#showchildsummary) property to render the child rows aggregate value. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/aggregates/custom-aggregate.md b/grid-sdk/javascript/tree-grid/aggregates/custom-aggregate.md index 344a171e..9261bf22 100644 --- a/grid-sdk/javascript/tree-grid/aggregates/custom-aggregate.md +++ b/grid-sdk/javascript/tree-grid/aggregates/custom-aggregate.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Custom Aggregate | Syncfusion description: Learn about implementing custom aggregates in the JavaScript TreeGrid, including configuration and usage of custom aggregation functions. platform: grid-sdk -control: Custom aggregate -publishingplatform: grid-sdk +control: Custom aggregate documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Custom Aggregate in JavaScript TreeGrid -To calculate the aggregate value with your own aggregate functions, use the custom aggregate option. To use custom aggregation, specify the [`type`](../../api/treegrid/aggregateColumnModel/#type) as `Custom`, and provide the custom aggregate function in the [`customAggregate`](../../api/treegrid/aggregateColumnModel/#customaggregate) property. +To calculate the aggregate value with your own aggregate functions, use the custom aggregate option. To use custom aggregation, specify the [`type`](../../api/treegrid/aggregateColumnModel#type) as `Custom`, and provide the custom aggregate function in the [`customAggregate`](../../api/treegrid/aggregateColumnModel#customaggregate) property. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/aggregates/footer-aggregate.md b/grid-sdk/javascript/tree-grid/aggregates/footer-aggregate.md index dc2e0fbc..4a469469 100644 --- a/grid-sdk/javascript/tree-grid/aggregates/footer-aggregate.md +++ b/grid-sdk/javascript/tree-grid/aggregates/footer-aggregate.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Footer Aggregate | Syncfusion description: Learn how to configure and display footer aggregate values in JavaScript TreeGrid, including API usage, templates, and formatting options. platform: grid-sdk -control: Footer aggregate -publishingplatform: grid-sdk +control: Footer aggregate documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Footer Aggregate in JavaScript TreeGrid -Footer aggregate value is calculated for all the rows, and it is displayed in the footer cells. Use the [`footerTemplate`](../../api/treegrid/aggregateColumnModel/#footertemplate) property to render the aggregate value in footer cells. +Footer aggregate value is calculated for all the rows, and it is displayed in the footer cells. Use the [`footerTemplate`](../../api/treegrid/aggregateColumnModel#footertemplate) property to render the aggregate value in footer cells. {% if page.publishingplatform == "typescript" %} @@ -40,11 +39,11 @@ Footer aggregate value is calculated for all the rows, and it is displayed in th {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/aggregates-cs3" %} {% endif %} -> The aggregate values must be accessed inside the template using their corresponding [`type`](../../api/treegrid/aggregateColumnModel/#type) name. +> The aggregate values must be accessed inside the template using their corresponding [`type`](../../api/treegrid/aggregateColumnModel#type) name. ## How to format aggregate value -You can format the aggregate value result by using the [`format`](../../api/treegrid/aggregateColumnModel/#type) property. +You can format the aggregate value result by using the [`format`](../../api/treegrid/aggregateColumnModel#type) property. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/cell/auto-wrap.md b/grid-sdk/javascript/tree-grid/cell/auto-wrap.md index 44ae8641..22abbf94 100644 --- a/grid-sdk/javascript/tree-grid/cell/auto-wrap.md +++ b/grid-sdk/javascript/tree-grid/cell/auto-wrap.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Auto Wrap | Syncfusion description: Learn how to enable auto wrap in JavaScript TreeGrid to display header and cell content across multiple lines using flexible text wrapping modes. platform: grid-sdk -control: Auto wrap -publishingplatform: grid-sdk +control: Auto wrap documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -12,8 +11,8 @@ domainurl: https://help.syncfusion.com/grid-sdk # Auto Wrap in JavaScript TreeGrid The auto wrap allows the cell content of the treegrid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words. -To enable auto wrap, set the [`allowTextWrap`](../../api/treegrid/#allowtextwrap) property to `true`. -You can configure the auto wrap mode by setting the [`textWrapSettings.wrapMode`](../../api/treegrid/#textwrapsettings) property. +To enable auto wrap, set the [`allowTextWrap`](../../api/treegrid#allowtextwrap) property to `true`. +You can configure the auto wrap mode by setting the [`textWrapSettings.wrapMode`](../../api/treegrid#textwrapsettings) property. There are three types of `wrapMode`. They are: diff --git a/grid-sdk/javascript/tree-grid/cell/cell.md b/grid-sdk/javascript/tree-grid/cell/cell.md index 0b55c695..fd56eb65 100644 --- a/grid-sdk/javascript/tree-grid/cell/cell.md +++ b/grid-sdk/javascript/tree-grid/cell/cell.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Cells | Syncfusion description: Learn how to customize and format cells in JavaScript TreeGrid, including tooltips, styling, clip mode, autowrap, and cell templates. platform: grid-sdk -control: Cell -publishingplatform: grid-sdk +control: Cell documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,8 +12,8 @@ domainurl: https://help.syncfusion.com/grid-sdk ## Customize cell styles -The appearance of cells can be customized by using the [`queryCellInfo`](../../api/treegrid/#querycellinfo) event. -The [`queryCellInfo`](../../api/treegrid/#querycellinfo) event triggers for every cell. In that event handler, you can get `QueryCellInfoEventArgs` that contains the details of the cell. +The appearance of cells can be customized by using the [`queryCellInfo`](../../api/treegrid#querycellinfo) event. +The [`queryCellInfo`](../../api/treegrid#querycellinfo) event triggers for every cell. In that event handler, you can get `QueryCellInfoEventArgs` that contains the details of the cell. {% if page.publishingplatform == "typescript" %} @@ -45,7 +44,7 @@ The [`queryCellInfo`](../../api/treegrid/#querycellinfo) event triggers for ever ## Custom attributes -You can customize the treegrid cells by adding a CSS class to the [`customAttribute`](../../api/treegrid/column/#customattributes) property of the column. +You can customize the treegrid cells by adding a CSS class to the [`customAttribute`](../../api/treegrid/column#customattributes) property of the column. ```css .e-attr { @@ -90,7 +89,7 @@ In the below example, we have customized the cells of `TaskID` and `StartDate` c ## Grid lines -The [`gridLines`](../../api/treegrid/#gridlines) have option to display cell border and it can be defined by the [`gridLines`](../../api/treegrid/#gridlines) property. +The [`gridLines`](../../api/treegrid#gridlines) have option to display cell border and it can be defined by the [`gridLines`](../../api/treegrid#gridlines) property. The available modes of grid lines are: diff --git a/grid-sdk/javascript/tree-grid/cell/clip-mode.md b/grid-sdk/javascript/tree-grid/cell/clip-mode.md index d53eea95..baa45ba6 100644 --- a/grid-sdk/javascript/tree-grid/cell/clip-mode.md +++ b/grid-sdk/javascript/tree-grid/cell/clip-mode.md @@ -3,17 +3,16 @@ layout: post title: JavaScript TreeGrid Clip Mode | Syncfusion description: Learn how to configure clip mode in JavaScript TreeGrid to manage overflowing cell content using clipping, ellipsis, or ellipsis with tooltip display. platform: grid-sdk -control: Clip mode -publishingplatform: grid-sdk +control: Clip mode documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Clip Mode in JavaScript TreeGrid -The clip mode provides options to display its overflow cell content and it can be defined by the [`columns.clipMode`](../../api/treegrid/column/#clipmode) property. +The clip mode provides options to display its overflow cell content and it can be defined by the [`columns.clipMode`](../../api/treegrid/column#clipmode) property. -There are three types of [`clipMode`](../../api/treegrid/column/#clipmode). They are: +There are three types of [`clipMode`](../../api/treegrid/column#clipmode). They are: * **`Clip`**: Truncates the cell content when it overflows its area. * **`Ellipsis`**: Displays ellipsis when the cell content overflows its area. @@ -46,4 +45,4 @@ There are three types of [`clipMode`](../../api/treegrid/column/#clipmode). They {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/cell-cs4" %} {% endif %} ->By default, [`columns.clipMode`](../../api/treegrid/column/#clipmode) value is `Ellipsis`. \ No newline at end of file +>By default, [`columns.clipMode`](../../api/treegrid/column#clipmode) value is `Ellipsis`. \ No newline at end of file diff --git a/grid-sdk/javascript/tree-grid/cell/content.md b/grid-sdk/javascript/tree-grid/cell/content.md index 6cdbe794..2a6e6cdd 100644 --- a/grid-sdk/javascript/tree-grid/cell/content.md +++ b/grid-sdk/javascript/tree-grid/cell/content.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Cell Content | Syncfusion description: Learn how to display HTML content in JavaScript TreeGrid headers and cells using disableHtmlEncode to render formatted content and custom markup. platform: grid-sdk -control: Content -publishingplatform: grid-sdk +control: Content documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # HTML Content in JavaScript TreeGrid -The HTML tags can be displayed in the TreeGrid header and content by enabling the [`disableHtmlEncode`](../../api/treegrid/column/#disablehtmlencode) property. +The HTML tags can be displayed in the TreeGrid header and content by enabling the [`disableHtmlEncode`](../../api/treegrid/column#disablehtmlencode) property. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/clipboard.md b/grid-sdk/javascript/tree-grid/clipboard.md index fe4a8635..4fa1cc63 100644 --- a/grid-sdk/javascript/tree-grid/clipboard.md +++ b/grid-sdk/javascript/tree-grid/clipboard.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Clipboard | Syncfusion description: Learn how to use clipboard operations in JavaScript TreeGrid, including copy, paste, hierarchy modes, and autofill for rows and cells. platform: grid-sdk -control: Clipboard -publishingplatform: grid-sdk +control: Clipboard documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -49,7 +48,7 @@ Interaction keys |Description ## Copy to clipboard by external buttons -To copy selected rows or cells data into the clipboard with help of external buttons, you need to invoke the [`copy`](../api/treegrid/#copy) method. +To copy selected rows or cells data into the clipboard with help of external buttons, you need to invoke the [`copy`](../api/treegrid#copy) method. {% if page.publishingplatform == "typescript" %} @@ -80,7 +79,7 @@ To copy selected rows or cells data into the clipboard with help of external but ## Copy Hierarchy Modes -Tree Grid provides support for a set of copy modes with [`copyHierarchyMode`](../api/treegrid/#copyhierarchymode) property. +Tree Grid provides support for a set of copy modes with [`copyHierarchyMode`](../api/treegrid#copyhierarchymode) property. The below are the type of filter mode available in TreeGrid. * **Parent** : This is the default copy hierarchy mode in Tree Grid. Clipboard value have the selected records with its parent records. If the selected records not have any parent record then the selected record will be in clipboard. diff --git a/grid-sdk/javascript/tree-grid/columns/auto-fit-columns.md b/grid-sdk/javascript/tree-grid/columns/auto-fit-columns.md index b7a96e63..18a8c188 100644 --- a/grid-sdk/javascript/tree-grid/columns/auto-fit-columns.md +++ b/grid-sdk/javascript/tree-grid/columns/auto-fit-columns.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Auto Fit Columns | Syncfusion description: Learn how to automatically adjust column widths in JavaScript TreeGrid to fit content and improve data presentation. platform: grid-sdk -control: Auto fit columns -publishingplatform: grid-sdk +control: Auto fit columns documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Auto Fit Columns in JavaScript TreeGrid -The [`autoFitColumns`](../../api/treegrid/#autofitcolumns) method resizes the column to fit the widest cell's content without wrapping. You can autofit a specific column at initial rendering by invoking the [`autoFitColumns`](../../api/treegrid/#autofitcolumns) method in [`dataBound`](../../api/treegrid/#databound) event. +The [`autoFitColumns`](../../api/treegrid#autofitcolumns) method resizes the column to fit the widest cell's content without wrapping. You can autofit a specific column at initial rendering by invoking the [`autoFitColumns`](../../api/treegrid#autofitcolumns) method in [`dataBound`](../../api/treegrid#databound) event. {% if page.publishingplatform == "typescript" %} @@ -40,4 +39,4 @@ The [`autoFitColumns`](../../api/treegrid/#autofitcolumns) method resizes the co {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/columns-cs1" %} {% endif %} -> You can autofit all the columns by invoking the [`autoFitColumns`](../../api/treegrid/column/#autofitcolumns) method without column names. \ No newline at end of file +> You can autofit all the columns by invoking the [`autoFitColumns`](../../api/treegrid/column#autofitcolumns) method without column names. \ No newline at end of file diff --git a/grid-sdk/javascript/tree-grid/columns/column-chooser.md b/grid-sdk/javascript/tree-grid/columns/column-chooser.md index d2e02eb9..a885a100 100644 --- a/grid-sdk/javascript/tree-grid/columns/column-chooser.md +++ b/grid-sdk/javascript/tree-grid/columns/column-chooser.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Column Chooser | Syncfusion description: Learn how to use the column chooser in JavaScript TreeGrid to show, hide, and manage column visibility dynamically. platform: grid-sdk -control: Column chooser -publishingplatform: grid-sdk +control: Column chooser documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Column Chooser in JavaScript TreeGrid -The column chooser has options to show or hide columns dynamically. It can be enabled by defining the [`showColumnChooser`](../../api/treegrid/#showcolumnchooser) as true. +The column chooser has options to show or hide columns dynamically. It can be enabled by defining the [`showColumnChooser`](../../api/treegrid#showcolumnchooser) as true. To use the column chooser, inject the **Column Chooser** module in the treegrid. @@ -42,12 +41,12 @@ To use the column chooser, inject the **Column Chooser** module in the treegrid. {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/columns-cs2" %} {% endif %} -> You can hide the column names in column chooser by defining the [`columns.showInColumnChooser`](../../api/treegrid/column/#showincolumnchooser) as false. +> You can hide the column names in column chooser by defining the [`columns.showInColumnChooser`](../../api/treegrid/column#showincolumnchooser) as false. ## Open column chooser by external button The Column chooser can be displayed on a page through external button by invoking -the [`openColumnChooser`](../../api/treegrid/#opencolumnchooser) method with **X** and **Y** axis positions. +the [`openColumnChooser`](../../api/treegrid#opencolumnchooser) method with **X** and **Y** axis positions. {% if page.publishingplatform == "typescript" %} @@ -78,7 +77,7 @@ the [`openColumnChooser`](../../api/treegrid/#opencolumnchooser) method with **X ## Column chooser template in Syncfusion JavaScript TreeGrid -The column chooser template feature allows full customization of the column chooser’s header, content, and footer, making it easier to manage column visibility. To enable the column chooser, set [showColumnChooser](../../api/treegrid/#showcolumnmenu) to **true** and add **ColumnChooser** to the [toolbar](../../api/treegrid/#toolbar) property. +The column chooser template feature allows full customization of the column chooser’s header, content, and footer, making it easier to manage column visibility. To enable the column chooser, set [showColumnChooser](../../api/treegrid#showcolumnmenu) to **true** and add **ColumnChooser** to the [toolbar](../../api/treegrid#toolbar) property. To implement a custom column chooser template in the TreeGrid, use the following properties: @@ -90,7 +89,7 @@ To implement a custom column chooser template in the TreeGrid, use the following * **columnChooserSettings.renderCustomColumnChooser** - Allows you to override the default column chooser UI with a fully customized layout. -In this example, a Syncfusion TreeView component is rendered inside the column chooser. To use the TreeView component, install the Syncfusion TreeView package as described in the [documentation](../../treeview/getting-started). The `columnChooserSettings.template` property defines a element with the `id` set to **tree**, providing as a container for the TreeView component. The `columnChooserSettings.renderCustomColumnChooser` method initializes the TreeView with checkboxes and appends it to this template. Checkbox selection is handled using the [nodeClicked](../../api/treeview/#nodeclicked) and [keyPress](../../api/treeview/#keypress) events, which organize columns into **Task Info**, **Schedule**, and **Progress**. +In this example, a Syncfusion TreeView component is rendered inside the column chooser. To use the TreeView component, install the Syncfusion TreeView package as described in the [documentation](../../treeview/getting-started). The `columnChooserSettings.template` property defines a element with the `id` set to **tree**, providing as a container for the TreeView component. The `columnChooserSettings.renderCustomColumnChooser` method initializes the TreeView with checkboxes and appends it to this template. Checkbox selection is handled using the [nodeClicked](../../api/treeview#nodeclicked) and [keyPress](../../api/treeview#keypress) events, which organize columns into **Task Info**, **Schedule**, and **Progress**. The column chooser footer is customized using `columnChooserSettings.footerTemplate`, replacing the default buttons with customized **Apply** and **Close** buttons. The **Apply** button updates column visibility based on selection, while the **Close** button closes the column chooser via the `onClick` event. Additionally, the header is customized using `columnChooserSettings.headerTemplate` to include a title and an icon. diff --git a/grid-sdk/javascript/tree-grid/columns/column-menu.md b/grid-sdk/javascript/tree-grid/columns/column-menu.md index 803043cd..5910eb3f 100644 --- a/grid-sdk/javascript/tree-grid/columns/column-menu.md +++ b/grid-sdk/javascript/tree-grid/columns/column-menu.md @@ -3,17 +3,16 @@ layout: post title: JavaScript TreeGrid Column Menu | Syncfusion description: Learn how to use the column menu in JavaScript TreeGrid for sorting, filtering, column visibility, and other column actions. platform: grid-sdk -control: Column menu -publishingplatform: grid-sdk +control: Column menu documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Column Menu in JavaScript TreeGrid -The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the [`showColumnMenu`](../../api/treegrid/#showcolumnmenu) property as true. +The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the [`showColumnMenu`](../../api/treegrid#showcolumnmenu) property as true. -By default, column menu is enabled for all columns and you can disable column menu for a particular column by defining the [`showColumnMenu`](../../api/treegrid/column/#showcolumnmenu) as false in [`columns`](../../api/treegrid#column) property. +By default, column menu is enabled for all columns and you can disable column menu for a particular column by defining the [`showColumnMenu`](../../api/treegrid/column#showcolumnmenu) as false in [`columns`](../../api/treegrid#column) property. To use the column menu, inject the `ColumnMenu` module in the treegrid. @@ -56,11 +55,11 @@ The default items are displayed in following table. ## Custom column menu item -The custom column menu items can be added to the column menu by defining the [`columnMenuItems`](https://ej2.syncfusion.com/documentation/api/treegrid/#columnmenuitems) as a collection of the [`MenuItemModel`](https://ej2.syncfusion.com/documentation/api/context-menu/menuItemModel). +The custom column menu items can be added to the column menu by defining the [`columnMenuItems`](https://ej2.syncfusion.com/documentation/api/treegrid#columnmenuitems) as a collection of the [`MenuItemModel`](https://ej2.syncfusion.com/documentation/api/context-menu/menuItemModel). -The action for custom column menu items can be performed using [`columnMenuClick`](https://ej2.syncfusion.com/documentation/api/treegrid/#contextmenuclick) event. +The action for custom column menu items can be performed using [`columnMenuClick`](https://ej2.syncfusion.com/documentation/api/treegrid#contextmenuclick) event. -In the below example, clear sorting action was performed through `columnMenuItems` by using [`clearSorting`](https://ej2.syncfusion.com/documentation/api/treegrid/#clearsorting) method of the Tree Grid. +In the below example, clear sorting action was performed through `columnMenuItems` by using [`clearSorting`](https://ej2.syncfusion.com/documentation/api/treegrid#clearsorting) method of the Tree Grid. {% if page.publishingplatform == "typescript" %} @@ -91,7 +90,7 @@ In the below example, clear sorting action was performed through `columnMenuItem ## Customize menu items for particular columns -It is possible to customize specific items from the column menu for particular [`columns`](../../api/treegrid#column) using [`columnMenuOpen`](https://ej2.syncfusion.com/documentation/api/treegrid/#columnmenuopen) event. `columnMenuOpen` event can be utilized to determine which items to customize in column menu. +It is possible to customize specific items from the column menu for particular [`columns`](../../api/treegrid#column) using [`columnMenuOpen`](https://ej2.syncfusion.com/documentation/api/treegrid#columnmenuopen) event. `columnMenuOpen` event can be utilized to determine which items to customize in column menu. The following example shows how to hide the built-in **Filter** menu item when the column menu is opened for the **taskName** column, while allowing it to remain visible for all other columns. diff --git a/grid-sdk/javascript/tree-grid/columns/column-reorder.md b/grid-sdk/javascript/tree-grid/columns/column-reorder.md index cafda913..7c49ea8a 100644 --- a/grid-sdk/javascript/tree-grid/columns/column-reorder.md +++ b/grid-sdk/javascript/tree-grid/columns/column-reorder.md @@ -3,17 +3,16 @@ layout: post title: JavaScript TreeGrid Column Reorder | Syncfusion description: Learn how to reorder columns in JavaScript TreeGrid using drag-and-drop functionality and customize column arrangement. platform: grid-sdk -control: Column reorder -publishingplatform: grid-sdk +control: Column reorder documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Column Reorder in JavaScript TreeGrid -Reordering can be done by drag and drop of a particular column header from one index to another index within the treegrid. To enable reordering, set the [`allowReordering`](../../api/treegrid/#allowreordering) to true. +Reordering can be done by drag and drop of a particular column header from one index to another index within the treegrid. To enable reordering, set the [`allowReordering`](../../api/treegrid#allowreordering) to true. -To use reordering, inject the [`Reorder`](../../api/treegrid/#reordermodule) module in the treegrid. +To use reordering, inject the [`Reorder`](../../api/treegrid#reordermodule) module in the treegrid. {% if page.publishingplatform == "typescript" %} @@ -42,11 +41,11 @@ To use reordering, inject the [`Reorder`](../../api/treegrid/#reordermodule) mod {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/columns-cs6" %} {% endif %} -> You can disable reordering a particular column by setting the [`columns.allowReordering`](../../api/treegrid/column/#reordermodule) to false. +> You can disable reordering a particular column by setting the [`columns.allowReordering`](../../api/treegrid/column#reordermodule) to false. ## Reorder multiple columns -Multiple columns can be reordered at a time by using the [`reorderColumns`](../../api/treegrid/column/#reordercolumns) method. +Multiple columns can be reordered at a time by using the [`reorderColumns`](../../api/treegrid/column#reordercolumns) method. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/columns/column-resizing.md b/grid-sdk/javascript/tree-grid/columns/column-resizing.md index 1a403102..7e82aab3 100644 --- a/grid-sdk/javascript/tree-grid/columns/column-resizing.md +++ b/grid-sdk/javascript/tree-grid/columns/column-resizing.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Column Resizing | Syncfusion description: Learn how to resize columns in JavaScript TreeGrid, including column width adjustment, resizing modes, and auto-fit options. platform: grid-sdk -control: Column resizing -publishingplatform: grid-sdk +control: Column resizing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Column Resizing in JavaScript TreeGrid -Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the [`allowResizing`](../../api/treegrid/#allowresizing) property to true. +Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the [`allowResizing`](../../api/treegrid#allowresizing) property to true. To use the column resize, inject `Resize` module in the treegrid. @@ -42,12 +41,12 @@ To use the column resize, inject `Resize` module in the treegrid. {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/resize-cs1" %} {% endif %} -> * You can disable resizing for a particular column by setting the [`columns.allowResizing`](../../api/treegrid/column/#allowresizing) to false. +> * You can disable resizing for a particular column by setting the [`columns.allowResizing`](../../api/treegrid/column#allowresizing) to false. > * In RTL mode, you can click and drag the left edge of the header cell to resize the column. ## Min and max width -Column resize can be restricted between minimum and maximum width by defining the [`columns->minWidth`](../../api/treegrid/column/#minwidth) and [`columns->maxWidth`](../../api/treegrid/column/#maxwidth). +Column resize can be restricted between minimum and maximum width by defining the [`columns->minWidth`](../../api/treegrid/column#minwidth) and [`columns->maxWidth`](../../api/treegrid/column#maxwidth). In the following sample, minimum and maximum width are defined for `Duration`, and `Task Name` columns. diff --git a/grid-sdk/javascript/tree-grid/columns/column-spanning.md b/grid-sdk/javascript/tree-grid/columns/column-spanning.md index b2a5d62e..351dc765 100644 --- a/grid-sdk/javascript/tree-grid/columns/column-spanning.md +++ b/grid-sdk/javascript/tree-grid/columns/column-spanning.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Column Spanning | Syncfusion description: Learn how to configure column spanning in JavaScript TreeGrid, including merging cells and customizing column layouts. platform: grid-sdk -control: Column spanning -publishingplatform: grid-sdk +control: Column spanning documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/columns/column-template.md b/grid-sdk/javascript/tree-grid/columns/column-template.md index 6a068792..bd83d34c 100644 --- a/grid-sdk/javascript/tree-grid/columns/column-template.md +++ b/grid-sdk/javascript/tree-grid/columns/column-template.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Column Template | Syncfusion description: Learn how to use column templates in JavaScript TreeGrid to display custom content, images, buttons, and formatted data in cells. platform: grid-sdk -control: Column template -publishingplatform: grid-sdk +control: Column template documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Column Template in JavaScript TreeGrid -The column [`template`](../../api/treegrid/column/#template) has options to display custom element instead of a field value in the column. +The column [`template`](../../api/treegrid/column#template) has options to display custom element instead of a field value in the column. {% if page.publishingplatform == "typescript" %} @@ -39,7 +38,7 @@ The column [`template`](../../api/treegrid/column/#template) has options to disp {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/column-template-cs1" %} {% endif %} -> TreeGrid actions such as editing, filtering and sorting etc. will depend upon the column [`field`](../../api/treegrid/column/#field). If the [`field`](../../api/treegrid/column/#field) is not specified in the template column, the treegrid actions cannot be performed. +> TreeGrid actions such as editing, filtering and sorting etc. will depend upon the column [`field`](../../api/treegrid/column#field). If the [`field`](../../api/treegrid/column#field) is not specified in the template column, the treegrid actions cannot be performed. ## Using condition template diff --git a/grid-sdk/javascript/tree-grid/columns/columns.md b/grid-sdk/javascript/tree-grid/columns/columns.md index 9c92a584..1e7ca832 100644 --- a/grid-sdk/javascript/tree-grid/columns/columns.md +++ b/grid-sdk/javascript/tree-grid/columns/columns.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Columns | Syncfusion description: Learn how to configure and customize columns in JavaScript TreeGrid, including column types, visibility, templates, and formatting options. platform: grid-sdk -control: Columns -publishingplatform: grid-sdk +control: Columns documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -12,17 +11,17 @@ domainurl: https://help.syncfusion.com/grid-sdk # Columns in JavaScript TreeGrid The column definitions are used as the [`dataSource`](../../api/treegrid#dataSource) schema in the TreeGrid. This plays a vital role in rendering column values in the required format. -The treegrid operations such as sorting, filtering and searching etc. are performed based on column definitions. The [`field`](../../api/treegrid/column/#field) property of the [`columns`](../../api/treegrid#column) +The treegrid operations such as sorting, filtering and searching etc. are performed based on column definitions. The [`field`](../../api/treegrid/column#field) property of the [`columns`](../../api/treegrid#column) is necessary to map the data source values in TreeGrid columns. -> 1. If the column [`field`](../../api/treegrid/column/#field) is not specified in the dataSource, the column values will be empty. -> 2. If the [`field`](../../api/treegrid/column/#field) name contains “dot” operator, it is considered as complex binding. +> 1. If the column [`field`](../../api/treegrid/column#field) is not specified in the dataSource, the column values will be empty. +> 2. If the [`field`](../../api/treegrid/column#field) name contains “dot” operator, it is considered as complex binding. [`treeColumnIndex`](../../api/treegrid#treecolumnindex) property denotes the column that is used to expand and collapse child rows. ## Format -To format cell values based on specific culture, use the [`columns.format`](../../api/treegrid/column/#format) property. The TreeGrid uses [Internalization](../../common/internationalization/) library to format [`number`](../../common/internationalization/#number-formatting) and [`date`](../../common/internationalization/#manipulating-datetime) +To format cell values based on specific culture, use the [`columns.format`](../../api/treegrid/column#format) property. The TreeGrid uses [Internalization](../../common/internationalization) library to format [`number`](../../common/internationalization#number-formatting) and [`date`](../../common/internationalization#manipulating-datetime) values. {% if page.publishingplatform == "typescript" %} @@ -52,7 +51,7 @@ values. {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/columns-cs7" %} {% endif %} -> By default, the [`number`](../../common/internationalization/#number-formatting) and [`date`](../../common/internationalization/#manipulating-datetime) values are formatted in `en-US` locale. +> By default, the [`number`](../../common/internationalization#number-formatting) and [`date`](../../common/internationalization#manipulating-datetime) values are formatted in `en-US` locale. ### Number formatting @@ -64,13 +63,13 @@ N | Denotes numeric type. | The numeric format is followed by integer value as N C | Denotes currency type. | The currency format is followed by integer value as C2, C3. etc which denotes the number of precision to be allowed. P | Denotes percentage type | The percentage format expects the input value to be in the range of 0 to 1. For example the cell value `0.2` is formatted as `20%`. The percentage format is followed by integer value as P2, P3. etc which denotes the number of precision to be allowed. -Please refer to the link to know more about [`Number formatting`](../../common/internationalization/#number-formatting). +Please refer to the link to know more about [`Number formatting`](../../common/internationalization#number-formatting). ### Date formatting You can format date values either using built-in date format string or custom format string. -For built-in date format you can specify [`columns.format`](../../api/treegrid/column/#format) property as string (Example: `yMd`). Please refer to the link to know more about [`Date formatting`](../../common/internationalization/#manipulating-datetime). +For built-in date format you can specify [`columns.format`](../../api/treegrid/column#format) property as string (Example: `yMd`). Please refer to the link to know more about [`Date formatting`](../../common/internationalization#manipulating-datetime). You can also use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table. @@ -111,7 +110,7 @@ Format | Formatted value ## Lock columns -You can lock columns by using [`column.lockColumn`](../../api/treegrid/column/#lockcolumn) property. The locked columns will be moved to the first position. Also you can’t reorder its position. +You can lock columns by using [`column.lockColumn`](../../api/treegrid/column#lockcolumn) property. The locked columns will be moved to the first position. Also you can’t reorder its position. In the below example, duration column is locked and its reordering functionality is disabled. @@ -144,10 +143,10 @@ In the below example, duration column is locked and its reordering functionality ## Column type -Column type can be specified using the [`columns.type`](../../api/treegrid/column/#type) property. It specifies the type of data the column binds. +Column type can be specified using the [`columns.type`](../../api/treegrid/column#type) property. It specifies the type of data the column binds. -If the [`format`](../../api/treegrid/column/#format) is defined for a column, the column uses [`type`](../../api/treegrid/column/#type) to select the appropriate format option ([number](../../common/internationalization/#number-formatting) - or [date](../../common/internationalization/#manipulating-datetime)). +If the [`format`](../../api/treegrid/column#format) is defined for a column, the column uses [`type`](../../api/treegrid/column#type) to select the appropriate format option ([number](../../common/internationalization#number-formatting) + or [date](../../common/internationalization#manipulating-datetime)). TreeGrid column supports the following types: @@ -157,11 +156,11 @@ TreeGrid column supports the following types: * date * datetime -> If the [`type`](../../api/treegrid/column/#type) is not defined, it will be determined from the first record of the [`dataSource`](../../api/treegrid/column/#datasource). +> If the [`type`](../../api/treegrid/column#type) is not defined, it will be determined from the first record of the [`dataSource`](../../api/treegrid/column#datasource). ## Controlling Tree Grid actions -You can enable or disable treegrid action for a particular column by setting the [`allowFiltering`](../../api/treegrid/column/#allowfiltering), and [`allowSorting`](../../api/treegrid/column/#allowsorting) properties. +You can enable or disable treegrid action for a particular column by setting the [`allowFiltering`](../../api/treegrid/column#allowfiltering), and [`allowSorting`](../../api/treegrid/column#allowsorting) properties. {% if page.publishingplatform == "typescript" %} @@ -192,7 +191,7 @@ You can enable or disable treegrid action for a particular column by setting the ## Show/hide columns by external button -You can show or hide treegrid columns dynamically using external buttons by invoking the [`showColumns`](../../api/treegrid/#showcolumns) or [`hideColumns`](../../api/treegrid/#hidecolumns) method. +You can show or hide treegrid columns dynamically using external buttons by invoking the [`showColumns`](../../api/treegrid#showcolumns) or [`hideColumns`](../../api/treegrid#hidecolumns) method. {% if page.publishingplatform == "typescript" %} @@ -223,7 +222,7 @@ You can show or hide treegrid columns dynamically using external buttons by invo ## ValueAccessor -The [`valueAccessor`](../../api/treegrid/column/#valueaccessor) is used to access/manipulate the value of display data. You can achieve custom value formatting by using the [`valueAccessor`](../../api/treegrid/column/#valueaccessor). +The [`valueAccessor`](../../api/treegrid/column#valueaccessor) is used to access/manipulate the value of display data. You can achieve custom value formatting by using the [`valueAccessor`](../../api/treegrid/column#valueaccessor). {% if page.publishingplatform == "typescript" %} @@ -254,9 +253,9 @@ The [`valueAccessor`](../../api/treegrid/column/#valueaccessor) is used to acces ### Display array type columns -You can bind an array of objects in a column by using the [`valueAccessor`](../../api/treegrid/column/#valueaccessor) property. +You can bind an array of objects in a column by using the [`valueAccessor`](../../api/treegrid/column#valueaccessor) property. In this example, the name field has an array of two objects, FirstName and LastName. These two objects are joined and bound to a column using the -[`valueAccessor`](../../api/treegrid/column/#valueaccessor). +[`valueAccessor`](../../api/treegrid/column#valueaccessor). {% if page.publishingplatform == "typescript" %} @@ -287,7 +286,7 @@ In this example, the name field has an array of two objects, FirstName and LastN ### Expression column -You can achieve the expression column by using the [`valueAccessor`](../../api/treegrid/column/#valueaccessor) property. +You can achieve the expression column by using the [`valueAccessor`](../../api/treegrid/column#valueaccessor) property. {% if page.publishingplatform == "typescript" %} @@ -318,7 +317,7 @@ You can achieve the expression column by using the [`valueAccessor`](../../api/t ## How to render boolean values as checkbox -To render boolean values as checkbox in columns, you need to set [`displayAsCheckBox`](../../api/treegrid/column/#displayascheckbox) property as `true`. +To render boolean values as checkbox in columns, you need to set [`displayAsCheckBox`](../../api/treegrid/column#displayascheckbox) property as `true`. {% if page.publishingplatform == "typescript" %} @@ -347,4 +346,4 @@ To render boolean values as checkbox in columns, you need to set [`displayAsChec {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/columns-cs15" %} {% endif %} -> You can refer to our [`JavaScript Tree Grid`](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid example [`JavaScript Tree Grid example`](https://ej2.syncfusion.com/demos/#/material/tree-grid/treegrid-overview.html) to knows how to present and manipulate data. +> You can refer to our [`JavaScript Tree Grid`](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid example [`JavaScript Tree Grid example`](https://ej2.syncfusion.com/demos#/material/tree-grid/treegrid-overview.html) to knows how to present and manipulate data. diff --git a/grid-sdk/javascript/tree-grid/columns/complex-data-binding.md b/grid-sdk/javascript/tree-grid/columns/complex-data-binding.md index 4a5bbca3..4d3bffe8 100644 --- a/grid-sdk/javascript/tree-grid/columns/complex-data-binding.md +++ b/grid-sdk/javascript/tree-grid/columns/complex-data-binding.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Complex Data Binding | Syncfusion description: Learn how to use complex data binding in JavaScript TreeGrid with nested field mapping, dot notation, and hierarchical data display. platform: grid-sdk -control: Complex data binding -publishingplatform: grid-sdk +control: Complex data binding documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Complex Data Binding in JavaScript TreeGrid -You can achieve complex data binding in the treegrid by using the dot(.) operator in the [`column.field`](../../api/treegrid/column/#field). +You can achieve complex data binding in the treegrid by using the dot(.) operator in the [`column.field`](../../api/treegrid/column#field). {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/columns/headers.md b/grid-sdk/javascript/tree-grid/columns/headers.md index c7013a31..4ff29c41 100644 --- a/grid-sdk/javascript/tree-grid/columns/headers.md +++ b/grid-sdk/javascript/tree-grid/columns/headers.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Headers | Syncfusion description: Learn how to configure and customize column headers in JavaScript TreeGrid, including header text and template options. platform: grid-sdk -control: Headers -publishingplatform: grid-sdk +control: Headers documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/grid-sdk ## Header text -By default, column header title is displayed from column [`field`](../../api/treegrid/column/#field) value. To override the default header title, you have to define the [`headerText`](../../api/treegrid/column/#headertext) value. +By default, column header title is displayed from column [`field`](../../api/treegrid/column#field) value. To override the default header title, you have to define the [`headerText`](../../api/treegrid/column#headertext) value. {% if page.publishingplatform == "typescript" %} @@ -42,11 +41,11 @@ By default, column header title is displayed from column [`field`](../../api/tre {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/columns-cs17" %} {% endif %} -> * If both the [`field`](../../api/treegrid/column/#field) and [`headerText`](../../api/treegrid/column/#headertext) are not defined in the column, the column renders with “empty” header text. +> * If both the [`field`](../../api/treegrid/column#field) and [`headerText`](../../api/treegrid/column#headertext) are not defined in the column, the column renders with “empty” header text. ## Header template -You can customize the header element by using the [`headerTemplate`](../../api/treegrid/column/#headerTemplate) property. +You can customize the header element by using the [`headerTemplate`](../../api/treegrid/column#headerTemplate) property. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/columns/responsive-columns.md b/grid-sdk/javascript/tree-grid/columns/responsive-columns.md index 57889b70..57e094a9 100644 --- a/grid-sdk/javascript/tree-grid/columns/responsive-columns.md +++ b/grid-sdk/javascript/tree-grid/columns/responsive-columns.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Responsive Columns | Syncfusion description: Learn how to create responsive columns in JavaScript TreeGrid using media queries to control column visibility and optimize layouts across devices. platform: grid-sdk -control: Responsive columns -publishingplatform: grid-sdk +control: Responsive columns documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -12,8 +11,8 @@ domainurl: https://help.syncfusion.com/grid-sdk # Responsive Columns in JavaScript TreeGrid You can toggle column visibility based on media queries which are defined -at the [`hideAtMedia`](../../api/treegrid/column/#hideatmedia). -The [`hideAtMedia`](../../api/treegrid/column/#hideatmedia) accepts valid +at the [`hideAtMedia`](../../api/treegrid/column#hideatmedia). +The [`hideAtMedia`](../../api/treegrid/column#hideatmedia) accepts valid [Media Queries]( http://cssmediaqueries.com/what-are-css-media-queries.html ). {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/context-menu.md b/grid-sdk/javascript/tree-grid/context-menu.md index 91376692..f936a456 100644 --- a/grid-sdk/javascript/tree-grid/context-menu.md +++ b/grid-sdk/javascript/tree-grid/context-menu.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Context Menu | Syncfusion description: Learn how to customize the context menu in JavaScript TreeGrid, including custom items, dynamic enable/disable options, and API integration. platform: grid-sdk -control: Context menu -publishingplatform: grid-sdk +control: Context menu documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Context Menu in JavaScript TreeGrid -The TreeGrid has options to show the context menu when right clicked on it. To enable this feature, you need to define either default or custom item in the [`contextMenuItems`](../api/treegrid/#contextmenuitems). +The TreeGrid has options to show the context menu when right clicked on it. To enable this feature, you need to define either default or custom item in the [`contextMenuItems`](../api/treegrid#contextmenuitems). To use the context menu, inject the `ContextMenu` module in the treegrid. @@ -67,9 +66,9 @@ Items| Description ## Custom context menu items -The custom context menu items can be added by defining the [`contextMenuItems`](../api/treegrid/#contextmenuitems) as a collection of -[`contextMenuItemModel`](../api/grid/contextMenuItemModel/). -Actions for this customized items can be defined in the [`contextMenuClick`](../api/treegrid/#contextmenuclick) event. +The custom context menu items can be added by defining the [`contextMenuItems`](../api/treegrid#contextmenuitems) as a collection of +[`contextMenuItemModel`](../api/grid/contextMenuItemModel). +Actions for this customized items can be defined in the [`contextMenuClick`](../api/treegrid#contextmenuclick) event. In the below sample, we have shown context menu item for parent rows to expand or collapse child rows. @@ -102,7 +101,7 @@ In the below sample, we have shown context menu item for parent rows to expand o ## Enable and disable context menu items dynamically -You can enable and disable the context menu items using the [`enableItems`](https://ej2.syncfusion.com/documentation/api/menu/#enableitems) method in [`contextMenuOpen`](https://ej2.syncfusion.com/documentation/api/treegrid/#contextmenuopen) event. +You can enable and disable the context menu items using the [`enableItems`](https://ej2.syncfusion.com/documentation/api/menu#enableitems) method in [`contextMenuOpen`](https://ej2.syncfusion.com/documentation/api/treegrid#contextmenuopen) event. {% if page.publishingplatform == "typescript" %} @@ -131,5 +130,5 @@ You can enable and disable the context menu items using the [`enableItems`](http {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/contextmenu-cs3" %} {% endif %} -> You can hide or show an item in context menu for specific area inside of treegrid by defining the [`target`](../api/grid/contextMenuItemModel/#target) property. +> You can hide or show an item in context menu for specific area inside of treegrid by defining the [`target`](../api/grid/contextMenuItemModel#target) property. > You can refer to our [`JavaScript Tree Grid`](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid example [`JavaScript Tree Grid example`](https://ej2.syncfusion.com/demos/#/material/tree-grid/treegrid-overview.html) to knows how to present and manipulate data. \ No newline at end of file diff --git a/grid-sdk/javascript/tree-grid/data-binding/data-binding.md b/grid-sdk/javascript/tree-grid/data-binding/data-binding.md index 979e1368..40599a2b 100644 --- a/grid-sdk/javascript/tree-grid/data-binding/data-binding.md +++ b/grid-sdk/javascript/tree-grid/data-binding/data-binding.md @@ -4,14 +4,13 @@ title: JavaScript TreeGrid Data Binding | Syncfusion description: Learn about data binding in the JavaScript TreeGrid, covering local and remote data integration, expand state mapping, and best practices. platform: grid-sdk control: Data binding -publishingplatform: grid-sdk documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Data Binding in JavaScript TreeGrid -The TreeGrid uses `DataManager`, which supports both RESTful JSON data services binding and local JavaScript object array binding. The [`dataSource`](../../api/treegrid/#dataSource) property can be assigned either with the instance of `DataManager` or JavaScript object array collection. +The TreeGrid uses `DataManager`, which supports both RESTful JSON data services binding and local JavaScript object array binding. The [`dataSource`](../../api/treegrid#dataSource) property can be assigned either with the instance of `DataManager` or JavaScript object array collection. It supports two kinds of data binding method: * Local data @@ -19,7 +18,7 @@ It supports two kinds of data binding method: ## Binding with ajax -You can use TreeGrid [`dataSource`](../../api/treegrid/#datasource) property to bind the data source to TreeGrid from external Fetch request. In the below code we have fetched the data source from the server with the help of Ajax request and provided that to [`dataSource`](../../api/treegrid/#datasource) property by using `onSuccess` event of the Fetch. +You can use TreeGrid [`dataSource`](../../api/treegrid#datasource) property to bind the data source to TreeGrid from external Fetch request. In the below code we have fetched the data source from the server with the help of Ajax request and provided that to [`dataSource`](../../api/treegrid#datasource) property by using `onSuccess` event of the Fetch. {% if page.publishingplatform == "typescript" %} @@ -58,7 +57,7 @@ You can use TreeGrid [`dataSource`](../../api/treegrid/#datasource) property to ## Handling expandStateMapping -To denotes the expand status of parent row, define the [`expandStateMapping`](https://ej2.syncfusion.com/documentation/api/treegrid/#expandstatemapping) property of tree grid. +To denotes the expand status of parent row, define the [`expandStateMapping`](https://ej2.syncfusion.com/documentation/api/treegrid#expandstatemapping) property of tree grid. The `expandStateMapping` property maps the field name in data source, that denotes whether parent record is in expanded or collapsed state and this is useful to renders parent row in expanded or collapsed state based on this mapping property value in data source. @@ -210,11 +209,11 @@ data.executeQuery(new Query().where('ParentId', 'equal', null).take(3).skip(0).r ### Handling child data -Using the custom binding feature you can bind the child data for a parent record as per your custom logic. When a parent record is expanded, [`dataStateChange`](../../api/treegrid/#datastatechange) event is triggered in which you can assign your custom data to the `childData` property of the [`dataStateChange`](../../api/treegrid/#datastatechange) event arguments. +Using the custom binding feature you can bind the child data for a parent record as per your custom logic. When a parent record is expanded, [`dataStateChange`](../../api/treegrid#datastatechange) event is triggered in which you can assign your custom data to the `childData` property of the [`dataStateChange`](../../api/treegrid#datastatechange) event arguments. After assigning the child data, `childDataBind` method should be called from the -[`dataStateChange`](../../api/treegrid/#datastatechange) event arguments to indicate that the data is bound. +[`dataStateChange`](../../api/treegrid#datastatechange) event arguments to indicate that the data is bound. -> In this context, initially we have assigned only the parent records to the treegrid dataSource and fetched the required child records in the [`dataStateChange`](../../api/treegrid/#datastatechange) event. +> In this context, initially we have assigned only the parent records to the treegrid dataSource and fetched the required child records in the [`dataStateChange`](../../api/treegrid#datastatechange) event. ````ts @@ -340,7 +339,7 @@ data.executeQuery(new Query().where('ParentId', 'equal', null).take(3).skip(0).r ### Performing CRUD actions -The [`dataSourceChanged`](../../api/treegrid/#datasourcechanged) event will be triggered for updating the treegrid data. You can perform the save operation based on the event arguments and call the endEdit method to indicate the completion of save operation. +The [`dataSourceChanged`](../../api/treegrid#datasourcechanged) event will be triggered for updating the treegrid data. You can perform the save operation based on the event arguments and call the endEdit method to indicate the completion of save operation. ````ts @@ -418,7 +417,7 @@ The footer aggregate values should be calculated and sent along with the **data ### Provide excel filter data source -The [`dataStateChange`](../../api/treegrid/#datastatechange) event will be triggered with appropriate arguments when the excel filter requests the filter choice data source. You need to resolve the excel filter data source using the **dataSource** resolver function from the state argument as follows. +The [`dataStateChange`](../../api/treegrid#datastatechange) event will be triggered with appropriate arguments when the excel filter requests the filter choice data source. You need to resolve the excel filter data source using the **dataSource** resolver function from the state argument as follows. ```ts diff --git a/grid-sdk/javascript/tree-grid/data-binding/local-data.md b/grid-sdk/javascript/tree-grid/data-binding/local-data.md index dd26a9ff..4a74e176 100644 --- a/grid-sdk/javascript/tree-grid/data-binding/local-data.md +++ b/grid-sdk/javascript/tree-grid/data-binding/local-data.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Local Data | Syncfusion description: Learn to bind local data to JavaScript TreeGrid with support for hierarchical and self-referential (flat) data structures. platform: grid-sdk -control: Local data -publishingplatform: grid-sdk +control: Local data documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/data-binding/remote-data.md b/grid-sdk/javascript/tree-grid/data-binding/remote-data.md index 7a7ad42d..5916cb25 100644 --- a/grid-sdk/javascript/tree-grid/data-binding/remote-data.md +++ b/grid-sdk/javascript/tree-grid/data-binding/remote-data.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Remote Data | Syncfusion description: Learn how to bind remote data in the JavaScript TreeGrid, including load on demand, paging, virtualization, adaptors, and error handling. platform: grid-sdk -control: Remote data -publishingplatform: grid-sdk +control: Remote data documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/grid-sdk To bind remote data to TreeGrid component, assign service data as an instance of `DataManager` to the [`dataSource`](../../api/treegrid#datasource) property. To interact with remote data source, provide the endpoint `url` and define the [`hasChildMapping`](../../api/treegrid#hasChildMapping) property of treegrid. -The [`hasChildMapping`](../../api/treegrid/#haschildmapping) property maps the field name in data source, that denotes whether current record holds any child records. This is useful internally to show expand icon while binding child data on demand. +The [`hasChildMapping`](../../api/treegrid#haschildmapping) property maps the field name in data source, that denotes whether current record holds any child records. This is useful internally to show expand icon while binding child data on demand. The TreeGrid provides `Load on Demand` support for rendering remote data. The Load on demand is considered in TreeGrid for the following actions. @@ -176,9 +175,9 @@ namespace Controllers ## LoadChildOnDemand -While binding remote data to Tree Grid component, by default Tree Grid renders parent rows in collapsed state. Tree Grid provides option to load the child records also during the initial rendering itself for remote data binding by setting [`loadChildOnDemand`](https://ej2.syncfusion.com/documentation/api/treegrid/#loadchildondemand) as false. +While binding remote data to Tree Grid component, by default Tree Grid renders parent rows in collapsed state. Tree Grid provides option to load the child records also during the initial rendering itself for remote data binding by setting [`loadChildOnDemand`](https://ej2.syncfusion.com/documentation/api/treegrid#loadchildondemand) as false. -When [`loadChildOnDemand`](https://ej2.syncfusion.com/documentation/api/treegrid/#loadchildondemand) is enabled parent records are rendered in collapsed state. +When [`loadChildOnDemand`](https://ej2.syncfusion.com/documentation/api/treegrid#loadchildondemand) is enabled parent records are rendered in collapsed state. The following code example describes the behavior of the loadChildOnDemand feature of Tree Grid. @@ -459,9 +458,9 @@ also when there is an exception while processing the treegrid actions. While binding remote data to Tree Grid component, by default Tree Grid renders parent rows in collapsed state. When expanding the root node, the child nodes will be loaded from the remote server. -When using virtualization with remote data binding, it helps you to improve the tree grid performance while loading a large set of data by setting [`enableVirtualization`](https://ej2.syncfusion.com/documentation/api/treegrid/#enablevirtualization) as true. The Tree Grid UI virtualization allows it to render only rows and columns visible within the view-port without buffering the entire datasource. +When using virtualization with remote data binding, it helps you to improve the tree grid performance while loading a large set of data by setting [`enableVirtualization`](https://ej2.syncfusion.com/documentation/api/treegrid#enablevirtualization) as true. The Tree Grid UI virtualization allows it to render only rows and columns visible within the view-port without buffering the entire datasource. -[`hasChildMapping`](https://ej2.syncfusion.com/documentation/api/treegrid/#haschildmapping) property maps the field name in data source, that denotes whether current record holds any child records. This is useful internally to show expand icon while binding child data on demand. +[`hasChildMapping`](https://ej2.syncfusion.com/documentation/api/treegrid#haschildmapping) property maps the field name in data source, that denotes whether current record holds any child records. This is useful internally to show expand icon while binding child data on demand. {% if page.publishingplatform == "typescript" %} @@ -842,9 +841,9 @@ public class TreeData ### Load parent rows in expanded state with virtualization -Tree Grid provides an option to load the child records in the initial rendering itself for remote data binding by setting the [`loadChildOnDemand`](https://ej2.syncfusion.com/documentation/api/treegrid/#loadchildondemand) as true. When the `loadChildOnDemand` is enabled, parent records are rendered in expanded state. +Tree Grid provides an option to load the child records in the initial rendering itself for remote data binding by setting the [`loadChildOnDemand`](https://ej2.syncfusion.com/documentation/api/treegrid#loadchildondemand) as true. When the `loadChildOnDemand` is enabled, parent records are rendered in expanded state. -When using virtualization with `loadChildOnDemand` , it helps you to improve the tree grid performance while loading the child records during the initial rendering for remote data binding by setting [`enableVirtualization`](https://ej2.syncfusion.com/documentation/api/treegrid/#enablevirtualization) as true and `loadChildOnDemand` as true. +When using virtualization with `loadChildOnDemand` , it helps you to improve the tree grid performance while loading the child records during the initial rendering for remote data binding by setting [`enableVirtualization`](https://ej2.syncfusion.com/documentation/api/treegrid#enablevirtualization) as true and `loadChildOnDemand` as true. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/editing/batch-editing.md b/grid-sdk/javascript/tree-grid/editing/batch-editing.md index 924508a5..8dd7d310 100644 --- a/grid-sdk/javascript/tree-grid/editing/batch-editing.md +++ b/grid-sdk/javascript/tree-grid/editing/batch-editing.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Batch Editing | Syncfusion description: Learn how to use batch editing in JavaScript TreeGrid to edit multiple cells, perform bulk updates, and save changes efficiently. platform: grid-sdk -control: Batch editing -publishingplatform: grid-sdk +control: Batch editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Batch Editing in JavaScript TreeGrid -In Batch edit mode, when you double-click on the Tree Grid cell, then the target cell changed to edit state. You can bulk save (added, changed and deleted data in the single request) to data source by click on the toolbar's `Update` button or by externally invoking the [`batchSave`](../../api/treegrid/edit/#batchsave) method. To enable Batch edit, set the [`editSettings.mode`](../../api/grid/editSettings/#mode) as `Batch`. +In Batch edit mode, when you double-click on the Tree Grid cell, then the target cell changed to edit state. You can bulk save (added, changed and deleted data in the single request) to data source by click on the toolbar's `Update` button or by externally invoking the [`batchSave`](../../api/treegrid/edit#batchsave) method. To enable Batch edit, set the [`editSettings.mode`](../../api/grid/editSettings#mode) as `Batch`. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/editing/cell-editing.md b/grid-sdk/javascript/tree-grid/editing/cell-editing.md index df774c00..2fa51fe8 100644 --- a/grid-sdk/javascript/tree-grid/editing/cell-editing.md +++ b/grid-sdk/javascript/tree-grid/editing/cell-editing.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Cell Editing | Syncfusion description: Learn how to use cell editing in the JavaScript TreeGrid, including enabling, editing, and handling cell edit events. platform: grid-sdk -control: Cell editing -publishingplatform: grid-sdk +control: Cell editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/grid-sdk In Cell edit mode, when you double click on a cell, it is changed to edit state. You can change the cell value and save to the data source. -To enable Cell edit, set the [`editSettings.mode`](../../api/treegrid/editSettingsModel/#mode) as `Cell`. +To enable Cell edit, set the [`editSettings.mode`](../../api/treegrid/editSettingsModel#mode) as `Cell`. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/editing/command-column-editing.md b/grid-sdk/javascript/tree-grid/editing/command-column-editing.md index cee82dfe..444b5f0f 100644 --- a/grid-sdk/javascript/tree-grid/editing/command-column-editing.md +++ b/grid-sdk/javascript/tree-grid/editing/command-column-editing.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Command Column Editing | Syncfusion description: Learn how to use command column editing in the JavaScript TreeGrid to add CRUD and custom action buttons for row-level operations. platform: grid-sdk -control: Command column editing -publishingplatform: grid-sdk +control: Command column editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Command Column Editing in JavaScript TreeGrid -The command column provides an option to add CRUD action buttons in a column. This can be defined by the [`column.commands`](../../api/treegrid/column/#commands) property. +The command column provides an option to add CRUD action buttons in a column. This can be defined by the [`column.commands`](../../api/treegrid/column#commands) property. The available built-in command buttons are: @@ -51,7 +50,7 @@ The available built-in command buttons are: ## Custom command - The custom command buttons can be added in a column by using the [`column.commands`](../../api/treegrid/column/#commands) property and the action for the custom buttons can be defined in the [`buttonOption.click`](../../api/grid/commandButtonOptions/#click) event. + The custom command buttons can be added in a column by using the [`column.commands`](../../api/treegrid/column#commands) property and the action for the custom buttons can be defined in the [`buttonOption.click`](../../api/grid/commandButtonOptions#click) event. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/editing/dialog-editing.md b/grid-sdk/javascript/tree-grid/editing/dialog-editing.md index 9f59d03e..5f30d958 100644 --- a/grid-sdk/javascript/tree-grid/editing/dialog-editing.md +++ b/grid-sdk/javascript/tree-grid/editing/dialog-editing.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Dialog Editing | Syncfusion description: Learn how to use dialog editing in JavaScript TreeGrid to edit records through customizable forms and perform CRUD operations. platform: grid-sdk -control: Dialog editing -publishingplatform: grid-sdk +control: Dialog editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/grid-sdk In Dialog edit mode, when you start editing the currently selected row, data will be shown on a dialog. You can change the cell values and save edited data to the data source. -To enable Dialog edit, set the [`editSettings.mode`](../../api/treegrid/editSettingsModel/#mode) as `Dialog`. +To enable Dialog edit, set the [`editSettings.mode`](../../api/treegrid/editSettingsModel#mode) as `Dialog`. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/editing/edit-types.md b/grid-sdk/javascript/tree-grid/editing/edit-types.md index c9897eef..560fb95a 100644 --- a/grid-sdk/javascript/tree-grid/editing/edit-types.md +++ b/grid-sdk/javascript/tree-grid/editing/edit-types.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Edit Types | Syncfusion description: Learn how to use different edit types in JavaScript TreeGrid, including cell, row, batch, and dialog editing modes for managing data. platform: grid-sdk -control: Edit types -publishingplatform: grid-sdk +control: Edit types documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,8 +12,8 @@ domainurl: https://help.syncfusion.com/grid-sdk ## Cell edit type and its params -The [`columns.editType`](../../api/treegrid/column/#edittype) is used to customize the edit type of the particular column. -You can set the [`columns.editType`](../../api/treegrid/column/#edittype) based on data type of the column. +The [`columns.editType`](../../api/treegrid/column#edittype) is used to customize the edit type of the particular column. +You can set the [`columns.editType`](../../api/treegrid/column#edittype) based on data type of the column. * `numericedit` - [`NumericTextBox`](../../numerictextbox) component for integers, double, and decimal data types. @@ -28,7 +27,7 @@ You can set the [`columns.editType`](../../api/treegrid/column/#edittype) based * `datetimepickeredit` - [`DateTimePicker`](../../datetimepicker) component for date time data type. -Also, you can customize model of the [`columns.editType`](../../api/treegrid/column/#edittype) component through the [`columns.edit.params`](../../api/treegrid/column/#edit). +Also, you can customize model of the [`columns.editType`](../../api/treegrid/column#edittype) component through the [`columns.edit.params`](../../api/treegrid/column#edit). The following table describes cell edit type component and their corresponding edit params of the column. diff --git a/grid-sdk/javascript/tree-grid/editing/edit.md b/grid-sdk/javascript/tree-grid/editing/edit.md index 4981c58e..8102da89 100644 --- a/grid-sdk/javascript/tree-grid/editing/edit.md +++ b/grid-sdk/javascript/tree-grid/editing/edit.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Edit | Syncfusion description: Learn how to edit data in JavaScript TreeGrid, including CRUD operations, editing modes, validation, and data update workflows. platform: grid-sdk -control: Edit -publishingplatform: grid-sdk +control: Edit documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -12,10 +11,10 @@ domainurl: https://help.syncfusion.com/grid-sdk # Edit in JavaScript TreeGrid The TreeGrid component has options to dynamically insert, delete and update records. -Editing feature is enabled by using [`editSettings`](../../api/treegrid/#editsettings) property and it requires a primary key column for CRUD operations. -To define the primary key, set [`columns.isPrimaryKey`](../../api/treegrid/column/#isprimarykey) to `true` in particular column. +Editing feature is enabled by using [`editSettings`](../../api/treegrid#editsettings) property and it requires a primary key column for CRUD operations. +To define the primary key, set [`columns.isPrimaryKey`](../../api/treegrid/column#isprimarykey) to `true` in particular column. -To use CRUD, inject the [`Edit`](../../api/treegrid/#editmodule) module in treegrid. +To use CRUD, inject the [`Edit`](../../api/treegrid#editmodule) module in treegrid. {% if page.publishingplatform == "typescript" %} @@ -44,12 +43,12 @@ To use CRUD, inject the [`Edit`](../../api/treegrid/#editmodule) module in treeg {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/edit-cs8" %} {% endif %} -> * You can disable editing for a particular column, by specifying [`columns.allowEditing`](../../api/treegrid/column/#allowediting) to `false`. +> * You can disable editing for a particular column, by specifying [`columns.allowEditing`](../../api/treegrid/column#allowediting) to `false`. ## Toolbar with edit option The treegrid toolbar has the built-in items to execute Editing actions. -You can define this by using the [`toolbar`](../../api/treegrid/#toolbar) property. +You can define this by using the [`toolbar`](../../api/treegrid#toolbar) property. {% if page.publishingplatform == "typescript" %} @@ -80,7 +79,7 @@ You can define this by using the [`toolbar`](../../api/treegrid/#toolbar) proper ## Adding row position -The TreeGrid control provides the support to add the new row in the top, bottom, above selected row, below selected row and child position of tree grid content using [`editSettings.newRowPosition`](../../api/treegrid/editSettingsModel/#newrowposition) property. By default, a new row will be added at the top of the treegrid. +The TreeGrid control provides the support to add the new row in the top, bottom, above selected row, below selected row and child position of tree grid content using [`editSettings.newRowPosition`](../../api/treegrid/editSettingsModel#newrowposition) property. By default, a new row will be added at the top of the treegrid. The following examples shows how to set new row position as `Child` in tree grid. @@ -115,7 +114,7 @@ The following examples shows how to set new row position as `Child` in tree grid ### Delete confirmation -The delete confirm dialog can be shown when deleting a record by defining the [`showDeleteConfirmDialog`](../../api/treegrid/editSettingsModel/#showdeleteconfirmdialog) as `true` +The delete confirm dialog can be shown when deleting a record by defining the [`showDeleteConfirmDialog`](../../api/treegrid/editSettingsModel#showdeleteconfirmdialog) as `true` {% if page.publishingplatform == "typescript" %} @@ -149,7 +148,7 @@ The delete confirm dialog can be shown when deleting a record by defining the [` ## Default column values on add new The treegrid provides an option to set the default value for the columns when adding a new record in it. -To set a default value for the particular column by defining the [`columns.defaultValue`](../../api/treegrid/column/#defaultvalue). +To set a default value for the particular column by defining the [`columns.defaultValue`](../../api/treegrid/column#defaultvalue). {% if page.publishingplatform == "typescript" %} @@ -180,7 +179,7 @@ To set a default value for the particular column by defining the [`columns.defau ## Disable editing for particular column -You can disable editing for particular columns by using the [`columns.allowEditing`](../../api/treegrid/column/#allowediting). +You can disable editing for particular columns by using the [`columns.allowEditing`](../../api/treegrid/column#allowediting). In the following demo, editing is disabled for the `Start Date` column. diff --git a/grid-sdk/javascript/tree-grid/editing/persisting-data-in-server.md b/grid-sdk/javascript/tree-grid/editing/persisting-data-in-server.md index b14d4218..75857ce5 100644 --- a/grid-sdk/javascript/tree-grid/editing/persisting-data-in-server.md +++ b/grid-sdk/javascript/tree-grid/editing/persisting-data-in-server.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Persisting Data in Server | Syncfusion description: Learn how to persist edited data in a database using RESTful services and DataManager in the JavaScript TreeGrid. platform: grid-sdk -control: Persisting data in server -publishingplatform: grid-sdk +control: Persisting data in server documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/editing/row-editing.md b/grid-sdk/javascript/tree-grid/editing/row-editing.md index fe97077d..8343ab16 100644 --- a/grid-sdk/javascript/tree-grid/editing/row-editing.md +++ b/grid-sdk/javascript/tree-grid/editing/row-editing.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Row Editing | Syncfusion description: Learn how to use row editing in JavaScript TreeGrid, including editing rows, programmatic CRUD operations, and confirmation dialogs. platform: grid-sdk -control: Row editing -publishingplatform: grid-sdk +control: Row editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/grid-sdk In Row edit mode, when you start editing the currently selected record, the entire row is changed to edit state. You can change the cell values of the row and save edited data to the data source. -To enable Row edit, set the [`editSettings.mode`](../../api/treegrid/editSettingsModel/#mode) as `Row`. +To enable Row edit, set the [`editSettings.mode`](../../api/treegrid/editSettingsModel#mode) as `Row`. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/editing/template-editing.md b/grid-sdk/javascript/tree-grid/editing/template-editing.md index 7bfb91e9..e0fa7cf3 100644 --- a/grid-sdk/javascript/tree-grid/editing/template-editing.md +++ b/grid-sdk/javascript/tree-grid/editing/template-editing.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Template Editing | Syncfusion description: Learn how to use template editing in JavaScript TreeGrid to create custom edit forms with tailored layouts and controls. platform: grid-sdk -control: Template editing -publishingplatform: grid-sdk +control: Template editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/grid-sdk ## Dialog template -The dialog template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, you can render your own editors by defining the [`editSettings.mode`](../../api/treegrid/editSettingsModel/#mode) as `Dialog` and [`template`](../../api/treegrid/editSettingsModel/#template) as SCRIPT element ID or HTML string which holds the template. +The dialog template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, you can render your own editors by defining the [`editSettings.mode`](../../api/treegrid/editSettingsModel#mode) as `Dialog` and [`template`](../../api/treegrid/editSettingsModel#template) as SCRIPT element ID or HTML string which holds the template. In some cases, you need to add the new field editors in the dialog which are not present in the column model. In that situation, the dialog template will help you to customize the default edit dialog. @@ -82,11 +81,11 @@ ${/if} ``` -> The dialog template syntax supports the ES6 expression string literals, and you can refer to the [`Template Engine`](../../common/template-engine/) for more template syntax. +> The dialog template syntax supports the ES6 expression string literals, and you can refer to the [`Template Engine`](../../common/template-engine) for more template syntax. ### Render editors as components -You can convert the form editors to EJ2 controls in the [`actionComplete`](../../api/treegrid/#actioncomplete) event based on the `requestType` as `beginEdit` or `add`. +You can convert the form editors to EJ2 controls in the [`actionComplete`](../../api/treegrid#actioncomplete) event based on the `requestType` as `beginEdit` or `add`. The following code example illustrates rendering the drop-down list control in the `actionComplete` event. @@ -104,7 +103,7 @@ The following code example illustrates rendering the drop-down list control in t ### Get value from editor -You can read, format, and update the current editor value in the [`actionBegin`](../../api/treegrid/#actionbegin) event at the time of setting `requestType` to `save`. +You can read, format, and update the current editor value in the [`actionBegin`](../../api/treegrid#actionbegin) event at the time of setting `requestType` to `save`. In the following code example, the `progress` value has been formatted and updated. @@ -121,7 +120,7 @@ In the following code example, the `progress` value has been formatted and updat ### Set focus to editor By default, the first input element in the dialog will be focused while opening the dialog. -If the first input element is in disabled or hidden state, focus the valid input element in the [`actionComplete`](../../api/treegrid/#actioncomplete) event based on `requestType` as `beginEdit`. +If the first input element is in disabled or hidden state, focus the valid input element in the [`actionComplete`](../../api/treegrid#actioncomplete) event based on `requestType` as `beginEdit`. ```ts @@ -136,7 +135,7 @@ If the first input element is in disabled or hidden state, focus the valid input ### Adding validation rules for custom editors -If you have used additional fields that are not present in the column model, then add the validation rules to the [`actionComplete`](../../api/treegrid/#actioncomplete) event. +If you have used additional fields that are not present in the column model, then add the validation rules to the [`actionComplete`](../../api/treegrid#actioncomplete) event. ```ts diff --git a/grid-sdk/javascript/tree-grid/editing/validation.md b/grid-sdk/javascript/tree-grid/editing/validation.md index 88fa9a89..98062abd 100644 --- a/grid-sdk/javascript/tree-grid/editing/validation.md +++ b/grid-sdk/javascript/tree-grid/editing/validation.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Validation | Syncfusion description: Learn how to configure validation in JavaScript TreeGrid, including required fields, custom rules, and error handling during editing. platform: grid-sdk -control: Validation -publishingplatform: grid-sdk +control: Validation documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -15,7 +14,7 @@ domainurl: https://help.syncfusion.com/grid-sdk Column validation allows you to validate the edited or added row data and it display errors for invalid fields before saving data. TreeGrid uses `Form Validator` component for column validation. -You can set validation rules by defining the [`columns.validationRules`](../../api/treegrid/column/#validationrules). +You can set validation rules by defining the [`columns.validationRules`](../../api/treegrid/column#validationrules). {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/excel-export/adding-header-and-footer.md b/grid-sdk/javascript/tree-grid/excel-export/adding-header-and-footer.md index 34886718..e001b99c 100644 --- a/grid-sdk/javascript/tree-grid/excel-export/adding-header-and-footer.md +++ b/grid-sdk/javascript/tree-grid/excel-export/adding-header-and-footer.md @@ -1,10 +1,9 @@ --- layout: post -title: JavaScript TreeGrid Add Headers and Footers to Excel Export | Syncfusion +title: JavaScript TreeGrid Excel Export Headers and Footers | Syncfusion description: Learn how to add headers and footers to Excel exports in JavaScript TreeGrid, including configuration, customization, and export options. platform: grid-sdk -control: Adding header and footer -publishingplatform: grid-sdk +control: Adding header and footer documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/excel-export/excel-cell-style-customization.md b/grid-sdk/javascript/tree-grid/excel-export/excel-cell-style-customization.md index 29db2a96..e18f943c 100644 --- a/grid-sdk/javascript/tree-grid/excel-export/excel-cell-style-customization.md +++ b/grid-sdk/javascript/tree-grid/excel-export/excel-cell-style-customization.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Excel Cell Style Customization | Syncfusion description: Learn how to customize Excel cell styles in the JavaScript TreeGrid of Essential JS 2, including conditional formatting and theming options. platform: grid-sdk -control: Excel cell style customization -publishingplatform: grid-sdk +control: Excel cell style customization documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/grid-sdk ## Conditional cell formatting -TreeGrid cells in the exported Excel can be customized or formatted using [`excelQueryCellInfo`](../../api/treegrid/#excelQueryCellInfo) event. In this event, we can format the treegrid cells of exported PDF document based on the column cell value. +TreeGrid cells in the exported Excel can be customized or formatted using [`excelQueryCellInfo`](../../api/treegrid#excelQueryCellInfo) event. In this event, we can format the treegrid cells of exported PDF document based on the column cell value. In the below sample, we have set the background color for `Duration` column in the exported excel by `args.cell` and `backgroundColor` property. diff --git a/grid-sdk/javascript/tree-grid/excel-export/excel-export-options.md b/grid-sdk/javascript/tree-grid/excel-export/excel-export-options.md index 4be263e6..e60f9b43 100644 --- a/grid-sdk/javascript/tree-grid/excel-export/excel-export-options.md +++ b/grid-sdk/javascript/tree-grid/excel-export/excel-export-options.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Excel Export Options | Syncfusion description: Learn about Excel export options in JavaScript TreeGrid, including export customization, hidden columns, selected records, and advanced export settings. platform: grid-sdk -control: Excel export options -publishingplatform: grid-sdk +control: Excel export options documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -48,7 +47,7 @@ The excel export provides an option to export hidden columns of treegrid by defi ### Show or hide columns on exported excel -You can show a hidden column or hide a visible column while printing the treegrid using [`toolbarClick`](../../api/treegrid#toolbarclick) and [`excelExportComplete`](../../api/treegrid/#excelExportComplete) events. +You can show a hidden column or hide a visible column while printing the treegrid using [`toolbarClick`](../../api/treegrid#toolbarclick) and [`excelExportComplete`](../../api/treegrid#excelExportComplete) events. In the `toolbarClick` event, based on `args.item.text` as `Excel Export`. We can show or hide columns by setting `column.visible` property to `true` or `false` respectively. @@ -85,7 +84,7 @@ In the below example, we have `Duration` as a hidden column in the treegrid. Whi ### File name for exported document -You can assign the file name for the exported document by defining `fileName` property in [`ExcelExportProperties`](../../api/treegrid/#excelExportProperties). +You can assign the file name for the exported document by defining `fileName` property in [`ExcelExportProperties`](../../api/treegrid#excelExportProperties). {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/excel-export/excel-export.md b/grid-sdk/javascript/tree-grid/excel-export/excel-export.md index fabc4107..d5b4f816 100644 --- a/grid-sdk/javascript/tree-grid/excel-export/excel-export.md +++ b/grid-sdk/javascript/tree-grid/excel-export/excel-export.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Excel Export | Syncfusion description: Learn how to export data from JavaScript TreeGrid to Excel, including export customization, selected records, and advanced export options. platform: grid-sdk -control: Excel export -publishingplatform: grid-sdk +control: Excel export documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Excel Export in JavaScript TreeGrid -The excel export allows exporting TreeGrid data to Excel document. You need to use the [`excelExport`](../../api/treegrid/#excelexport) method for exporting. To enable Excel export in the treegrid, set the [`allowExcelExport`](../../api/treegrid/#allowexcelexport-boolean) as true. +The excel export allows exporting TreeGrid data to Excel document. You need to use the [`excelExport`](../../api/treegrid#excelexport) method for exporting. To enable Excel export in the treegrid, set the [`allowExcelExport`](../../api/treegrid#allowexcelexport-boolean) as true. To use excel export, You need to inject the `ExcelExport` module in treegrid. @@ -44,7 +43,7 @@ To use excel export, You need to inject the `ExcelExport` module in treegrid. ## Persist collapsed state -You can persist the collapsed state in the exported document by defining `isCollapsedStatePersist` property as true in `TreeGridExcelExportProperties` parameter of [`excelExport`](../../api/treegrid/#excelexport) method. +You can persist the collapsed state in the exported document by defining `isCollapsedStatePersist` property as true in `TreeGridExcelExportProperties` parameter of [`excelExport`](../../api/treegrid#excelexport) method. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/excel-export/exporting-treegrid-in-server.md b/grid-sdk/javascript/tree-grid/excel-export/exporting-treegrid-in-server.md index 96b39b9a..e1eb993b 100644 --- a/grid-sdk/javascript/tree-grid/excel-export/exporting-treegrid-in-server.md +++ b/grid-sdk/javascript/tree-grid/excel-export/exporting-treegrid-in-server.md @@ -4,8 +4,8 @@ title: JavaScript TreeGrid Server-Side Export | Syncfusion description: Learn how to perform server-side exports in JavaScript TreeGrid, including Excel and CSV export, server configuration, and header rotation. platform: grid-sdk control: Exporting TreeGrid in Server -publishingplatform: grid-sdk documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk --- @@ -15,7 +15,7 @@ The Tree Grid have an option to export the data to Excel in server side using tr ## Server dependencies -The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridExport package, which is available in Essential Studio® and [nuget.org](https://www.nuget.org/).The following list of dependencies is required for tree grid server side Excel exporting action. +The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridExport package, which is available in Essential Studio® and [nuget.org](https://www.nuget.org).The following list of dependencies is required for tree grid server side Excel exporting action. * Syncfusion.EJ2 * Syncfusion.EJ2.TreeGridExport @@ -24,7 +24,7 @@ The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridEx The following code snippet shows server configuration using ASP.NET MVC Controller Action. -To Export the tree grid in server side, You need to call the [`serverExcelExport`](https://ej2.syncfusion.com/documentation/api/treegrid/#serverexcelexport) method for passing the tree grid properties to server exporting action. +To Export the tree grid in server side, You need to call the [`serverExcelExport`](https://ej2.syncfusion.com/documentation/api/treegrid#serverexcelexport) method for passing the tree grid properties to server exporting action. ```ts public IActionResult ServerSideExporting() @@ -93,7 +93,7 @@ treegrid.toolbarClick = (args: Object) => { ## CSV Export in server side -You can export the tree grid to CSV format by using the [`serverCsvExport`](https://ej2.syncfusion.com/documentation/api/treegrid/#servercsvexport) method which will pass the tree grid properties to server. +You can export the tree grid to CSV format by using the [`serverCsvExport`](https://ej2.syncfusion.com/documentation/api/treegrid#servercsvexport) method which will pass the tree grid properties to server. In the below demo, we have invoked the above method inside the [`toolbarClick`](https://ej2.syncfusion.com/documentation/api/treegrid#toolbarclick) event. In server side, we have deserialized the tree grid properties and passed to the [`ExportToCsv`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGridExport.TreeGridExcelExport.html#Syncfusion_EJ2_TreeGridExport_TreeGridExcelExport_ExportToCsv__1_Syncfusion_EJ2_TreeGrid_TreeGrid_System_Collections_IEnumerable_Syncfusion_EJ2_TreeGridExport_ExcelExportProperties_) method which will export the properties to CSV format. diff --git a/grid-sdk/javascript/tree-grid/filtering/excel-like-filter.md b/grid-sdk/javascript/tree-grid/filtering/excel-like-filter.md index b3a01558..3789e227 100644 --- a/grid-sdk/javascript/tree-grid/filtering/excel-like-filter.md +++ b/grid-sdk/javascript/tree-grid/filtering/excel-like-filter.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Excel-Like Filter | Syncfusion description: Learn how to use Excel-like filtering in JavaScript TreeGrid, including filter menus, search, checkbox filtering, and custom filter options. platform: grid-sdk -control: Excel like filter -publishingplatform: grid-sdk +control: Excel like filter documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Excel-Like Filter in JavaScript TreeGrid -You can enable Excel like filter by defining.[`filterSettings.type`](../../api/treegrid/filterSettingsModel/#type) as `Excel`.The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering. +You can enable Excel like filter by defining.[`filterSettings.type`](../../api/treegrid/filterSettingsModel#type) as `Excel`.The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering. {% if page.publishingplatform == "typescript" %} @@ -42,7 +41,7 @@ You can enable Excel like filter by defining.[`filterSettings.type`](../../api/t ## Change default excel filter operator -You can change the default excel-filter operator by changing the column operator as `contains` from `startsWith` in the [`actionBegin`](../../api/treegrid/#actionBegin) event +You can change the default excel-filter operator by changing the column operator as `contains` from `startsWith` in the [`actionBegin`](../../api/treegrid#actionBegin) event {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/filtering/filter-bar.md b/grid-sdk/javascript/tree-grid/filtering/filter-bar.md index 5dbdca02..d57a6d19 100644 --- a/grid-sdk/javascript/tree-grid/filtering/filter-bar.md +++ b/grid-sdk/javascript/tree-grid/filtering/filter-bar.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Filter Bar | Syncfusion description: Learn how to use the filter bar in JavaScript TreeGrid, including column filtering, filter operators, and custom filter behavior. platform: grid-sdk -control: Filter bar -publishingplatform: grid-sdk +control: Filter bar documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Filter Bar in JavaScript TreeGrid -By setting the [`allowFiltering`](../../api/treegrid/#allowfiltering) to true, the filter bar row will render next to the header, which allows you to filter data. You can filter the records with different expressions depending upon the column type. +By setting the [`allowFiltering`](../../api/treegrid#allowfiltering) to true, the filter bar row will render next to the header, which allows you to filter data. You can filter the records with different expressions depending upon the column type. **Filter bar expressions:** @@ -59,7 +58,7 @@ N/A |N/A |`Equal` operator will always be used for Boolean filter. |Boolean ## Filter bar template with custom component -The [`filterBarTemplate`](../../api/treegrid/column/#filterbartemplate) is used to add custom components to a particular column, and does the following functions: +The [`filterBarTemplate`](../../api/treegrid/column#filterbartemplate) is used to add custom components to a particular column, and does the following functions: * `create`: Creates custom components. * `write`: Wires events for custom components. @@ -94,7 +93,7 @@ In the following sample, the dropdown is used as a custom component in the Durat ## Change default filter bar operator -You can change the default filter operator by extending [`filterModule.filterOperators`](../../api/treegrid/filterSettings/#operators) property in [`dataBound`](../../api/treegrid/#databound) event. +You can change the default filter operator by extending [`filterModule.filterOperators`](../../api/treegrid/filterSettings#operators) property in [`dataBound`](../../api/treegrid#databound) event. In the following sample, we have changed the default operator for string typed columns as `contains` from `startsWith`. diff --git a/grid-sdk/javascript/tree-grid/filtering/filter-menu.md b/grid-sdk/javascript/tree-grid/filtering/filter-menu.md index d210da42..14fa762f 100644 --- a/grid-sdk/javascript/tree-grid/filtering/filter-menu.md +++ b/grid-sdk/javascript/tree-grid/filtering/filter-menu.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Filter Menu | Syncfusion description: Learn how to use the filter menu in JavaScript TreeGrid, including column filtering, filter operators, and custom filter options. platform: grid-sdk -control: Filter menu -publishingplatform: grid-sdk +control: Filter menu documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Filter Menu in JavaScript TreeGrid -You can enable filter menu by setting the [`filterSettings.type`](../../api/treegrid/filterSettingsModel/#type) as `Menu`. The filter menu UI will be rendered based on its column type, which allows you to filter data. +You can enable filter menu by setting the [`filterSettings.type`](../../api/treegrid/filterSettingsModel#type) as `Menu`. The filter menu UI will be rendered based on its column type, which allows you to filter data. You can filter the records with different operators. {% if page.publishingplatform == "typescript" %} @@ -41,12 +40,12 @@ You can filter the records with different operators. {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/filtering-cs6" %} {% endif %} -> * [`allowFiltering`](../../api/treegrid/#allowfiltering) must be set as true to enable filter menu. -> * Setting [`columns.allowFiltering`](../../api/treegrid/column/#allowfiltering) as false will prevent filter menu rendering for a particular column. +> * [`allowFiltering`](../../api/treegrid#allowfiltering) must be set as true to enable filter menu. +> * Setting [`columns.allowFiltering`](../../api/treegrid/column#allowfiltering) as false will prevent filter menu rendering for a particular column. ## Custom component in filter menu -The [`column.filter.ui`](../../api/treegrid/column/#filter) is used to add custom filter components to a particular column. To implement custom filter ui, define the following functions: +The [`column.filter.ui`](../../api/treegrid/column#filter) is used to add custom filter components to a particular column. To implement custom filter ui, define the following functions: * `create`: Creates custom component. * `write`: Wire events for custom component. @@ -84,9 +83,9 @@ In the following sample, dropdown is used as custom component in the duration c ## Enable different filter dialog for a column You can use both `Menu` and `Excel` filter in a same TreeGrid. To do so, set the -[`column.filter.type`](../../api/treegrid/column/#filter) as `Menu` or `Excel`. +[`column.filter.type`](../../api/treegrid/column#filter) as `Menu` or `Excel`. -In the following sample menu filter is enabled by default and excel filter is enabled for the Task Name column using the [`column.filter.type`](../../api/treegrid/column/#filter). +In the following sample menu filter is enabled by default and excel filter is enabled for the Task Name column using the [`column.filter.type`](../../api/treegrid/column#filter). {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/filtering/filtering.md b/grid-sdk/javascript/tree-grid/filtering/filtering.md index 4c70162e..b75f6ce0 100644 --- a/grid-sdk/javascript/tree-grid/filtering/filtering.md +++ b/grid-sdk/javascript/tree-grid/filtering/filtering.md @@ -1,17 +1,16 @@ --- layout: post -title: Filtering in JavaScript TreeGrid +title: JavaScript TreeGrid Filtering - Syncfusion description: Learn how to use filtering in JavaScript TreeGrid, including filter bar, menu, Excel-like filtering, operators, and custom filter options. platform: grid-sdk -control: Filtering -publishingplatform: grid-sdk +control: Filtering documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Filtering in JavaScript TreeGrid -Filtering allows you to view specific or related records based on filter criteria. To enable filtering in the TreeGrid, set the [`allowFiltering`](../../api/treegrid/#allowfiltering) to true. Filtering options can be configured through [`filterSettings`](../../api/treegrid/#filtersettings). +Filtering allows you to view specific or related records based on filter criteria. To enable filtering in the TreeGrid, set the [`allowFiltering`](../../api/treegrid#allowfiltering) to true. Filtering options can be configured through [`filterSettings`](../../api/treegrid#filtersettings). To use filter, inject the `Filter` module in the treegrid. @@ -42,13 +41,13 @@ To use filter, inject the `Filter` module in the treegrid. {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/filtering-cs9" %} {% endif %} -> * You can apply and clear filtering by using [`filterByColumn`](../../api/treegrid/#filterbycolumn) and [`clearFiltering`](../../api/treegrid/#clearfiltering) methods. +> * You can apply and clear filtering by using [`filterByColumn`](../../api/treegrid#filterbycolumn) and [`clearFiltering`](../../api/treegrid#clearfiltering) methods. > * To disable filtering for a particular column, set -[`columns.allowFiltering`](../../api/treegrid/column/#allowfiltering) to false. +[`columns.allowFiltering`](../../api/treegrid/column#allowfiltering) to false. ## Filter hierarchy modes -TreeGrid provides support for a set of filtering modes with [`filterSettings.filterHierarchyMode`](../../api/treegrid/filterSettingsModel/#hierarchymode) property. +TreeGrid provides support for a set of filtering modes with [`filterSettings.filterHierarchyMode`](../../api/treegrid/filterSettingsModel#hierarchymode) property. The below are the type of filter mode available in TreeGrid. * **Parent** : This is the default filter hierarchy mode in TreeGrid. The filtered records are displayed with its parent records, if the filtered records not have any parent record then the filtered records only displayed. @@ -89,7 +88,7 @@ The below are the type of filter mode available in TreeGrid. ## Initial filter To apply the filter at initial rendering, set the filter `predicate` object in -[`filterSettings.columns`](../../api/treegrid/filterSettingsModel/#columns). +[`filterSettings.columns`](../../api/treegrid/filterSettingsModel#columns). {% if page.publishingplatform == "typescript" %} @@ -140,7 +139,7 @@ lessthanorequal |Checks whether the value is less than or equal to the specifie ## Diacritics -By default, treegrid ignores diacritic characters while filtering. To include diacritic characters, set the [`filterSettings.ignoreAccent`](../../api/treegrid/filterSettingsModel/#ignoreaccent) as `true`. +By default, treegrid ignores diacritic characters while filtering. To include diacritic characters, set the [`filterSettings.ignoreAccent`](../../api/treegrid/filterSettingsModel#ignoreaccent) as `true`. In the following sample, type **aero** in `Name` column to filter diacritic characters. @@ -171,4 +170,4 @@ In the following sample, type **aero** in `Name` column to filter diacritic char {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/filtering-cs11" %} {% endif %} -> You can refer to our [`JavaScript Tree Grid`](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid example [`JavaScript Tree Grid example`](https://ej2.syncfusion.com/demos/#/material/tree-grid/treegrid-overview.html) to knows how to present and manipulate data. \ No newline at end of file +> You can refer to our [`JavaScript Tree Grid`](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid example [`JavaScript Tree Grid example`](https://ej2.syncfusion.com/demos#/material/tree-grid/treegrid-overview.html) to knows how to present and manipulate data. \ No newline at end of file diff --git a/grid-sdk/javascript/tree-grid/frozen.md b/grid-sdk/javascript/tree-grid/frozen.md index 1ce10223..541a8f71 100644 --- a/grid-sdk/javascript/tree-grid/frozen.md +++ b/grid-sdk/javascript/tree-grid/frozen.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Frozen Columns | Syncfusion description: Learn how to pin or freeze columns in JavaScript TreeGrid to keep important columns visible while scrolling horizontally. platform: grid-sdk -control: Frozen -publishingplatform: grid-sdk +control: Frozen documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -17,7 +16,7 @@ Frozen rows and columns provides an option to make rows and columns always visib To use frozen rows and columns support, inject the `Freeze` module in the tree grid. -In this demo, the [`frozenColumns`](../api/treegrid/#frozencolumns) is set as '2' and the [`frozenRows`](../api/treegrid/#frozenrows) +In this demo, the [`frozenColumns`](../api/treegrid#frozencolumns) is set as '2' and the [`frozenRows`](../api/treegrid#frozenrows) is set as '3'. Hence, the left two columns and top three rows are frozen. {% if page.publishingplatform == "typescript" %} @@ -49,7 +48,7 @@ is set as '3'. Hence, the left two columns and top three rows are frozen. ### Freeze particular columns -You can use [`isFrozen`](../api/treegrid/column/#isfrozen) property to freeze selected columns in tree grid. +You can use [`isFrozen`](../api/treegrid/column#isfrozen) property to freeze selected columns in tree grid. In this demo, the columns with field name `taskName` and `startDate` is frozen using the `isFrozen` property. @@ -83,9 +82,9 @@ the `isFrozen` property. ### Freeze direction -You can freeze the tree grid columns on the left or right side by using the [`column.freeze`](../api/treegrid/column/#freeze) property and the remaining columns will be movable. The tree grid will automatically move the columns to the left or right position based on the [`column.freeze`](../api/treegrid/column/#freeze) value. +You can freeze the tree grid columns on the left or right side by using the [`column.freeze`](../api/treegrid/column#freeze) property and the remaining columns will be movable. The tree grid will automatically move the columns to the left or right position based on the [`column.freeze`](../api/treegrid/column#freeze) value. -Types of the [`column.freeze`](../api/treegrid/column/#freeze) directions: +Types of the [`column.freeze`](../api/treegrid/column#freeze) directions: * **`Left`**: Allows you to freeze the columns at the left. * **`Right`**: Allows you to freeze the columns at the right. @@ -119,7 +118,7 @@ In this demo, the **Task Name** column is frozen at the left and the **Priority* {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/freezedirections-cs1" %} {% endif %} -> * Freeze Direction is not compatible with the [`isFrozen`](../api/treegrid/column/#isfrozen) and [`frozenColumns`](../api/treegrid/#frozencolumns) properties. +> * Freeze Direction is not compatible with the [`isFrozen`](../api/treegrid/column#isfrozen) and [`frozenColumns`](../api/treegrid#frozencolumns) properties. ### Limitations of frozen tree grid diff --git a/grid-sdk/javascript/tree-grid/getting-started.md b/grid-sdk/javascript/tree-grid/getting-started.md index 5e853f50..69f9641e 100644 --- a/grid-sdk/javascript/tree-grid/getting-started.md +++ b/grid-sdk/javascript/tree-grid/getting-started.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Getting Started | Syncfusion description: Learn how to get started with JavaScript TreeGrid, including installation, configuration, data binding, and basic setup. platform: grid-sdk -control: Getting started -publishingplatform: grid-sdk +control: Getting started documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/global-local.md b/grid-sdk/javascript/tree-grid/global-local.md index ee0ba485..a659fb61 100644 --- a/grid-sdk/javascript/tree-grid/global-local.md +++ b/grid-sdk/javascript/tree-grid/global-local.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Global Localization | Syncfusion description: Learn how to implement global localization in JavaScript TreeGrid, including internationalization, localization, and RTL language support. platform: grid-sdk -control: Global local -publishingplatform: grid-sdk +control: Global local documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -14,7 +13,7 @@ domainurl: https://help.syncfusion.com/grid-sdk ## Localization The [`Localization`](../common/localization) library allows you to localize default text content of the TreeGrid. The treegrid component has static text on some features (like toolbar area text, filter menu text, pager information text, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the -[`locale`](../api/treegrid/#locale) value and translation object. +[`locale`](../api/treegrid#locale) value and translation object. The following list of properties and its values are used in the treegrid. @@ -110,7 +109,7 @@ All | All ### Loading translations -To load translation object in an application, use [`load`](../api/base/l10n/#load) function of the `L10n` class. +To load translation object in an application, use [`load`](../api/base/l10n#load) function of the `L10n` class. The following example demonstrates the TreeGrid in `Deutsch` culture. @@ -181,7 +180,7 @@ When localizing TreeGrid, it's important to include dependent components like Da - Below is an example JSON snippet consolidating the localization keys for dependent components used in TreeGrid using [`load`](../api/base/l10n/#load) function of the `L10n` class and update the `locale` property of treegrid with the culture name used in the `load` function: + Below is an example JSON snippet consolidating the localization keys for dependent components used in TreeGrid using [`load`](../api/base/l10n#load) function of the `L10n` class and update the `locale` property of treegrid with the culture name used in the `load` function: ```json L10n.load({ @@ -212,7 +211,7 @@ When localizing TreeGrid, it's important to include dependent components like Da ## Internationalization -The [`Internationalization`](../common/internationalization) library is used to globalize number, date, and time values in treegrid component using format strings in the [`columns.format`](../api/treegrid/column/#format). +The [`Internationalization`](../common/internationalization) library is used to globalize number, date, and time values in treegrid component using format strings in the [`columns.format`](../api/treegrid/column#format). {% if page.publishingplatform == "typescript" %} @@ -242,11 +241,11 @@ The [`Internationalization`](../common/internationalization) library is used to {% endif %} > * In the above sample, `Price` column is formatted by `NumberFormatOptions`. -> * By default, [`locale`](../api/treegrid/#locale) value is `en-US`. If you want to change the `en-US` culture to a different culture, you have to change the [`locale`](../api/treegrid/#locale) accordingly. +> * By default, [`locale`](../api/treegrid#locale) value is `en-US`. If you want to change the `en-US` culture to a different culture, you have to change the [`locale`](../api/treegrid#locale) accordingly. ## Right to left (RTL) -RTL provides an option to switch the text direction and layout of the TreeGrid component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Grid, set the [`enableRtl`](../api/treegrid/#enablertl) to true. +RTL provides an option to switch the text direction and layout of the TreeGrid component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Grid, set the [`enableRtl`](../api/treegrid#enablertl) to true. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/how-to/add-parameter-for-filtering.md b/grid-sdk/javascript/tree-grid/how-to/add-parameter-for-filtering.md index 27861daf..471fee41 100644 --- a/grid-sdk/javascript/tree-grid/how-to/add-parameter-for-filtering.md +++ b/grid-sdk/javascript/tree-grid/how-to/add-parameter-for-filtering.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Filtering Parameters | Syncfusion description: Learn how to add filtering parameters in JavaScript TreeGrid, including menu filter customization, parameter handling, and advanced filtering options. platform: grid-sdk -control: Add parameter for filtering -publishingplatform: grid-sdk +control: Add parameter for filtering documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/how-to/cascading-drop-down-list-with-treegrid-editing.md b/grid-sdk/javascript/tree-grid/how-to/cascading-drop-down-list-with-treegrid-editing.md index a9639f98..952ac319 100644 --- a/grid-sdk/javascript/tree-grid/how-to/cascading-drop-down-list-with-treegrid-editing.md +++ b/grid-sdk/javascript/tree-grid/how-to/cascading-drop-down-list-with-treegrid-editing.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Cascading Drop-Down Editing | Syncfusion description: Learn how to implement cascading drop down lists with editing in the JavaScript TreeGrid of Essential JS 2 using cell edit templates. platform: grid-sdk -control: Cascading drop down list with treegrid editing -publishingplatform: grid-sdk +control: Cascading drop down list with treegrid editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/how-to/change-header-text-dynamically.md b/grid-sdk/javascript/tree-grid/how-to/change-header-text-dynamically.md index 32d4dc28..c565e155 100644 --- a/grid-sdk/javascript/tree-grid/how-to/change-header-text-dynamically.md +++ b/grid-sdk/javascript/tree-grid/how-to/change-header-text-dynamically.md @@ -3,21 +3,20 @@ layout: post title: JavaScript TreeGrid Change Header Text Dynamically | Syncfusion description: Learn how to dynamically change header text in JavaScript TreeGrid to customize column headers and improve user experience. platform: grid-sdk -control: Change header text dynamically -publishingplatform: grid-sdk +control: Change header text dynamically documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Change Header Text Dynamically in JavaScript TreeGrid -You can change the column [`headerText`](../../api/treegrid/column/#headertext) dynamically through an external button. +You can change the column [`headerText`](../../api/treegrid/column#headertext) dynamically through an external button. Follow the given steps to change the header text dynamically: **Step 1**: -Get the column object corresponding to the field name by using the [`getColumnByField`](../../api/treegrid/#getcolumnbyfield) method. Then, change the header text value. +Get the column object corresponding to the field name by using the [`getColumnByField`](../../api/treegrid#getcolumnbyfield) method. Then, change the header text value. ```ts let column = treegrid.getColumnByField("taskName"); // Get column object. @@ -27,7 +26,7 @@ column.headerText = 'Changed Text'; **Step 2**: -To reflect the changes in the treegrid header, invoke the [`refreshColumns`](../../api/treegrid/#refreshcolumns) method. +To reflect the changes in the treegrid header, invoke the [`refreshColumns`](../../api/treegrid#refreshcolumns) method. ```ts diff --git a/grid-sdk/javascript/tree-grid/how-to/change-orientation-of-header-text.md b/grid-sdk/javascript/tree-grid/how-to/change-orientation-of-header-text.md index 6518eecd..14e1b22e 100644 --- a/grid-sdk/javascript/tree-grid/how-to/change-orientation-of-header-text.md +++ b/grid-sdk/javascript/tree-grid/how-to/change-orientation-of-header-text.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Change Header Text Orientation | Syncfusion description: Learn how to change header text orientation in JavaScript TreeGrid to optimize column header display and improve readability. platform: grid-sdk -control: Change orientation of header text -publishingplatform: grid-sdk +control: Change orientation of header text documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Change Header Text Orientation in JavaScript TreeGrid -You can change the orientation of the header text by using the [`customAttributes`](../../api/treegrid/column/#customattributes) property. +You can change the orientation of the header text by using the [`customAttributes`](../../api/treegrid/column#customattributes) property. Ensure the following steps: @@ -28,7 +27,7 @@ Create a CSS class with orientation style for the treegrid header cell. **Step 2**: -Add the custom CSS class to a particular column by using the [`customAttributes`](../../api/treegrid/column/#customattributes) property. +Add the custom CSS class to a particular column by using the [`customAttributes`](../../api/treegrid/column#customattributes) property. ```ts { field: 'taskName', headerText: 'Task Name', textAlign: 'Center', customAttributes: {class: 'orientationcss'}, width: 80 } diff --git a/grid-sdk/javascript/tree-grid/how-to/custom-tool-tip-for-columns.md b/grid-sdk/javascript/tree-grid/how-to/custom-tool-tip-for-columns.md index 0dd1f7fd..c7ccda4e 100644 --- a/grid-sdk/javascript/tree-grid/how-to/custom-tool-tip-for-columns.md +++ b/grid-sdk/javascript/tree-grid/how-to/custom-tool-tip-for-columns.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Custom Column Tooltips | Syncfusion description: Learn how to add custom tooltips for columns in JavaScript TreeGrid using the Tooltip component and queryCellInfo event. platform: grid-sdk -control: Custom tool tip for columns -publishingplatform: grid-sdk +control: Custom tool tip for columns documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/how-to/customize-column-styles.md b/grid-sdk/javascript/tree-grid/how-to/customize-column-styles.md index 152ac611..cd594ad1 100644 --- a/grid-sdk/javascript/tree-grid/how-to/customize-column-styles.md +++ b/grid-sdk/javascript/tree-grid/how-to/customize-column-styles.md @@ -3,21 +3,20 @@ layout: post title: JavaScript TreeGrid Column Style Customization | Syncfusion description: Learn how to customize column styles in JavaScript TreeGrid using customAttributes, including applying custom CSS to header and content cells. platform: grid-sdk -control: Customize column styles -publishingplatform: grid-sdk +control: Customize column styles documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Customize Column Styles in JavaScript TreeGrid -You can customise the appearance of the header and content of a particular column using the [`customAttributes`](../../api/treegrid/column/#customattributes) property. +You can customize the appearance of the header and content of a particular column using the [`customAttributes`](../../api/treegrid/column#customattributes) property. To customize the Tree Grid column, follow the given steps: **Step 1**: -Create a CSS class with custom style to override the default style for rowcell and header cell. +Create a CSS class with custom style to override the default style for row cell and header cell. ``` .e-treegrid .e-rowcell.customcss{ @@ -38,7 +37,7 @@ Create a CSS class with custom style to override the default style for rowcell a **Step 2**: -Add the custom CSS class to the specified column by using the [`customAttributes`](../../api/treegrid/column/#customattributes) property. +Add the custom CSS class to the specified column by using the [`customAttributes`](../../api/treegrid/column#customattributes) property. ```ts { field: 'taskName', headerText: 'Task Name', customAttributes: {class: 'customcss'}, width: 100 }, diff --git a/grid-sdk/javascript/tree-grid/how-to/customize-pager-drop-down.md b/grid-sdk/javascript/tree-grid/how-to/customize-pager-drop-down.md index 6f27264f..4e2e1b14 100644 --- a/grid-sdk/javascript/tree-grid/how-to/customize-pager-drop-down.md +++ b/grid-sdk/javascript/tree-grid/how-to/customize-pager-drop-down.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Pager Dropdown Customization | Syncfusion description: Learn how to customize the pager dropdown in JavaScript TreeGrid of Essential JS 2, including setting page size values using pageSettings. platform: grid-sdk -control: Customize pager drop down -publishingplatform: grid-sdk +control: Customize pager drop down documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Customize Pager Dropdown in JavaScript TreeGrid -To customize default values of pager dropdown, you need to define [`pageSizes`](https://ej2.syncfusion.com/angular/documentation/api/treegrid/pageSettings/#pagesizes) as array of strings. +To customize default values of pager dropdown, you need to define [`pageSizes`](https://ej2.syncfusion.com/angular/documentation/api/treegrid/pageSettings#pagesizes) as array of strings. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/how-to/customize-the-edit-dialog.md b/grid-sdk/javascript/tree-grid/how-to/customize-the-edit-dialog.md index c35307d0..2bf681e2 100644 --- a/grid-sdk/javascript/tree-grid/how-to/customize-the-edit-dialog.md +++ b/grid-sdk/javascript/tree-grid/how-to/customize-the-edit-dialog.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Customize Edit Dialog | Syncfusion description: Learn how to customize the edit dialog in JavaScript TreeGrid to tailor editing interfaces and enhance user interaction. platform: grid-sdk -control: Customize the edit dialog -publishingplatform: grid-sdk +control: Customize the edit dialog documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Customize the Edit Dialog in JavaScript TreeGrid -You can customize the appearance of the edit dialog in the [`actionComplete`](../api/treegrid/#actioncomplete) event based on **requestType** as **beginEdit** or **add**. +You can customize the appearance of the edit dialog in the [`actionComplete`](../api/treegrid#actioncomplete) event based on **requestType** as **beginEdit** or **add**. In the below example, we have changed the dialog's header text for editing and adding records. diff --git a/grid-sdk/javascript/tree-grid/how-to/customize-the-empty-record-template.md b/grid-sdk/javascript/tree-grid/how-to/customize-the-empty-record-template.md index f039df9b..5de153c6 100644 --- a/grid-sdk/javascript/tree-grid/how-to/customize-the-empty-record-template.md +++ b/grid-sdk/javascript/tree-grid/how-to/customize-the-empty-record-template.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Empty Record Template | Syncfusion description: Learn how to customize the empty record template in JavaScript TreeGrid to display custom messages, images, and content when no records are available. platform: grid-sdk -control: Customize the Empty Record Template -publishingplatform: grid-sdk +control: Customize the Empty Record Template documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/how-to/customize-the-icon-for-column-menu.md b/grid-sdk/javascript/tree-grid/how-to/customize-the-icon-for-column-menu.md index ac3b7b74..48736580 100644 --- a/grid-sdk/javascript/tree-grid/how-to/customize-the-icon-for-column-menu.md +++ b/grid-sdk/javascript/tree-grid/how-to/customize-the-icon-for-column-menu.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Customize Column Menu Icon | Syncfusion description: Learn how to customize the column menu icon in JavaScript TreeGrid to enhance the user interface and align with application design requirements. platform: grid-sdk -control: Customize the icon for column menu -publishingplatform: grid-sdk +control: Customize the icon for column menu documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/how-to/display-foreign-key-values-in-treegrid.md b/grid-sdk/javascript/tree-grid/how-to/display-foreign-key-values-in-treegrid.md index 035d2b34..b550a534 100644 --- a/grid-sdk/javascript/tree-grid/how-to/display-foreign-key-values-in-treegrid.md +++ b/grid-sdk/javascript/tree-grid/how-to/display-foreign-key-values-in-treegrid.md @@ -3,17 +3,16 @@ layout: post title: JavaScript TreeGrid Display Foreign Key Values | Syncfusion description: Learn how to display foreign key values in JavaScript TreeGrid by mapping related data sources and showing meaningful values instead of key identifiers. platform: grid-sdk -control: Display foreign key values in treegrid -publishingplatform: grid-sdk +control: Display foreign key values in treegrid documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Display Foreign Key Values in JavaScript TreeGrid -Since Tree Grid Databinding concept is of hierarchy relationship, we do not provide in-built support for foreignKey datasource. +Since Tree Grid Data binding concept is of hierarchy relationship, we do not provide in-built support for foreignKey datasource. -To display the foreignKey value at initial rendering, we can use the [`queryCellInfo`](../api/treegrid/#querycellinfo) event of the Tree Grid and also by using the [`editType`](../api/treegrid/column/#edittype) and [`columns.edit`](../api/treegrid/column/#edit) properties of Tree Grid Column, we can render Dropdownlist with external or foreign dataSource. +To display the foreignKey value at initial rendering, we can use the [`queryCellInfo`](../api/treegrid#querycellinfo) event of the Tree Grid and also by using the [`editType`](../api/treegrid/column#edittype) and [`columns.edit`](../api/treegrid/column#edit) properties of Tree Grid Column, we can render DropDownList with external or foreign dataSource. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/how-to/enable-disable-treegrid-and-its-actions.md b/grid-sdk/javascript/tree-grid/how-to/enable-disable-treegrid-and-its-actions.md index 01bac3d9..dd6775f4 100644 --- a/grid-sdk/javascript/tree-grid/how-to/enable-disable-treegrid-and-its-actions.md +++ b/grid-sdk/javascript/tree-grid/how-to/enable-disable-treegrid-and-its-actions.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Enable or Disable Actions | Syncfusion description: Learn how to enable or disable the JavaScript TreeGrid and its actions using custom CSS to control user interaction. platform: grid-sdk -control: Enable disable treegrid and its actions -publishingplatform: grid-sdk +control: Enable disable treegrid and its actions documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/how-to/exporting-filtered-data.md b/grid-sdk/javascript/tree-grid/how-to/exporting-filtered-data.md index bc0f8f44..dcfead0f 100644 --- a/grid-sdk/javascript/tree-grid/how-to/exporting-filtered-data.md +++ b/grid-sdk/javascript/tree-grid/how-to/exporting-filtered-data.md @@ -3,17 +3,16 @@ layout: post title: JavaScript TreeGrid Filtered Data Export | Syncfusion description: Learn how to export filtered data in the JavaScript TreeGrid, including specifying filtered results using PdfExportProperties for exporting. platform: grid-sdk -control: Exporting filtered data -publishingplatform: grid-sdk +control: Exporting filtered data documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Exporting Filtered Data in JavaScript TreeGrid -You can export the filtered data by defining the resulted data in [`PdfExportProperties.dataSource`](../../api/grid/pdfExportProperties/#datasource) before export. +You can export the filtered data by defining the resulted data in [`PdfExportProperties.dataSource`](../../api/grid/pdfExportProperties#datasource) before export. -In the below Pdf exporting demo, We have gotten the filtered data from the filteredResult of Tree Grid filterModule and then defines the resulted data in [`PdfExportProperties.dataSource`](../../api/grid/pdfExportProperties/#datasource) and pass it to [`pdfExport`](../api/treegrid/#pdfexport) method. +In the below PDF exporting demo, We have gotten the filtered data from the filteredResult of Tree Grid filterModule and then defines the resulted data in [`PdfExportProperties.dataSource`](../../api/grid/pdfExportProperties#datasource) and pass it to [`pdfExport`](../api/treegrid#pdfexport) method. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/how-to/exporting-selected-data.md b/grid-sdk/javascript/tree-grid/how-to/exporting-selected-data.md index ddb6be82..368a5bc7 100644 --- a/grid-sdk/javascript/tree-grid/how-to/exporting-selected-data.md +++ b/grid-sdk/javascript/tree-grid/how-to/exporting-selected-data.md @@ -3,17 +3,16 @@ layout: post title: JavaScript TreeGrid Export Selected Data | Syncfusion description: Learn how to export selected records from JavaScript TreeGrid to Excel, PDF, and other formats for efficient data sharing and reporting. platform: grid-sdk -control: Exporting selected data -publishingplatform: grid-sdk +control: Exporting selected data documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Export Selected Data in JavaScript TreeGrid -You can export the selected records data by passing it to [`PdfExportProperties.dataSource`](../../api/grid/pdfExportProperties/) or [`ExcelExportProperties.dataSource`](../../api/grid/excelExportProperties/) property in the [`toolbarClick`](../../api/grid/#toolbarclick) event. +You can export the selected records data by passing it to [`PdfExportProperties.dataSource`](../../api/grid/pdfExportProperties) or [`ExcelExportProperties.dataSource`](../../api/grid/excelExportProperties) property in the [`toolbarClick`](../../api/grid#toolbarclick) event. -In the below exporting demo, we can get the selected records using [`getSelectedRecords`](../api/treegrid/#getselectedrecords) method and pass the selected data to [`pdfExport`](../api/treegrid/#pdfexport) or [`excelExport`](../api/treegrid/#excelExport) methods using respective export properties.. +In the below exporting demo, we can get the selected records using [`getSelectedRecords`](../api/treegrid#getselectedrecords) method and pass the selected data to [`pdfExport`](../api/treegrid#pdfexport) or [`excelExport`](../api/treegrid#excelExport) methods using respective export properties.. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list.md b/grid-sdk/javascript/tree-grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list.md index 3109ef58..42bcf3f1 100644 --- a/grid-sdk/javascript/tree-grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list.md +++ b/grid-sdk/javascript/tree-grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid DropDownList Data & Filtering | Syncfusion description: Learn how to provide a custom data source and enable filtering for DropDownList in the JavaScript TreeGrid with column edit parameters. platform: grid-sdk -control: Provide custom data source and enabling filtering to drop down list -publishingplatform: grid-sdk +control: Provide custom data source and enabling filtering to drop down list documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- -# Custom Data Source and Filtering for DropDownList in JavaScript TreeGrid +# Custom Data Source for Filterable DropDownList in JavaScript TreeGrid -You can provide data source to the DropDownList by using the **params** of [`columns.edit`](../api/treegrid/column/#edit) property. +You can provide data source to the DropDownList by using the **params** of [`columns.edit`](../api/treegrid/column#edit) property. While setting new data source using edit params, you must specify a new **query** property for the DropDownList as follows, @@ -27,9 +26,9 @@ While setting new data source using edit params, you must specify a new **query* } ``` -You can also enable filtering for the DropDownList by passing the [`allowFiltering`](../../api/drop-down-list/#allowfiltering) as **true** to the edit params. +You can also enable filtering for the DropDownList by passing the [`allowFiltering`](../../api/drop-down-list#allowfiltering) as **true** to the edit params. -In the below demo, DropDownList is rendered with custom [`dataSource`](../../api/drop-down-list/#datasource) for the *Priority* column and enabled filtering to search DropDownList items. +In the below demo, DropDownList is rendered with custom [`dataSource`](../../api/drop-down-list#datasource) for the *Priority* column and enabled filtering to search DropDownList items. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/how-to/refresh-the-data-source.md b/grid-sdk/javascript/tree-grid/how-to/refresh-the-data-source.md index 9b4a6ae9..0292cb6c 100644 --- a/grid-sdk/javascript/tree-grid/how-to/refresh-the-data-source.md +++ b/grid-sdk/javascript/tree-grid/how-to/refresh-the-data-source.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Refresh Data Source | Syncfusion description: Learn how to refresh the data source in JavaScript TreeGrid to update records dynamically and keep displayed data synchronized with changes. platform: grid-sdk -control: Refresh the data source -publishingplatform: grid-sdk +control: Refresh the data source documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -30,7 +29,7 @@ Add/delete the data source record by using the following code. **Step 2**: -Refresh the Tree Grid after the data source change by using the [`refresh`](../../api/treegrid/#refresh) method. +Refresh the Tree Grid after the data source change by using the [`refresh`](../../api/treegrid#refresh) method. ```ts treegrid.refresh(); // refresh the Grid. diff --git a/grid-sdk/javascript/tree-grid/how-to/render-other-component-in-column.md b/grid-sdk/javascript/tree-grid/how-to/render-other-component-in-column.md index 707fb0af..2ae1fead 100644 --- a/grid-sdk/javascript/tree-grid/how-to/render-other-component-in-column.md +++ b/grid-sdk/javascript/tree-grid/how-to/render-other-component-in-column.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Custom Component Rendering | Syncfusion description: Learn how to render custom components in columns using the template property of the JavaScript TreeGrid. platform: grid-sdk -control: Render other component in column -publishingplatform: grid-sdk +control: Render other component in column documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/how-to/restrict-decimal-points-while-treegrid-editing.md b/grid-sdk/javascript/tree-grid/how-to/restrict-decimal-points-while-treegrid-editing.md index fb72d360..a047a1c4 100644 --- a/grid-sdk/javascript/tree-grid/how-to/restrict-decimal-points-while-treegrid-editing.md +++ b/grid-sdk/javascript/tree-grid/how-to/restrict-decimal-points-while-treegrid-editing.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Decimal Point Restriction | Syncfusion description: Learn how to restrict decimal points while editing in the JavaScript TreeGrid using NumericTextBox configuration. platform: grid-sdk -control: Restrict decimal points while treegrid editing -publishingplatform: grid-sdk +control: Restrict decimal points while treegrid editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/how-to/row-cell-customization.md b/grid-sdk/javascript/tree-grid/how-to/row-cell-customization.md index e5339c26..ecefab79 100644 --- a/grid-sdk/javascript/tree-grid/how-to/row-cell-customization.md +++ b/grid-sdk/javascript/tree-grid/how-to/row-cell-customization.md @@ -3,17 +3,16 @@ layout: post title: JavaScript TreeGrid Row Cell Customization | Syncfusion description: Learn how to customize rows and cells in the JavaScript TreeGrid using queryCellInfo and rowDataBound events. platform: grid-sdk -control: Row cell customization -publishingplatform: grid-sdk +control: Row cell customization documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Row Cell Customization in JavaScript TreeGrid -In Tree Grid we can customize the row and cell using [`queryCellInfo`](../api/treegrid/#querycellinfo) and [`rowDataBound`](../api/treegrid/#rowdatabound) events of Tree Grid. +In Tree Grid we can customize the row and cell using [`queryCellInfo`](../api/treegrid#querycellinfo) and [`rowDataBound`](../api/treegrid#rowdatabound) events of Tree Grid. -In the below demo, we customize and show the command buttons only for the parent rows using [`queryCellInfo`](../api/treegrid/#querycellinfo) and [`rowDataBound`](../api/treegrid/#rowdatabound) events of Tree Grid. +In the below demo, we customize and show the command buttons only for the parent rows using [`queryCellInfo`](../api/treegrid#querycellinfo) and [`rowDataBound`](../api/treegrid#rowdatabound) events of Tree Grid. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/how-to/select-treegrid-rows-based-on-certain-condition.md b/grid-sdk/javascript/tree-grid/how-to/select-treegrid-rows-based-on-certain-condition.md index ba4a846b..f94c2019 100644 --- a/grid-sdk/javascript/tree-grid/how-to/select-treegrid-rows-based-on-certain-condition.md +++ b/grid-sdk/javascript/tree-grid/how-to/select-treegrid-rows-based-on-certain-condition.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Conditional Row Selection | Syncfusion description: Learn how to select TreeGrid rows based on specific conditions using the selectRows method in the JavaScript TreeGrid component. platform: grid-sdk -control: Select treegrid rows based on certain condition -publishingplatform: grid-sdk +control: Select treegrid rows based on certain condition documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Select Rows Based on Conditions in JavaScript TreeGrid -You can select the specific row in the Tree Grid based on a certain condition by using the [`selectRows`](../api/treegrid/#selectrows) method in the [`dataBound`](../api/treegrid/#databound) event of Tree Grid. +You can select the specific row in the Tree Grid based on a certain condition by using the [`selectRows`](../api/treegrid#selectrows) method in the [`dataBound`](../api/treegrid#databound) event of Tree Grid. In the below demo, we have selected the Tree Grid rows only when *Duration* column value greater than *4*. diff --git a/grid-sdk/javascript/tree-grid/how-to/show-spinner-while-exporting.md b/grid-sdk/javascript/tree-grid/how-to/show-spinner-while-exporting.md index bc034009..c3e838ab 100644 --- a/grid-sdk/javascript/tree-grid/how-to/show-spinner-while-exporting.md +++ b/grid-sdk/javascript/tree-grid/how-to/show-spinner-while-exporting.md @@ -3,19 +3,18 @@ layout: post title: JavaScript TreeGrid Show Spinner While Exporting | Syncfusion description: Learn how to display a loading spinner during export operations in JavaScript TreeGrid to provide visual feedback and improve user experience. platform: grid-sdk -control: Show spinner while exporting -publishingplatform: grid-sdk +control: Show spinner while exporting documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Show Spinner While Exporting in JavaScript TreeGrid -You can show/ hide spinner component while exporting the Tree Grid using [`showSpinner`](../api/treegrid/#showspinner)/ [`hideSpinner`](../api/treegrid/#hidespinner) methods. You can use [`toolbarClick`](../api/treegrid/#toolbarclick) event to show spinner before exporting and hide a spinner in the [`pdfExportComplete`](../api/treegrid/#pdfexportcomplete) or [`excelExportComplete`](../api/treegrid/#excelexportcomplete) event after the exporting. +You can show/ hide spinner component while exporting the Tree Grid using [`showSpinner`](../api/treegrid#showspinner)/ [`hideSpinner`](../api/treegrid#hidespinner) methods. You can use [`toolbarClick`](../api/treegrid#toolbarclick) event to show spinner before exporting and hide a spinner in the [`pdfExportComplete`](../api/treegrid#pdfexportcomplete) or [`excelExportComplete`](../api/treegrid#excelexportcomplete) event after the exporting. -In the [`toolbarClick`](../../api/grid/#toolbarclick) event, based on the parameter **args.item.text** as **PDF Export** or **Excel Export** we can call the [`showSpinner`](../api/treegrid/#showspinner) method from Tree Grid instance. +In the [`toolbarClick`](../../api/grid#toolbarclick) event, based on the parameter **args.item.text** as **PDF Export** or **Excel Export** we can call the [`showSpinner`](../api/treegrid#showspinner) method from Tree Grid instance. -In the [`pdfExportComplete`](../api/treegrid/#pdfexportcomplete) or [`excelExportComplete`](../api/treegrid/#excelexportcomplete) event, We can call the [`hideSpinner`](../api/treegrid/#hidespinner) method. +In the [`pdfExportComplete`](../api/treegrid#pdfexportcomplete) or [`excelExportComplete`](../api/treegrid#excelexportcomplete) event, We can call the [`hideSpinner`](../api/treegrid#hidespinner) method. In the below demo, we have rendered the default spinner component when exporting the Tree Grid. diff --git a/grid-sdk/javascript/tree-grid/how-to/treegrid-styling.md b/grid-sdk/javascript/tree-grid/how-to/treegrid-styling.md index b26095a7..9abaf308 100644 --- a/grid-sdk/javascript/tree-grid/how-to/treegrid-styling.md +++ b/grid-sdk/javascript/tree-grid/how-to/treegrid-styling.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Styling | Syncfusion description: Learn how to customize the appearance of JavaScript TreeGrid using CSS classes, Theme Studio, and advanced styling techniques. platform: grid-sdk -control: Treegrid styling -publishingplatform: grid-sdk +control: Treegrid styling documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/how-to/use-wizard-like-dialog-editing.md b/grid-sdk/javascript/tree-grid/how-to/use-wizard-like-dialog-editing.md index 02f5869b..56da2484 100644 --- a/grid-sdk/javascript/tree-grid/how-to/use-wizard-like-dialog-editing.md +++ b/grid-sdk/javascript/tree-grid/how-to/use-wizard-like-dialog-editing.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Wizard-Like Dialog Editing | Syncfusion description: Learn how to implement wizard-like dialog editing in JavaScript TreeGrid to guide users through multi-step record creation and editing processes. platform: grid-sdk -control: Use wizard like dialog editing -publishingplatform: grid-sdk +control: Use wizard like dialog editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Use Wizard-Like Dialog Editing in JavaScript TreeGrid -Wizard helps you create intuitive step-by-step forms to fill. You can achieve the wizard like editing by using the dialog template feature. It support your own editing template by defining [`editSettings.mode`](../api/treegrid/editSettings/#mode) as **Dialog** and [`editSetting.template`](../api/treegrid/editSettings/#template) as SCRIPT element ID or HTML string which holds the template. +Wizard helps you create intuitive step-by-step forms to fill. You can achieve the wizard like editing by using the dialog template feature. It support your own editing template by defining [`editSettings.mode`](../api/treegrid/editSettings#mode) as **Dialog** and [`editSetting.template`](../api/treegrid/editSettings#template) as SCRIPT element ID or HTML string which holds the template. The following example demonstrate the wizard like editing in the Tree Grid with the obtrusive Validation. diff --git a/grid-sdk/javascript/tree-grid/how-to/using-tab-inside-the-dialog-editing.md b/grid-sdk/javascript/tree-grid/how-to/using-tab-inside-the-dialog-editing.md index 8f278044..3c605e90 100644 --- a/grid-sdk/javascript/tree-grid/how-to/using-tab-inside-the-dialog-editing.md +++ b/grid-sdk/javascript/tree-grid/how-to/using-tab-inside-the-dialog-editing.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Tabs in Dialog Editing | Syncfusion description: Learn how to use tabs within dialog editing in JavaScript TreeGrid to organize form fields and create a streamlined editing experience. platform: grid-sdk -control: Using tab inside the dialog editing -publishingplatform: grid-sdk +control: Using tab inside the dialog editing documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Using Tabs Inside Dialog Editing in JavaScript TreeGrid -You can use [`tab`](../../../tab) component inside dialog edit UI using dialog template feature. The dialog template feature can be enabled by defining [`editSettings.mode`](../api/treegrid/editSettings/#mode) as `Dialog` and [`editSetting.template`](../api/treegrid/editSettings/#template) as SCRIPT element ID or HTML string which holds the template. +You can use [`tab`](../../../tab) component inside dialog edit UI using dialog template feature. The dialog template feature can be enabled by defining [`editSettings.mode`](../api/treegrid/editSettings#mode) as `Dialog` and [`editSetting.template`](../api/treegrid/editSettings#template) as SCRIPT element ID or HTML string which holds the template. The following example demonstrate the usage of tab control inside the dialog template. diff --git a/grid-sdk/javascript/tree-grid/immutable-mode.md b/grid-sdk/javascript/tree-grid/immutable-mode.md index 1f0461cd..4ee36c55 100644 --- a/grid-sdk/javascript/tree-grid/immutable-mode.md +++ b/grid-sdk/javascript/tree-grid/immutable-mode.md @@ -3,19 +3,18 @@ layout: post title: JavaScript TreeGrid Immutable Mode | Syncfusion description: Learn how to use immutable mode in JavaScript TreeGrid to optimize rendering performance and efficiently update data changes. platform: grid-sdk -control: Immutable mode -publishingplatform: grid-sdk +control: Immutable mode documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Immutable Mode in JavaScript TreeGrid -The immutable mode optimizes the Tree Grid re-rendering performance by using the object reference and [`deep compare`](https://dmitripavlutin.com/how-to-compare-objects-in-javascript/#4-deep-equality) concept. When performing the Tree Grid actions, it will only re-render the modified or newly added rows and prevent the re-rendering of the unchanged rows. +The immutable mode optimizes the Tree Grid re-rendering performance by using the object reference and [`deep compare`](https://dmitripavlutin.com/how-to-compare-objects-in-javascript#4-deep-equality) concept. When performing the Tree Grid actions, it will only re-render the modified or newly added rows and prevent the re-rendering of the unchanged rows. To enable this feature, you have to set the [`enableImmutableMode`](../api/treegrid#enableimmutablemode) property as **true**. ->* This feature uses the primary key value for data comparison. So, you need to provide the [`isPrimaryKey`](../api/treegrid/column/#isprimarykey) column. +>* This feature uses the primary key value for data comparison. So, you need to provide the [`isPrimaryKey`](../api/treegrid/column#isprimarykey) column. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/infinite-scroll.md b/grid-sdk/javascript/tree-grid/infinite-scroll.md index 2ae7e8e2..e543ad66 100644 --- a/grid-sdk/javascript/tree-grid/infinite-scroll.md +++ b/grid-sdk/javascript/tree-grid/infinite-scroll.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Infinite Scroll | Syncfusion description: Learn how to enable and configure infinite scroll in the JavaScript TreeGrid for efficient large data handling, cache management, and best practices. platform: grid-sdk -control: Infinite scroll -publishingplatform: grid-sdk +control: Infinite scroll documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -117,7 +116,7 @@ To enable the cache mode in Infinite scrolling, set `infiniteScrollSettings.enab * Cell selection will not be persisted in cache mode. * Infinite scrolling is not compatible with batch editing, cell editing, detail template and hierarchy features. * The aggregated information and total group items are displayed based on the current view items. To get these information regardless of the view items, refer to the -* Programmatic selection using the [`selectRows`](../api/treegrid/#selectrows) and [`selectRow`](../api/treegrid/#selectrow) method is not supported in infinite scrolling. +* Programmatic selection using the [`selectRows`](../api/treegrid#selectrows) and [`selectRow`](../api/treegrid#selectrow) method is not supported in infinite scrolling. * Infinite scrolling does not support rendering records in a collapsed state. All records must be fully expanded at initial rendering for proper functionality. > You can refer to our [`JavaScript Tree Grid`](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid example [`JavaScript Tree Grid example`](https://ej2.syncfusion.com/demos/#/bootstrap5/tree-grid/treegrid-overview.html) to knows how to present and manipulate data. diff --git a/grid-sdk/javascript/tree-grid/loading-animation.md b/grid-sdk/javascript/tree-grid/loading-animation.md index ff4b8d70..0b963b1e 100644 --- a/grid-sdk/javascript/tree-grid/loading-animation.md +++ b/grid-sdk/javascript/tree-grid/loading-animation.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Loading Animation | Syncfusion description: Learn how to use loading animations in JavaScript TreeGrid, including spinner and shimmer indicators for improved loading experiences. platform: grid-sdk -control: Loading animation -publishingplatform: grid-sdk +control: Loading animation documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/module.md b/grid-sdk/javascript/tree-grid/module.md index c3dd55ad..f65e9ce5 100644 --- a/grid-sdk/javascript/tree-grid/module.md +++ b/grid-sdk/javascript/tree-grid/module.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Modules | Syncfusion description: Learn about module injection in JavaScript TreeGrid, including available feature modules, dependencies, and their purposes. platform: grid-sdk -control: Module -publishingplatform: grid-sdk +control: Module documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/overview.md b/grid-sdk/javascript/tree-grid/overview.md index 44092f12..322099f1 100644 --- a/grid-sdk/javascript/tree-grid/overview.md +++ b/grid-sdk/javascript/tree-grid/overview.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Key Features | Syncfusion description: Explore the key features of JavaScript TreeGrid, including hierarchical data binding, editing, filtering, sorting, virtualization, and exporting. platform: grid-sdk -control: Index -publishingplatform: grid-sdk +control: Index documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/paging.md b/grid-sdk/javascript/tree-grid/paging.md index 574ba37e..0dc24431 100644 --- a/grid-sdk/javascript/tree-grid/paging.md +++ b/grid-sdk/javascript/tree-grid/paging.md @@ -3,18 +3,17 @@ layout: post title: JavaScript TreeGrid Paging | Syncfusion description: Learn how to use paging in JavaScript TreeGrid, including pagination configuration, customization, and advanced features for managing large datasets. platform: grid-sdk -control: Paging -publishingplatform: grid-sdk +control: Paging documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Paging in JavaScript TreeGrid -Paging provides an option to display TreeGrid data in page segments. To enable paging, set the [`allowPaging`](../api/treegrid/#allowpaging) to true. When paging is enabled, pager component renders at the bottom of the treegrid. -Paging options can be configured through the [`pageSettings`](../api/treegrid/#pagesettings). +Paging provides an option to display TreeGrid data in page segments. To enable paging, set the [`allowPaging`](../api/treegrid#allowpaging) to true. When paging is enabled, pager component renders at the bottom of the treegrid. +Paging options can be configured through the [`pageSettings`](../api/treegrid#pagesettings). -To use paging, inject the [`Page`](../api/treegrid/#pagermodule) module in the treegrid. +To use paging, inject the [`Page`](../api/treegrid#pagermodule) module in the treegrid. {% if page.publishingplatform == "typescript" %} @@ -47,12 +46,12 @@ To use paging, inject the [`Page`](../api/treegrid/#pagermodule) module in the t ## Page Size Mode -Two behaviors are available in TreeGrid paging to display certain number of records in a current page. Following are the two types of [`pageSizeMode`](../api/treegrid/pageSettingsModel/#pagesizemode). +Two behaviors are available in TreeGrid paging to display certain number of records in a current page. Following are the two types of [`pageSizeMode`](../api/treegrid/pageSettingsModel#pagesizemode). -* **All** : This is the default mode. The number of records in a page is based on [`pageSize`](../api/treegrid/pageSettingsModel/#pagesize) property. -* **Root** : The number of root nodes or the 0th level records to be displayed per page is based on [`pageSize`](../api/treegrid/pageSettingsModel/#pagesize) property. +* **All** : This is the default mode. The number of records in a page is based on [`pageSize`](../api/treegrid/pageSettingsModel#pagesize) property. +* **Root** : The number of root nodes or the 0th level records to be displayed per page is based on [`pageSize`](../api/treegrid/pageSettingsModel#pagesize) property. -With [`pageSizeMode`](../api/treegrid/pageSettingsModel/#pagesizemode) property as `Root`, only the root level or the 0th level records are considered in records count. +With [`pageSizeMode`](../api/treegrid/pageSettingsModel#pagesizemode) property as `Root`, only the root level or the 0th level records are considered in records count. {% if page.publishingplatform == "typescript" %} @@ -84,8 +83,8 @@ With [`pageSizeMode`](../api/treegrid/pageSettingsModel/#pagesizemode) property ## Template You can use custom elements inside the pager instead of default elements. -The custom elements can be defined by using the [`template`](../api/treegrid/pageSettingsModel/#template) property. -Inside this template, you can access the [`currentPage`](../api/treegrid/pageSettingsModel/#currentpage), [`pageSize`](../api/treegrid/pageSettingsModel/#pagesize), [`pageCount`](../api/treegrid/pageSettingsModel/#pagecount), `totalPage` and `totalRecordCount` values. +The custom elements can be defined by using the [`template`](../api/treegrid/pageSettingsModel#template) property. +Inside this template, you can access the [`currentPage`](../api/treegrid/pageSettingsModel#currentpage), [`pageSize`](../api/treegrid/pageSettingsModel#pagesize), [`pageCount`](../api/treegrid/pageSettingsModel#pagecount), `totalPage` and `totalRecordCount` values. {% if page.publishingplatform == "typescript" %} @@ -116,7 +115,7 @@ Inside this template, you can access the [`currentPage`](../api/treegrid/pageSet ## Pager with Page Size Dropdown -The pager Dropdown allows you to change the number of records in the TreeGrid dynamically. It can be enabled by defining the [`pageSettings.pageSizes`](../api/treegrid/pageSettingsModel/#pagesizes) property as true. +The pager Dropdown allows you to change the number of records in the TreeGrid dynamically. It can be enabled by defining the [`pageSettings.pageSizes`](../api/treegrid/pageSettingsModel#pagesizes) property as true. ```ts pageSettings: {pageSize: 7, pageSizes: true}, diff --git a/grid-sdk/javascript/tree-grid/pdf-export/adding-header-and-footer.md b/grid-sdk/javascript/tree-grid/pdf-export/adding-header-and-footer.md index 7595276b..621ffaa5 100644 --- a/grid-sdk/javascript/tree-grid/pdf-export/adding-header-and-footer.md +++ b/grid-sdk/javascript/tree-grid/pdf-export/adding-header-and-footer.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid PDF Headers and Footers | Syncfusion description: Learn how to add and customize headers and footers in PDF exports for the JavaScript TreeGrid, including text, page numbers, lines, and images. platform: grid-sdk -control: Adding header and footer -publishingplatform: grid-sdk +control: Adding header and footer documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/pdf-export/exporting-treegrid-in-server.md b/grid-sdk/javascript/tree-grid/pdf-export/exporting-treegrid-in-server.md index 777088dd..3dcb4db2 100644 --- a/grid-sdk/javascript/tree-grid/pdf-export/exporting-treegrid-in-server.md +++ b/grid-sdk/javascript/tree-grid/pdf-export/exporting-treegrid-in-server.md @@ -4,7 +4,6 @@ title: JavaScript TreeGrid PDF Server-Side Export | Syncfusion description: Learn how to export the JavaScript TreeGrid to PDF on the server side using server export libraries and configuration with Essential JS 2. platform: grid-sdk control: Exporting Tree Grid in Server -publishingplatform: grid-sdk documentation: ug --- @@ -15,7 +14,7 @@ The Tree Grid have an option to export the data to PDF in server side using tree ## Server dependencies -The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridExport package, which is available in Essential Studio® and [nuget.org](https://www.nuget.org/).The following list of dependencies is required for tree grid server side PDF exporting action. +The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridExport package, which is available in Essential Studio® and [nuget.org](https://www.nuget.org).The following list of dependencies is required for tree grid server side PDF exporting action. * Syncfusion.EJ2 * Syncfusion.EJ2.TreeGridExport @@ -24,7 +23,7 @@ The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridEx The following code snippet shows server configuration using ASP.NET MVC Controller Action. -To Export the tree grid in server side, You need to call the [`serverPdfExport`](https://ej2.syncfusion.com/documentation/api/treegrid/#serverpdfexport) method for passing the tree grid properties to server exporting action. +To Export the tree grid in server side, You need to call the [`serverPdfExport`](https://ej2.syncfusion.com/documentation/api/treegrid#serverpdfexport) method for passing the tree grid properties to server exporting action. ```ts public IActionResult ServerSideExporting() diff --git a/grid-sdk/javascript/tree-grid/pdf-export/pdf-cell-style-customization.md b/grid-sdk/javascript/tree-grid/pdf-export/pdf-cell-style-customization.md index fb7efd9a..18e71d7c 100644 --- a/grid-sdk/javascript/tree-grid/pdf-export/pdf-cell-style-customization.md +++ b/grid-sdk/javascript/tree-grid/pdf-export/pdf-cell-style-customization.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid PDF Cell Style Customization | Syncfusion description: Learn how to customize PDF cell styles in the JavaScript TreeGrid, including conditional formatting and theme options for PDF export. platform: grid-sdk -control: Pdf cell style customization -publishingplatform: grid-sdk +control: Pdf cell style customization documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/pdf-export/pdf-export-options.md b/grid-sdk/javascript/tree-grid/pdf-export/pdf-export-options.md index 672d09af..a7ba0779 100644 --- a/grid-sdk/javascript/tree-grid/pdf-export/pdf-export-options.md +++ b/grid-sdk/javascript/tree-grid/pdf-export/pdf-export-options.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid PDF Export Options | Syncfusion description: Learn about PDF export options in JavaScript TreeGrid, including exporting selected records, hidden columns, custom fonts, and advanced settings. platform: grid-sdk -control: Pdf export options -publishingplatform: grid-sdk +control: Pdf export options documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -215,7 +214,6 @@ By default, treegrid uses `Helvetica` font in the exported document. You can cha * TimesRoman * Courier * Symbol -* ZapfDingbats The code example for changing default font, diff --git a/grid-sdk/javascript/tree-grid/pdf-export/pdf-export.md b/grid-sdk/javascript/tree-grid/pdf-export/pdf-export.md index acf86d4f..9cbfffdf 100644 --- a/grid-sdk/javascript/tree-grid/pdf-export/pdf-export.md +++ b/grid-sdk/javascript/tree-grid/pdf-export/pdf-export.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid PDF Export | Syncfusion description: Learn how to enable and use PDF export in the JavaScript TreeGrid, including showing a spinner and providing a custom data source. platform: grid-sdk -control: Pdf export -publishingplatform: grid-sdk +control: Pdf export documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -12,7 +11,7 @@ domainurl: https://help.syncfusion.com/grid-sdk # PDF Export in JavaScript TreeGrid PDF export allows exporting TreeGrid data to PDF document. You need to use the - [`pdfExport`](../../api/treegrid/#pdfexport) method for exporting. To enable PDF export in the treegrid, set the [`allowPdfExport`](../../api/treegrid/#allowpdfexport) as true. + [`pdfExport`](../../api/treegrid#pdfexport) method for exporting. To enable PDF export in the treegrid, set the [`allowPdfExport`](../../api/treegrid#allowpdfexport) as true. To use PDF export, inject the `PdfExport` module in treegrid. diff --git a/grid-sdk/javascript/tree-grid/print.md b/grid-sdk/javascript/tree-grid/print.md index 0d4e8822..e820e2e5 100644 --- a/grid-sdk/javascript/tree-grid/print.md +++ b/grid-sdk/javascript/tree-grid/print.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Print | Syncfusion description: Learn how to print JavaScript TreeGrid, including toolbar integration, page setup, column visibility settings, and print customization options. platform: grid-sdk -control: Print -publishingplatform: grid-sdk +control: Print documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Print in JavaScript TreeGrid -To print the TreeGrid, use the [`print`](../api/treegrid/#print) method from treegrid instance. The print option can be displayed on the [`toolbar`](../api/treegrid/#toolbar) by adding the `print` toolbar item. +To print the TreeGrid, use the [`print`](../api/treegrid#print) method from treegrid instance. The print option can be displayed on the [`toolbar`](../api/treegrid#toolbar) by adding the `print` toolbar item. {% if page.publishingplatform == "typescript" %} @@ -46,12 +45,12 @@ Some of the print options cannot be configured through JavaScript code. So, you * [`Chrome`](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1) * [`Firefox`](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox) -* [`Safari`](http://www.mintprintables.com/print-tips/adjust-margins-osx/) +* [`Safari`](http://www.mintprintables.com/print-tips/adjust-margins-osx) * [`IE`](http://www.helpteaching.com/help/print/index.htm) ## Print using an external button -To print the treegrid from an external button, invoke the [`print`](../api/treegrid/#print) method. +To print the treegrid from an external button, invoke the [`print`](../api/treegrid#print) method. {% if page.publishingplatform == "typescript" %} @@ -82,7 +81,7 @@ To print the treegrid from an external button, invoke the [`print`](../api/treeg ## Print the visible page -By default, the treegrid prints all the pages. To print the current page alone, set the [`printMode`](../api/treegrid/#printmode) to `CurrentPage`. +By default, the treegrid prints all the pages. To print the current page alone, set the [`printMode`](../api/treegrid#printmode) to `CurrentPage`. {% if page.publishingplatform == "typescript" %} @@ -121,7 +120,7 @@ To show large number of columns when printing, adjust the scale option from prin ## Show or Hide columns while Printing -You can show a hidden column or hide a visible column while printing the treegrid using [`toolbarClick`](../api/treegrid/#toolbarclick) and [`printComplete`](../api/treegrid/#printcomplete) events. +You can show a hidden column or hide a visible column while printing the treegrid using [`toolbarClick`](../api/treegrid#toolbarclick) and [`printComplete`](../api/treegrid#printcomplete) events. In the `toolbarClick` event, based on `args.item.text` as `Print`. We can show or hide columns by setting `column.visible` property to `true` or `false` respectively. diff --git a/grid-sdk/javascript/tree-grid/row/detail-template.md b/grid-sdk/javascript/tree-grid/row/detail-template.md index c1adee7b..482d89e6 100644 --- a/grid-sdk/javascript/tree-grid/row/detail-template.md +++ b/grid-sdk/javascript/tree-grid/row/detail-template.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Detail Template | Syncfusion description: Learn how to use detail templates in JavaScript TreeGrid to display expandable row content, nested data, and custom detail views. platform: grid-sdk -control: Detail template -publishingplatform: grid-sdk +control: Detail template documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Detail Template in JavaScript TreeGrid -The detail template provides additional information about a particular row. By expanding the parent row the child rows are expanded along with their detail template. The [`detailTemplate`](../../api/treegrid/#detailtemplate) property accepts either the template string or HTML element ID. +The detail template provides additional information about a particular row. By expanding the parent row the child rows are expanded along with their detail template. The [`detailTemplate`](../../api/treegrid#detailtemplate) property accepts either the template string or HTML element ID. To use detail template, inject the DetailRow module in the TreeGrid. diff --git a/grid-sdk/javascript/tree-grid/row/indent.md b/grid-sdk/javascript/tree-grid/row/indent.md index 8b887b6a..dbe3a3d9 100644 --- a/grid-sdk/javascript/tree-grid/row/indent.md +++ b/grid-sdk/javascript/tree-grid/row/indent.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Indent and Outdent | Syncfusion description: Learn how to indent and outdent rows in JavaScript TreeGrid to modify hierarchical relationships and manage parent-child records. platform: grid-sdk -control: Indent -publishingplatform: grid-sdk +control: Indent documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -44,7 +43,7 @@ To use the indent and outdent feature, inject the `RowDD` module in the Tree Gri ## Indent/Outdent a row programmatically -You can change the hierarchy level of record programmatically using [indent](https://ej2.syncfusion.com/javascript/documentation/api/treegrid/#indent) and [outdent](https://ej2.syncfusion.com/javascript/documentation/api/treegrid/#outdent) methods. +You can change the hierarchy level of record programmatically using [indent](https://ej2.syncfusion.com/javascript/documentation/api/treegrid#indent) and [outdent](https://ej2.syncfusion.com/javascript/documentation/api/treegrid#outdent) methods. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/row/row-drag-and-drop.md b/grid-sdk/javascript/tree-grid/row/row-drag-and-drop.md index 2d02be2b..18ebfa14 100644 --- a/grid-sdk/javascript/tree-grid/row/row-drag-and-drop.md +++ b/grid-sdk/javascript/tree-grid/row/row-drag-and-drop.md @@ -1,9 +1,8 @@ --- layout: post title: Row drag and drop in JavaScript TreeGrid component | Syncfusion -description: Learn here all about Row drag and drop in JavaScript TreeGrid of Essential JS 2 and more. +description: Learn how to use Row Drag and Drop in JavaScript TreeGrid to reorder rows, configure drag-and-drop behavior, and update hierarchical data. platform: grid-sdk -control: Row drag and drop publishingplatform: grid-sdk documentation: ug domainurl: https://help.syncfusion.com/grid-sdk @@ -11,13 +10,13 @@ domainurl: https://help.syncfusion.com/grid-sdk # Row Drag and Drop in JavaScript TreeGrid -The TreeGrid rows can be reordered, dropped to another TreeGrid or custom control by enabling the [`allowRowDragAndDrop`](../../api/treegrid/#allowrowdraganddrop) to true. +The TreeGrid rows can be reordered, dropped to another TreeGrid or custom control by enabling the [`allowRowDragAndDrop`](../../api/treegrid#allowrowdraganddrop) to true. To use row drag and drop, inject the `RowDD` module in the TreeGrid. ## Drag and drop within Tree Grid -The TreeGrid row drag and drop allows you to drag and drop TreeGrid rows on the same TreeGrid using drag icon. To enable row drag and drop, set the[`allowRowDragAndDrop`](../../api/treegrid/#allowrowdraganddrop) to true. It provides the way to drop the row above, below or child to the target row with respective to the target row position. +The TreeGrid row drag and drop allows you to drag and drop TreeGrid rows on the same TreeGrid using drag icon. To enable row drag and drop, set the[`allowRowDragAndDrop`](../../api/treegrid#allowrowdraganddrop) to true. It provides the way to drop the row above, below or child to the target row with respective to the target row position. {% if page.publishingplatform == "typescript" %} @@ -47,12 +46,12 @@ The TreeGrid row drag and drop allows you to drag and drop TreeGrid rows on the {% endif %} > * Selection feature must be enabled for row drag and drop. -> * For multiple row selection, the [`type`](../../api/treegrid/selectionSettings/#type) property must be set to `multiple`. -> * The [`isPrimaryKey`](../../api/treegrid/column/#isprimarykey) property is necessary to perform row drag and drop operation. +> * For multiple row selection, the [`type`](../../api/treegrid/selectionSettings#type) property must be set to `multiple`. +> * The [`isPrimaryKey`](../../api/treegrid/column#isprimarykey) property is necessary to perform row drag and drop operation. ## Drag and drop to another Tree Grid -To drag and drop between two TreeGrid, enable the [`allowRowDragAndDrop`](../../api/treegrid/#allowrowdraganddrop) property and specify the target TreeGrid ID in [`targetID`](../../api/treegrid/rowDropSettings/#targetid) property of rowDropSettings. +To drag and drop between two TreeGrid, enable the [`allowRowDragAndDrop`](../../api/treegrid#allowrowdraganddrop) property and specify the target TreeGrid ID in [`targetID`](../../api/treegrid/rowDropSettings#targetid) property of rowDropSettings. {% if page.publishingplatform == "typescript" %} @@ -85,16 +84,16 @@ To drag and drop between two TreeGrid, enable the [`allowRowDragAndDrop`](../../ The following events are triggered while drag and drop the treegrid rows. -[`rowDragStartHelper`](../../api/treegrid/#rowdragstarthelper) - Triggers when click the drag icon or treegrid row and this event is used to customize the drag element based on user criteria.
-[`rowDragStart`](../../api/treegrid/#rowdragstart) -Triggers when starts to drag the treegrid row.
-[`rowDrag`](../../api/treegrid/#rowdrag) - Triggers while dragging the treegrid row.
-[`rowDrop`](../../api/treegrid/#rowdrop) - Triggers when a drag element is dropped on the target element.
+[`rowDragStartHelper`](../../api/treegrid#rowdragstarthelper) - Triggers when click the drag icon or treegrid row and this event is used to customize the drag element based on user criteria.
+[`rowDragStart`](../../api/treegrid#rowdragstart) -Triggers when starts to drag the treegrid row.
+[`rowDrag`](../../api/treegrid#rowdrag) - Triggers while dragging the treegrid row.
+[`rowDrop`](../../api/treegrid#rowdrop) - Triggers when a drag element is dropped on the target element.
### Prevent reordering a row as child to another row -You can prevent the default behavior of dropping rows as children to the target by setting the `cancel` property to `true` in [rowDrop](../../api/treegrid/#rowdrop) event argument. You can also change the drop position after cancelling using [reorderRows](../../api/treegrid/#reorderrows) method. +You can prevent the default behavior of dropping rows as children to the target by setting the `cancel` property to `true` in [rowDrop](../../api/treegrid#rowdrop) event argument. You can also change the drop position after canceling using [reorderRows](../../api/treegrid#reorderrows) method. -In the below example drop action is cancelled and dropped above to target row. +In the below example drop action is canceled and dropped above to target row. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/row/row-height.md b/grid-sdk/javascript/tree-grid/row/row-height.md index 45e52471..7e84850e 100644 --- a/grid-sdk/javascript/tree-grid/row/row-height.md +++ b/grid-sdk/javascript/tree-grid/row/row-height.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Row Height | Syncfusion description: Learn how to customize row height in JavaScript TreeGrid to improve readability and optimize data presentation. platform: grid-sdk -control: Row height -publishingplatform: grid-sdk +control: Row height documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Row Height in JavaScript TreeGrid -You can customize the row height of treegrid rows through the [`rowHeight`](../../api/treegrid/#rowheight) property. The `rowHeight` property is used to change the row height of entire treegrid rows. +You can customize the row height of treegrid rows through the [`rowHeight`](../../api/treegrid#rowheight) property. The `rowHeight` property is used to change the row height of entire treegrid rows. In the below example, the `rowHeight` is set as '60px'. @@ -44,7 +43,7 @@ In the below example, the `rowHeight` is set as '60px'. ## Customize row height for particular row -Grid row height for particular row can be customized using the [`rowDataBound`](../../api/treegrid/#rowdatabound) event by setting the `rowHeight` in arguments for each row based on the requirement. +Grid row height for particular row can be customized using the [`rowDataBound`](../../api/treegrid#rowdatabound) event by setting the `rowHeight` in arguments for each row based on the requirement. In the below example, the row height for the row with Task ID as '3' is set as '90px' using the `rowDataBound` event. diff --git a/grid-sdk/javascript/tree-grid/row/row-spanning.md b/grid-sdk/javascript/tree-grid/row/row-spanning.md index 996cdc7d..f5ad22a4 100644 --- a/grid-sdk/javascript/tree-grid/row/row-spanning.md +++ b/grid-sdk/javascript/tree-grid/row/row-spanning.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Row Spanning | Syncfusion description: Learn how to use row spanning in JavaScript TreeGrid to merge cells across rows and create customized data layouts and presentations. platform: grid-sdk -control: Row spanning -publishingplatform: grid-sdk +control: Row spanning documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/row/row-template.md b/grid-sdk/javascript/tree-grid/row/row-template.md index 27737eef..b0b2e495 100644 --- a/grid-sdk/javascript/tree-grid/row/row-template.md +++ b/grid-sdk/javascript/tree-grid/row/row-template.md @@ -3,15 +3,14 @@ layout: post title: JavaScript TreeGrid Row Template | Syncfusion description: Learn how to use row templates in JavaScript TreeGrid to customize row layouts, display custom content, and enhance data presentation. platform: grid-sdk -control: Row template -publishingplatform: grid-sdk +control: Row template documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Row Template in JavaScript TreeGrid -The [`rowTemplate`](../../api/treegrid/#rowtemplate) has an option to customise the look and behavior of the treegrid rows. The [`rowTemplate`](../../api/treegrid/#rowtemplate) property accepts either the template string or HTML element ID. +The [`rowTemplate`](../../api/treegrid#rowtemplate) has an option to customize the look and behavior of the treegrid rows. The [`rowTemplate`](../../api/treegrid#rowtemplate) property accepts either the template string or HTML element ID. {% if page.publishingplatform == "typescript" %} @@ -40,11 +39,11 @@ The [`rowTemplate`](../../api/treegrid/#rowtemplate) has an option to customise {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/row-template-cs1" %} {% endif %} -The [`rowTemplate`](../../api/treegrid/#rowtemplate) property accepts only the TR element. +The [`rowTemplate`](../../api/treegrid#rowtemplate) property accepts only the TR element. ## Row template with formatting -If the [`rowTemplate`](../../api/treegrid/#rowtemplate) is used, the value cannot be formatted inside the template using the [`columns.format`](../../api/treegrid/column/#format) property. In that case, a function should be defined globally to format the value and invoke it inside the template. +If the [`rowTemplate`](../../api/treegrid#rowtemplate) is used, the value cannot be formatted inside the template using the [`columns.format`](../../api/treegrid/column#format) property. In that case, a function should be defined globally to format the value and invoke it inside the template. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/row/row.md b/grid-sdk/javascript/tree-grid/row/row.md index 3c4963d9..510a86c7 100644 --- a/grid-sdk/javascript/tree-grid/row/row.md +++ b/grid-sdk/javascript/tree-grid/row/row.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Rows | Syncfusion description: Learn how to work with rows in JavaScript TreeGrid, including row customization, selection, styling, rendering, and row-level operations. platform: grid-sdk -control: Row -publishingplatform: grid-sdk +control: Row documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -15,8 +14,8 @@ The row represents record details fetched from data source. ## Customize rows -You can customize the appearance of a row by using the [`rowDataBound`](../../api/treegrid/#rowdatabound) event. -The [`rowDataBound`](../../api/treegrid/#rowdatabound) event triggers for every row. In the event handler, you can get the `RowDataBoundEventArgs` that contains details of the row. +You can customize the appearance of a row by using the [`rowDataBound`](../../api/treegrid#rowdatabound) event. +The [`rowDataBound`](../../api/treegrid#rowdatabound) event triggers for every row. In the event handler, you can get the `RowDataBoundEventArgs` that contains details of the row. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/scrolling.md b/grid-sdk/javascript/tree-grid/scrolling.md index 78d1b4e5..983861b1 100644 --- a/grid-sdk/javascript/tree-grid/scrolling.md +++ b/grid-sdk/javascript/tree-grid/scrolling.md @@ -3,25 +3,24 @@ layout: post title: JavaScript TreeGrid Scrolling | Syncfusion description: Learn how to configure scrolling in JavaScript TreeGrid, including responsive sizing, sticky headers, scroll-to-row, and scrollbar options. platform: grid-sdk -control: Scrolling -publishingplatform: grid-sdk +control: Scrolling documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Scrolling in JavaScript TreeGrid -The scrollbar will be displayed in the treegrid when content exceeds the element [`width`](../api/treegrid/#width) or [`height`](../api/treegrid/#height). The vertical and horizontal scrollbars will be displayed based on the following criteria: +The scrollbar will be displayed in the treegrid when content exceeds the element [`width`](../api/treegrid#width) or [`height`](../api/treegrid#height). The vertical and horizontal scrollbars will be displayed based on the following criteria: * The vertical scrollbar appears when the total height of rows present in the treegrid exceeds its element height. * The horizontal scrollbar appears when the sum of columns width exceeds the treegrid element width. -* The [`height`](../api/treegrid/#height) and [`width`](../api/treegrid/#width) are used to set the treegrid height and width, respectively. +* The [`height`](../api/treegrid#height) and [`width`](../api/treegrid#width) are used to set the treegrid height and width, respectively. -> The default value for [`height`](../api/treegrid/#height) and [`width`](../api/treegrid/#width) is `auto`. +> The default value for [`height`](../api/treegrid#height) and [`width`](../api/treegrid#width) is `auto`. ## Set width and height -To specify the [`width`](../api/treegrid/#width) and [`height`](../api/treegrid/#height) of the scroller in the pixel, set the pixel value to a number. +To specify the [`width`](../api/treegrid#width) and [`height`](../api/treegrid#height) of the scroller in the pixel, set the pixel value to a number. {% if page.publishingplatform == "typescript" %} @@ -52,8 +51,8 @@ To specify the [`width`](../api/treegrid/#width) and [`height`](../api/treegrid/ ## Responsive with parent container -Specify the [`width`](../api/treegrid/#width) and [`height`](../api/treegrid/#height) as `100%` to make the treegrid element fill its parent container. -Setting the [`height`](../api/treegrid/#height) to `100%` requires the treegrid parent element to have explicit height. +Specify the [`width`](../api/treegrid#width) and [`height`](../api/treegrid#height) as `100%` to make the treegrid element fill its parent container. +Setting the [`height`](../api/treegrid#height) to `100%` requires the treegrid parent element to have explicit height. {% if page.publishingplatform == "typescript" %} @@ -121,7 +120,7 @@ The following sample demonstrates how to enable or disable the sticky header in ## Scroll to selected row -You can scroll the treegrid content to the selected row position by using the [`rowSelected`](../api/treegrid/#rowselected) event. +You can scroll the treegrid content to the selected row position by using the [`rowSelected`](../api/treegrid#rowselected) event. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/searching.md b/grid-sdk/javascript/tree-grid/searching.md index 321ff745..cfed8d90 100644 --- a/grid-sdk/javascript/tree-grid/searching.md +++ b/grid-sdk/javascript/tree-grid/searching.md @@ -3,17 +3,16 @@ layout: post title: JavaScript TreeGrid Searching | Syncfusion description: Learn how to enable and customize searching in JavaScript TreeGrid, including search settings, operators, column-specific search, and advanced options. platform: grid-sdk -control: Searching -publishingplatform: grid-sdk +control: Searching documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Searching in JavaScript TreeGrid -You can search records in a TreeGrid, by using the [`search`](../api/treegrid/#search) method with search key as a parameter. This also provides an option to integrate search text box in treegrid's toolbar by adding `search` item to the [`toolbar`](../api/treegrid/#toolbar). +You can search records in a TreeGrid, by using the [`search`](../api/treegrid#search) method with search key as a parameter. This also provides an option to integrate search text box in treegrid's toolbar by adding `search` item to the [`toolbar`](../api/treegrid#toolbar). -To search records, inject the [`Filter`](../api/treegrid/#fitermodule) module in the treegrid. +To search records, inject the [`Filter`](../api/treegrid#fitermodule) module in the treegrid. {% if page.publishingplatform == "typescript" %} @@ -44,7 +43,7 @@ To search records, inject the [`Filter`](../api/treegrid/#fitermodule) module in ## Initial search -To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the [`searchSettings`](../api/treegrid/#searchsettings). +To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the [`searchSettings`](../api/treegrid#searchsettings). {% if page.publishingplatform == "typescript" %} @@ -73,11 +72,11 @@ To apply search at initial rendering, set the fields, operator, key, and ignoreC {% previewsample "https://help.syncfusion.com/code-snippet/grid-sdk/javascript/treegrid/searching-cs2" %} {% endif %} -> By default, treegrid searches all the bound column values. To customize this behavior define the [`searchSettings.fields`](../api/treegrid/searchSettingsModel/#fields) property. +> By default, treegrid searches all the bound column values. To customize this behavior define the [`searchSettings.fields`](../api/treegrid/searchSettingsModel#fields) property. ## Search operators -The search operator can be defined in the [`searchSettings.operator`](../api/treegrid/searchSettingsModel/#operator) property to configure specific searching. +The search operator can be defined in the [`searchSettings.operator`](../api/treegrid/searchSettingsModel#operator) property to configure specific searching. The following operators are supported in searching: @@ -89,11 +88,11 @@ contains |Checks whether a value contains the specified value. equal |Checks whether a value is equal to the specified value. notEqual |Checks for values not equal to the specified value. -> By default, the [`searchSettings.operator`](../api/treegrid/searchSettingsModel/#operator) value is `contains`. +> By default, the [`searchSettings.operator`](../api/treegrid/searchSettingsModel#operator) value is `contains`. ## Search by external button -To search treegrid records from an external button, invoke the [`search`](../api/treegrid/#search) method. +To search treegrid records from an external button, invoke the [`search`](../api/treegrid#search) method. {% if page.publishingplatform == "typescript" %} @@ -124,7 +123,7 @@ To search treegrid records from an external button, invoke the [`search`](../api ## Search specific columns -By default, treegrid searches all visible columns. You can search specific columns by defining the specific column's field names in the [`searchSettings.fields`](../api/treegrid/searchSettingsModel/#fields) property. +By default, treegrid searches all visible columns. You can search specific columns by defining the specific column's field names in the [`searchSettings.fields`](../api/treegrid/searchSettingsModel#fields) property. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/selection/cell-selection.md b/grid-sdk/javascript/tree-grid/selection/cell-selection.md index f5ac2c74..0bc01958 100644 --- a/grid-sdk/javascript/tree-grid/selection/cell-selection.md +++ b/grid-sdk/javascript/tree-grid/selection/cell-selection.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Cell Selection | Syncfusion description: Learn how to perform cell selection in the JavaScript TreeGrid, including selection modes, programmatic APIs, and retrieving selected cell indexes.more. platform: grid-sdk -control: Cell selection -publishingplatform: grid-sdk +control: Cell selection documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -14,7 +13,7 @@ domainurl: https://help.syncfusion.com/grid-sdk Cell Selection can be done through simple Mouse down or Arrow keys(up, down, left and right). TreeGrid supports two types of cell selection mode which can be set by using -[`selectionSettings.cellSelectionMode`](../../api/treegrid/selectionSettings/#cellselectionmode). They are: +[`selectionSettings.cellSelectionMode`](../../api/treegrid/selectionSettings#cellselectionmode). They are: * **`Flow`** - The `Flow` value is set by default. Select range of cells between the start index and end index which includes in between cells of rows. diff --git a/grid-sdk/javascript/tree-grid/selection/check-box-selection.md b/grid-sdk/javascript/tree-grid/selection/check-box-selection.md index acdab2f0..4a905ae5 100644 --- a/grid-sdk/javascript/tree-grid/selection/check-box-selection.md +++ b/grid-sdk/javascript/tree-grid/selection/check-box-selection.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Checkbox Selection | Syncfusion description: Learn how to enable and configure checkbox selection in JavaScript TreeGrid, including selection modes, persist selection, and checkbox behavior. platform: grid-sdk -control: Check box selection -publishingplatform: grid-sdk +control: Check box selection documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- diff --git a/grid-sdk/javascript/tree-grid/selection/row-selection.md b/grid-sdk/javascript/tree-grid/selection/row-selection.md index 586f06c6..2ec70ba1 100644 --- a/grid-sdk/javascript/tree-grid/selection/row-selection.md +++ b/grid-sdk/javascript/tree-grid/selection/row-selection.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Row Selection | Syncfusion description: Learn how to use row selection in JavaScript TreeGrid, including programmatic selection, selected records, row indexes, and persistent selection. platform: grid-sdk -control: Row selection -publishingplatform: grid-sdk +control: Row selection documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/grid-sdk ## Select row at initial rendering -To select a row at initial rendering, set the [`selectedRowIndex`](../../api/treegrid/#selectedrowindex) value. +To select a row at initial rendering, set the [`selectedRowIndex`](../../api/treegrid#selectedrowindex) value. {% if page.publishingplatform == "typescript" %} @@ -44,7 +43,7 @@ To select a row at initial rendering, set the [`selectedRowIndex`](../../api/tre ## Get selected row indexes -You can get the selected row indexes by using the [`getSelectedRowIndexes`](../../api/treegrid/#getselectedrowindexes) method. +You can get the selected row indexes by using the [`getSelectedRowIndexes`](../../api/treegrid#getselectedrowindexes) method. {% if page.publishingplatform == "typescript" %} @@ -75,7 +74,7 @@ You can get the selected row indexes by using the [`getSelectedRowIndexes`](../. ## Multiple selection based on condition -You can select multiple treegrid rows based on condition by using the [`selectRows`](../../api/treegrid/#selectrows) method. +You can select multiple treegrid rows based on condition by using the [`selectRows`](../../api/treegrid#selectrows) method. In the following code, the rows which contains `taskID` value as `3` and `5` are selected at initial rendering. @@ -108,7 +107,7 @@ In the following code, the rows which contains `taskID` value as `3` and `5` are ## Toggle selection -The Toggle selection allows to perform selection and unselection of the particular row or cell. To [`enable toggle`](../../api/treegrid/selectionSettings/#enabletoggle) selection, set enableToggle property of the selectionSettings as true. If you click on the selected row or cell then it will be unselected and vice versa. +The Toggle selection allows to perform selection and unselection of the particular row or cell. To [`enable toggle`](../../api/treegrid/selectionSettings#enabletoggle) selection, set enableToggle property of the selectionSettings as true. If you click on the selected row or cell then it will be unselected and vice versa. {% if page.publishingplatform == "typescript" %} diff --git a/grid-sdk/javascript/tree-grid/selection/selection.md b/grid-sdk/javascript/tree-grid/selection/selection.md index c37af882..fc57df2f 100644 --- a/grid-sdk/javascript/tree-grid/selection/selection.md +++ b/grid-sdk/javascript/tree-grid/selection/selection.md @@ -3,17 +3,16 @@ layout: post title: JavaScript TreeGrid Selection | Syncfusion description: Learn all about selection in the JavaScript TreeGrid, including single/multiple selection, selection modes, toggle selection, and touch interactions. platform: grid-sdk -control: Selection -publishingplatform: grid-sdk +control: Selection documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- # Selection in JavaScript TreeGrid -Selection provides an option to highlight a row or a cell. It can be done through simple mouse down or arrow keys. To disable selection in TreeGrid, set the [`allowSelection`](../../api/treegrid/#allowselection) to false. +Selection provides an option to highlight a row or a cell. It can be done through simple mouse down or arrow keys. To disable selection in TreeGrid, set the [`allowSelection`](../../api/treegrid#allowselection) to false. -The treegrid supports two types of selection that can be set by using the [`selectionSettings.type`](../../api/treegrid/selectionSettingsModel/#type). They are: +The treegrid supports two types of selection that can be set by using the [`selectionSettings.type`](../../api/treegrid/selectionSettingsModel#type). They are: * **`Single`**: The `Single` value is set by default, and it only allows selection of a single row or a cell. * **`Multiple`**: Allows you to select multiple rows or cells. @@ -49,7 +48,7 @@ To perform the multi-selection, press and hold CTRL key and click the desired ro ## Selection mode TreeGrid supports three types of selection mode which can be set by using -[`selectionSettings.mode`](../../api/treegrid/selectionSettings/#mode). They are: +[`selectionSettings.mode`](../../api/treegrid/selectionSettings#mode). They are: * **`Row`** - The `row` value is set by default. Allows you to select rows only. * **`Cell`** - Allows you to select cells only. @@ -88,7 +87,7 @@ When you tap a treegrid row on touchscreen device, the tapped row is selected. It also shows a popup ![Multi Row selection](../images/selection.jpg) for multi-row selection. To select multiple rows or cells, tap the popup ![Multi Row or Cells](../images/mselection.jpg) and then tap the desired rows or cells. -> Multi-selection requires the selection [`type`](../../api/treegrid/selectionSettings/#type) to be `multiple`. +> Multi-selection requires the selection [`type`](../../api/treegrid/selectionSettings#type) to be `multiple`. The following screenshot represents a treegrid touch selection in the device. diff --git a/grid-sdk/javascript/tree-grid/sorting.md b/grid-sdk/javascript/tree-grid/sorting.md index 1233283f..77c16f4c 100644 --- a/grid-sdk/javascript/tree-grid/sorting.md +++ b/grid-sdk/javascript/tree-grid/sorting.md @@ -3,8 +3,7 @@ layout: post title: JavaScript TreeGrid Sorting | Syncfusion description: Learn how to sort data in JavaScript TreeGrid, including single and multi-column sorting, custom sorting, and sort order configuration. platform: grid-sdk -control: Sorting -publishingplatform: grid-sdk +control: Sorting documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- @@ -16,9 +15,9 @@ To sort a column, click the column header. To sort multiple columns, press and hold the CTRL key and click the column header. You can clear sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the specific column header. -To enable sorting in the TreeGrid, set the [`allowSorting`](../api/treegrid/#allowsorting) to true. Sorting options can be configured through the [`sortSettings`](../api/treegrid/sortSettings). +To enable sorting in the TreeGrid, set the [`allowSorting`](../api/treegrid#allowsorting) to true. Sorting options can be configured through the [`sortSettings`](../api/treegrid/sortSettings). -To sort, inject the [`Sort`](../api/treegrid/#sortmodule) module in the treegrid. +To sort, inject the [`Sort`](../api/treegrid#sortmodule) module in the treegrid. {% if page.publishingplatform == "typescript" %} @@ -48,12 +47,12 @@ To sort, inject the [`Sort`](../api/treegrid/#sortmodule) module in the treegrid {% endif %} > * TreeGrid columns are sorted in the `Ascending` order. If you click the already sorted column, the sort direction toggles. -> * You can apply and clear sorting by invoking [`sortByColumn`](../api/treegrid#sortbycolumn) and [`clearSorting`](../api/treegrid/#clearsorting) methods. -> * To disable sorting for a particular column, set the [`columns.allowSorting`](../api/treegrid/column/#allowSorting) to false. +> * You can apply and clear sorting by invoking [`sortByColumn`](../api/treegrid#sortbycolumn) and [`clearSorting`](../api/treegrid#clearsorting) methods. +> * To disable sorting for a particular column, set the [`columns.allowSorting`](../api/treegrid/column#allowSorting) to false. ## Initial sort -To sort at initial rendering, set the [`field`](../api/treegrid/sortDescriptorModel/#field) and [`direction`](../api/treegrid/sortDescriptorModel/#direction) in the `sortSettings.columns`. +To sort at initial rendering, set the [`field`](../api/treegrid/sortDescriptorModel#field) and [`direction`](../api/treegrid/sortDescriptorModel#direction) in the `sortSettings.columns`. {% if page.publishingplatform == "typescript" %} @@ -84,7 +83,7 @@ To sort at initial rendering, set the [`field`](../api/treegrid/sortDescriptorMo ## Sorting events -During the sort action, the treegrid component triggers two events. The [`actionBegin`](../api/treegrid/#actionbegin) event triggers before the sort action starts, and the [`actionComplete`](../api/treegrid/#actioncomplete) event triggers after the sort action is completed. Using these events you can perform the needed actions. +During the sort action, the treegrid component triggers two events. The [`actionBegin`](../api/treegrid#actionbegin) event triggers before the sort action starts, and the [`actionComplete`](../api/treegrid#actioncomplete) event triggers after the sort action is completed. Using these events you can perform the needed actions. {% if page.publishingplatform == "typescript" %} @@ -117,7 +116,7 @@ During the sort action, the treegrid component triggers two events. The [`action