From 222118f972618292128a7a01a943f50b11dc70d7 Mon Sep 17 00:00:00 2001 From: AakashSF4753 Date: Tue, 16 Dec 2025 20:57:59 +0530 Subject: [PATCH 01/10] 993923: content --- .../EJ2_ASP.MVC/columns/column-spanning.md | 22 +++++++++---------- .../tree-grid/EJ2_ASP.MVC/row/row-spanning.md | 20 ++++++++--------- .../columns/column-spanning.md | 22 +++++++++---------- .../EJ2_ASP.NETCORE/row/row-spanning.md | 20 ++++++++--------- 4 files changed, 38 insertions(+), 46 deletions(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md index 0e3c20c635..8c7140cd92 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md @@ -10,7 +10,7 @@ documentation: ug # Column Spanning in ##Platform_Name## TreeGrid Component -The column spanning feature in the Syncfusion® ASP.MVC TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +The column spanning feature in the ASP.MVC TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. In the following example, Employee **Davolio** is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. @@ -34,11 +34,11 @@ Column spanning in the ASP.MVC TreeGrid has the following limitations: > When using column spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. -## Column spanning implementation through API - -The Syncfusion TreeGrid provides an API-based approach to horizontally merge cells with identical values in the same row across adjacent columns. - -The column spanning feature in the Syncfusion TreeGrid can be enabled using `EnableColumnSpan` property to **true** in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". +## Column spanning via API + +The column spanning feature in the ASP.MVC TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the `EnableColumnSpan` property to **true** in the TreeGrid configuration. + +In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableColumnSpan` property to **false** in the column level. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -49,16 +49,14 @@ The column spanning feature in the Syncfusion TreeGrid can be enabled using `Ena {% endhighlight %} {% endtabs %} -> In the sample, column spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `EnableColumnSpan` property to **false**. - ### Limitations - -Column spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with column spanning feature. - + +The following list outlines the features that are not compatible with column spanning. + * Virtualization * Infinite Scrolling * Row Drag and Drop * Column Virtualization * Detail Template * Editing -* Export +* Export \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md index 328e959ddf..1b131920cc 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md @@ -10,7 +10,7 @@ documentation: ug # Row Spanning in ##Platform_Name## TreeGrid Component -The row spanning feature in the Syncfusion® ASP.MVC TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +The row spanning feature in the ASP.MVC TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 PM" column. @@ -34,11 +34,11 @@ Row spanning in the ASP.MVC TreeGrid has the following limitations: > When using row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. -## Row spanning implementation through API +## Row spanning via API -The Syncfusion TreeGrid provides an API-based approach to vertically merge cells with identical values in the same column across consecutive rows. - -The row spanning feature in the Syncfusion TreeGrid can be enabled using `EnableRowSpan` property to **true** in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". +The row spanning feature in the ASP.MVC TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to **true** in the TreeGrid configuration. + +In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableRowSpan` property to **false** in the column level. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -49,16 +49,14 @@ The row spanning feature in the Syncfusion TreeGrid can be enabled using `Enable {% endhighlight %} {% endtabs %} -> In the sample, row spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `enableRowSpan` property to **false**. - ### Limitations - -Row spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with row spanning feature. - + +The following list outlines the features that are not compatible with row spanning. + * Virtualization * Infinite Scrolling * Row Drag and Drop * Column Virtualization * Detail Template * Editing -* Export +* Export \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md index 98667b093b..c9e8a825e3 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md @@ -10,7 +10,7 @@ documentation: ug # Column Spanning in ##Platform_Name## TreeGrid Component -The column spanning feature in the Syncfusion® ASP.Core TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +The column spanning feature in the ASP.Core TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. In the following example, Employee **Davolio** is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. @@ -34,11 +34,11 @@ Column spanning in the ASP.Core TreeGrid has the following limitations: > When using column spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. -## Column spanning implementation through API - -The Syncfusion TreeGrid provides an API-based approach to horizontally merge cells with identical values in the same row across adjacent columns. - -The column spanning feature in the Syncfusion TreeGrid can be enabled using `EnableColumnSpan` property to **true** in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". +## Column spanning via API + +The column spanning feature in the TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the `EnableColumnSpan` property to **true** in the TreeGrid configuration. + +In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableColumnSpan` property to **false** in the column level. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -49,16 +49,14 @@ The column spanning feature in the Syncfusion TreeGrid can be enabled using `Ena {% endhighlight %} {% endtabs %} -> In the sample, column spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `EnableColumnSpan` property to **false**. - ### Limitations - -Column spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with column spanning feature. - + +The following list outlines the features that are not compatible with column spanning. + * Virtualization * Infinite Scrolling * Row Drag and Drop * Column Virtualization * Detail Template * Editing -* Export +* Export \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md index 6c74222eaa..3b618b18b1 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md @@ -10,7 +10,7 @@ documentation: ug # Row Spanning in ##Platform_Name## TreeGrid Component -The row spanning feature in the Syncfusion® ASP.Core TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +The row spanning feature in the ASP.Core TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 PM" column. @@ -34,11 +34,11 @@ Row spanning in the ASP.Core TreeGrid has the following limitations: > When using row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. -## Row spanning implementation through API +## Row spanning via API -The Syncfusion TreeGrid provides an API-based approach to vertically merge cells with identical values in the same column across consecutive rows. - -The row spanning feature in the Syncfusion TreeGrid can be enabled using `EnableRowSpan` property to **true** in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". +The row spanning feature in the ASP.Core TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to **true** in the TreeGrid configuration. + +In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableRowSpan` property to **false** in the column level. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -49,16 +49,14 @@ The row spanning feature in the Syncfusion TreeGrid can be enabled using `Enable {% endhighlight %} {% endtabs %} -> In the sample, row spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `enableRowSpan` property to **false**. - ### Limitations - -Row spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with row spanning feature. - + +The following list outlines the features that are not compatible with row spanning. + * Virtualization * Infinite Scrolling * Row Drag and Drop * Column Virtualization * Detail Template * Editing -* Export +* Export \ No newline at end of file From 2c439521745d55897349b0840852ce3a91c407eb Mon Sep 17 00:00:00 2001 From: YukeshNarayanB-SF5087 Date: Tue, 16 Dec 2025 21:08:10 +0530 Subject: [PATCH 02/10] Revise Checkbox Selection documentation for Tree Grid Updated the documentation for Checkbox Selection in the Tree Grid component, including new features and improved explanations. --- .../selection/check-box-selection.md | 123 +++++++++--------- 1 file changed, 64 insertions(+), 59 deletions(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md index c3980a1555..0db7925586 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md @@ -78,7 +78,13 @@ In checkbox selection, selection can also be done by clicking on rows. This sele ## Conditional row selection -The TreeGrid supports conditional row selection through the `isRowSelectable` property. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The `isRowSelectable` property accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria. +The TreeGrid supports conditional row selection through the `isRowSelectable` callback. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The callback accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria. + +Local data: The callback runs once when the TreeGrid initializes and evaluates all records because the full dataset is already available on the client. + +Remote data: The callback runs only for the rows displayed on the current page when the TreeGrid first loads. It runs again whenever the grid fetches new data such as during paging, filtering, or sorting to re-evaluate the newly visible rows. + +In the following sample, selection is disabled for rows where the "Progress" column has the value "Completed". {% if page.publishingplatform == "aspnet-core" %} @@ -103,64 +109,63 @@ The TreeGrid supports conditional row selection through the `isRowSelectable` pr {% endtabs %} {% endif %} -In this sample, checkbox selection is disabled for rows where the "Progress" column has the value **"Completed"**. - ## Checkbox Selection In Tree Column -1. ### Enable checkboxes in tree column - - To render checkboxes in tree column, you need to set [`ShowCheckbox`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) property as **true**. - - It is possible to select rows hierarchically using checkboxes in TreeGrid by enabling the [`AutoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_AutoCheckHierarchy) property. When a parent record’s checkbox is checked, the checkboxes of its child records are automatically selected and vice-versa. - - {% if page.publishingplatform == "aspnet-core" %} - - {% tabs %} - {% highlight cshtml tabtitle="CSHTML" %} - {% include code-snippet/tree-grid/columns-mvc/checkbox/tagHelper %} - {% endhighlight %} - {% highlight c# tabtitle="Checkbox.cs" %} - {% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %} - {% endhighlight %} - {% endtabs %} - - {% elsif page.publishingplatform == "aspnet-mvc" %} - - {% tabs %} - {% highlight razor tabtitle="CSHTML" %} - {% include code-snippet/tree-grid/columns-mvc/checkbox/razor %} - {% endhighlight %} - {% highlight c# tabtitle="Checkbox.cs" %} - {% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %} - {% endhighlight %} - {% endtabs %} - {% endif %} - -2. ### Checkbox selection in tree column with virtualization - - The TreeGrid component is designed to handle large datasets while providing flexible checkbox selection with virtualization enabled. The [`ShowCheckbox`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) property displays checkboxes in tree column cells, allowing users to select or deselect them directly. This functionality is enabled by setting the property to "**true**". Similarly, the [`EnableVirtualization`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_EnableVirtualization) property enhances performance by rendering only the visible rows and columns during scrolling. This feature is activated by setting the property to "**true**". - - {% if page.publishingplatform == "aspnet-core" %} - - {% tabs %} - {% highlight cshtml tabtitle="CSHTML" %} - {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper %} - {% endhighlight %} - {% highlight c# tabtitle="Partial.cs" %} - {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs %} - {% endhighlight %} - {% endtabs %} - - {% elsif page.publishingplatform == "aspnet-mvc" %} - - {% tabs %} - {% highlight razor tabtitle="CSHTML" %} - {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor %} - {% endhighlight %} - {% highlight c# tabtitle="Partial.cs" %} - {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs%} - {% endhighlight %} - {% endtabs %} - {% endif %} +### Enable checkboxes in tree column + +The tree column cell includes checkboxes that support checkbox selection for each record. The feature supports both simple selection and hierarchical selection, where parent and child records are linked through their checkboxes. In hierarchical mode, checking a parent record’s checkbox automatically selects its child records, and clearing it will deselect them as well. To enable checkbox selection in the tree column, set the [`showCheckbox`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) to **true**. For hierarchical checkbox selection, set the [`autoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_AutoCheckHierarchy) to **true**, which activates the parent–child linking behavior. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-mvc/checkbox/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Checkbox.cs" %} +{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-mvc/checkbox/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Checkbox.cs" %} +{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Checkbox selection in tree column with virtualization + +The TreeGrid component provides efficient handling of large datasets while offering flexible checkbox selection with virtualization. This feature allows checkboxes to be displayed in tree column cells so that allowing direct interaction with records, even when working with extensive data. Virtualization ensures smooth performance by rendering only the rows and columns that are visible during scrolling. + +To enable checkbox selection in the tree column, set the [`showCheckbox`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) property to **true**. For virtualization support, use the [`enableVirtualization`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_EnableVirtualization) property, which activates optimized rendering for large datasets. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Partial.cs" %} +{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Partial.cs" %} +{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs%} +{% endhighlight %} +{% endtabs %} +{% endif %} -N> You can refer to our [`ASP.NET MVC Tree Grid`](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`ASP.NET MVC Tree Grid example`](https://ej2.syncfusion.com/aspnetmvc/TreeGrid/Overview#/material) to knows how to present and manipulate data. \ No newline at end of file + +N> You can refer to our [`ASP.NET MVC Tree Grid`](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`ASP.NET MVC Tree Grid example`](https://ej2.syncfusion.com/aspnetmvc/TreeGrid/Overview#/material) to knows how to present and manipulate data. From 638da78997b23ed339221e69450285631244b80c Mon Sep 17 00:00:00 2001 From: YukeshNarayanB-SF5087 Date: Tue, 16 Dec 2025 21:13:52 +0530 Subject: [PATCH 03/10] Update checkbox selection documentation for Tree Grid updated the changes --- .../selection/check-box-selection.md | 99 ++++++++++--------- 1 file changed, 52 insertions(+), 47 deletions(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md index 4f5ff8929d..a18543b596 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md @@ -79,7 +79,13 @@ In checkbox selection, selection can also be done by clicking on rows. This sele ## Conditional row selection -The TreeGrid supports conditional row selection through the `isRowSelectable` property. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The `isRowSelectable` property accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria. +The TreeGrid supports conditional row selection through the `isRowSelectable` callback. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The callback accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria. + +Local data: The callback runs once when the TreeGrid initializes and evaluates all records because the full dataset is already available on the client. + +Remote data: The callback runs only for the rows displayed on the current page when the TreeGrid first loads. It runs again whenever the grid fetches new data such as during paging, filtering, or sorting to re-evaluate the newly visible rows. + +In the following sample, selection is disabled for rows where the "Progress" column has the value "Completed". {% if page.publishingplatform == "aspnet-core" %} @@ -104,64 +110,63 @@ The TreeGrid supports conditional row selection through the `isRowSelectable` pr {% endtabs %} {% endif %} -In this sample, checkbox selection is disabled for rows where the "Progress" column has the value **"Completed"**. - ## Checkbox Selection In Tree Column -1. ### Enable checkboxes in tree column +### Enable checkboxes in tree column - To render checkboxes in tree column, you need to set [`showCheckbox`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) property of as **true**. +The tree column cell includes checkboxes that support checkbox selection for each record. The feature supports both simple selection and hierarchical selection, where parent and child records are linked through their checkboxes. In hierarchical mode, checking a parent record’s checkbox automatically selects its child records, and clearing it will deselect them as well. To enable checkbox selection in the tree column, set the [`showCheckbox`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) to **true**. For hierarchical checkbox selection, set the [`autoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_AutoCheckHierarchy) to **true**, which activates the parent–child linking behavior. - It is possible to select rows hierarchically using checkboxes in TreeGrid by enabling the [`AutoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_AutoCheckHierarchy) property. When a parent record’s checkbox is checked, the checkboxes of its child records are automatically selected and vice-versa. +{% if page.publishingplatform == "aspnet-core" %} - {% if page.publishingplatform == "aspnet-core" %} +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-core/checkbox/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Checkbox.cs" %} +{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} - {% tabs %} - {% highlight cshtml tabtitle="CSHTML" %} - {% include code-snippet/tree-grid/columns-core/checkbox/tagHelper %} - {% endhighlight %} - {% highlight c# tabtitle="Checkbox.cs" %} - {% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %} - {% endhighlight %} - {% endtabs %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-core/checkbox/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Checkbox.cs" %} +{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} - {% elsif page.publishingplatform == "aspnet-mvc" %} +### Checkbox selection in tree column with virtualization - {% tabs %} - {% highlight razor tabtitle="CSHTML" %} - {% include code-snippet/tree-grid/columns-core/checkbox/razor %} - {% endhighlight %} - {% highlight c# tabtitle="Checkbox.cs" %} - {% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %} - {% endhighlight %} - {% endtabs %} - {% endif %} +The TreeGrid component provides efficient handling of large datasets while offering flexible checkbox selection with virtualization. This feature allows checkboxes to be displayed in tree column cells so that allowing direct interaction with records, even when working with extensive data. Virtualization ensures smooth performance by rendering only the rows and columns that are visible during scrolling. -2. ### Checkbox selection in tree column with virtualization +To enable checkbox selection in the tree column, set the [`ShowCheckbox`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~ShowCheckbox.html) property to **true**. For virtualization support, use the [`EnableVirtualization`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_EnableVirtualization) property, which activates optimized rendering for large datasets. - The TreeGrid component is designed to handle large datasets while providing flexible checkbox selection with virtualization enabled. The [`ShowCheckbox`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~ShowCheckbox.html) property displays checkboxes in tree column cells, allowing users to select or deselect them directly. This functionality is enabled by setting the property to "**true**". Similarly, the [`EnableVirtualization`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_EnableVirtualization) property enhances performance by rendering only the visible rows and columns during scrolling. This feature is activated by setting the property to "**true**". +{% if page.publishingplatform == "aspnet-core" %} - {% if page.publishingplatform == "aspnet-core" %} +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Partial.cs" %} +{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs %} +{% endhighlight %} +{% endtabs %} - {% tabs %} - {% highlight cshtml tabtitle="CSHTML" %} - {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper %} - {% endhighlight %} - {% highlight c# tabtitle="Partial.cs" %} - {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs %} - {% endhighlight %} - {% endtabs %} +{% elsif page.publishingplatform == "aspnet-mvc" %} - {% elsif page.publishingplatform == "aspnet-mvc" %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Partial.cs" %} +{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs%} +{% endhighlight %} +{% endtabs %} +{% endif %} - {% tabs %} - {% highlight razor tabtitle="CSHTML" %} - {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor %} - {% endhighlight %} - {% highlight c# tabtitle="Partial.cs" %} - {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs%} - {% endhighlight %} - {% endtabs %} - {% endif %} -N> You can refer to our [`ASP.NET Core Tree Grid`](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example [`ASP.NET Core Tree Grid example`](https://ej2.syncfusion.com/aspnetcore/TreeGrid/Overview#/material) to knows how to present and manipulate data. \ No newline at end of file +N> You can refer to our [`ASP.NET Core Tree Grid`](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example [`ASP.NET Core Tree Grid example`](https://ej2.syncfusion.com/aspnetcore/TreeGrid/Overview#/material) to knows how to present and manipulate data. From 65ad049bdb4ea4d655a503ca6c16553222cb129f Mon Sep 17 00:00:00 2001 From: AakashSF4753 Date: Wed, 17 Dec 2025 11:56:18 +0530 Subject: [PATCH 04/10] 993923: content changes --- .../EJ2_ASP.MVC/columns/column-spanning.md | 19 ++++--------------- .../tree-grid/EJ2_ASP.MVC/row/row-spanning.md | 19 ++++--------------- .../columns/column-spanning.md | 19 ++++--------------- .../EJ2_ASP.NETCORE/row/row-spanning.md | 19 ++++--------------- 4 files changed, 16 insertions(+), 60 deletions(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md index 8c7140cd92..a0700b4740 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md @@ -10,9 +10,9 @@ documentation: ug # Column Spanning in ##Platform_Name## TreeGrid Component -The column spanning feature in the ASP.MVC TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +Column spanning in the ASP.MVC TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. -In the following example, Employee **Davolio** is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. +In the following example, Employee "Davolio" is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -23,22 +23,11 @@ In the following example, Employee **Davolio** is scheduled for analysis from "9 {% endhighlight %} {% endtabs %} -## Limitations - -Column spanning in the ASP.MVC TreeGrid has the following limitations: - -* The [updateCell](https://ej2.syncfusion.com/documentation/api/treegrid/index-default#updatecell) method does not support column spanning. -* Column spanning is not compatible with the following features: - 1. Virtual scrolling - 2. Infinite scrolling - -> When using column spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. - ## Column spanning via API -The column spanning feature in the ASP.MVC TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the `EnableColumnSpan` property to **true** in the TreeGrid configuration. +The column spanning feature in the ASP.MVC TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the `EnableColumnSpan` property to "true" in the TreeGrid configuration. -In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableColumnSpan` property to **false** in the column level. +In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableColumnSpan` property to "false" in the column level. {% tabs %} {% highlight razor tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md index 1b131920cc..fbcb931961 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md @@ -10,9 +10,9 @@ documentation: ug # Row Spanning in ##Platform_Name## TreeGrid Component -The row spanning feature in the ASP.MVC TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +Row spanning in the ASP.MVC TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. -In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 PM" column. +In the following demo, the "Lunch Break" cell spans multiple rows in the "1:00 PM" column. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -23,22 +23,11 @@ In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 {% endhighlight %} {% endtabs %} -## Limitations - -Row spanning in the ASP.MVC TreeGrid has the following limitations: - -* The [updateCell](https://ej2.syncfusion.com/documentation/api/treegrid/index-default#updatecell) method does not support row spanning. -* Row spanning is not compatible with the following features: - 1. Virtual scrolling - 2. Infinite scrolling - -> When using row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. - ## Row spanning via API -The row spanning feature in the ASP.MVC TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to **true** in the TreeGrid configuration. +Row spanning in the ASP.MVC TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to "true" in the TreeGrid configuration. -In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableRowSpan` property to **false** in the column level. +In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableRowSpan` property to "false" in the column level. {% tabs %} {% highlight razor tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md index c9e8a825e3..4272455f6e 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md @@ -10,9 +10,9 @@ documentation: ug # Column Spanning in ##Platform_Name## TreeGrid Component -The column spanning feature in the ASP.Core TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +Column spanning in the ASP.Core TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. -In the following example, Employee **Davolio** is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. +In the following example, Employee "Davolio" is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -23,22 +23,11 @@ In the following example, Employee **Davolio** is scheduled for analysis from "9 {% endhighlight %} {% endtabs %} -## Limitations - -Column spanning in the ASP.Core TreeGrid has the following limitations: - -* The [updateCell](https://ej2.syncfusion.com/documentation/api/treegrid/index-default#updatecell) method does not support column spanning. -* Column spanning is not compatible with the following features: - 1. Virtual scrolling - 2. Infinite scrolling - -> When using column spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. - ## Column spanning via API -The column spanning feature in the TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the `EnableColumnSpan` property to **true** in the TreeGrid configuration. +Column spanning in the TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the `EnableColumnSpan` property to "true" in the TreeGrid configuration. -In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableColumnSpan` property to **false** in the column level. +In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableColumnSpan` property to "false" in the column level. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md index 3b618b18b1..5c0f1f2f45 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md @@ -10,9 +10,9 @@ documentation: ug # Row Spanning in ##Platform_Name## TreeGrid Component -The row spanning feature in the ASP.Core TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +Row spanning in the ASP.Core TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. -In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 PM" column. +In the following demo, the "Lunch Break" cell spans multiple rows in the "1:00 PM" column. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -23,22 +23,11 @@ In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 {% endhighlight %} {% endtabs %} -## Limitations - -Row spanning in the ASP.Core TreeGrid has the following limitations: - -* The [updateCell](https://ej2.syncfusion.com/documentation/api/treegrid/index-default#updatecell) method does not support row spanning. -* Row spanning is not compatible with the following features: - 1. Virtual scrolling - 2. Infinite scrolling - -> When using row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. - ## Row spanning via API -The row spanning feature in the ASP.Core TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to **true** in the TreeGrid configuration. +Row spanning in the ASP.Core TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to "true" in the TreeGrid configuration. -In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableRowSpan` property to **false** in the column level. +In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableRowSpan` property to "false" in the column level. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} From 9d3cfb0045fb661e8753b3360316ab06c71ea46c Mon Sep 17 00:00:00 2001 From: YukeshNarayanB-SF5087 Date: Wed, 17 Dec 2025 14:42:37 +0530 Subject: [PATCH 05/10] Update Checkbox Selection documentation for Tree Grid --- .../selection/check-box-selection.md | 62 +------------------ 1 file changed, 2 insertions(+), 60 deletions(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md index a18543b596..db1628926d 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md @@ -79,7 +79,7 @@ In checkbox selection, selection can also be done by clicking on rows. This sele ## Conditional row selection -The TreeGrid supports conditional row selection through the `isRowSelectable` callback. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The callback accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria. +The TreeGrid supports conditional row selection through the `isRowSelectable` callback. This allows selection to be controlled by custom business logic, ensuring that only rows meeting specific conditions can be selected. The callback receives each row’s data and returns "true" to allow selection or "false" to prevent it. Local data: The callback runs once when the TreeGrid initializes and evaluates all records because the full dataset is already available on the client. @@ -110,63 +110,5 @@ In the following sample, selection is disabled for rows where the "Progress" col {% endtabs %} {% endif %} -## Checkbox Selection In Tree Column - -### Enable checkboxes in tree column - -The tree column cell includes checkboxes that support checkbox selection for each record. The feature supports both simple selection and hierarchical selection, where parent and child records are linked through their checkboxes. In hierarchical mode, checking a parent record’s checkbox automatically selects its child records, and clearing it will deselect them as well. To enable checkbox selection in the tree column, set the [`showCheckbox`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) to **true**. For hierarchical checkbox selection, set the [`autoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_AutoCheckHierarchy) to **true**, which activates the parent–child linking behavior. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/columns-core/checkbox/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Checkbox.cs" %} -{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/columns-core/checkbox/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Checkbox.cs" %} -{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -### Checkbox selection in tree column with virtualization - -The TreeGrid component provides efficient handling of large datasets while offering flexible checkbox selection with virtualization. This feature allows checkboxes to be displayed in tree column cells so that allowing direct interaction with records, even when working with extensive data. Virtualization ensures smooth performance by rendering only the rows and columns that are visible during scrolling. - -To enable checkbox selection in the tree column, set the [`ShowCheckbox`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~ShowCheckbox.html) property to **true**. For virtualization support, use the [`EnableVirtualization`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_EnableVirtualization) property, which activates optimized rendering for large datasets. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Partial.cs" %} -{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Partial.cs" %} -{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs%} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> You can refer to our [`ASP.NET Core Tree Grid`](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example [`ASP.NET Core Tree Grid example`](https://ej2.syncfusion.com/aspnetcore/TreeGrid/Overview#/material) to knows how to present and manipulate data. + From 1334b4ae4d68b5d53672c23eda78c76f8b8dad46 Mon Sep 17 00:00:00 2001 From: YukeshNarayanB-SF5087 Date: Wed, 17 Dec 2025 14:48:26 +0530 Subject: [PATCH 06/10] Update columns-core.md for Tree Grid component --- .../EJ2_ASP.NETCORE/columns/columns-core.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/columns-core.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/columns-core.md index ef760373ff..8bc4d5c08b 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/columns-core.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/columns-core.md @@ -130,6 +130,35 @@ TreeGrid column supports the following types: N> If the [`type`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Type.html) is not defined, it will be determined from the first record of the [`dataSource`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGrid~DataSource.html). +## Checkbox column + +To render checkboxes in existing column, you need to set [`showCheckbox`] property of [`e-treegrid-column`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn.html) as **true**. + +It is also possible to select the rows hierarchically using checkboxes in TreeGrid by enabling [`autoCheckHierarchy`] property. When we check on any parent record checkbox then the child record checkboxes will get checked. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-core/checkbox/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Checkbox.cs" %} +{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-core/checkbox/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Checkbox.cs" %} +{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Controlling Tree Grid actions You can enable or disable treegrid action for a particular column by setting the [`allowFiltering`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~AllowFiltering.html), and [`allowSorting`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~AllowSorting.html) properties of [`e-treegrid-column`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn.html) tag helper. @@ -288,3 +317,4 @@ To render boolean values as checkbox in columns, you need to set [`displayAsChec N> You can refer to our [`ASP.NET Core Tree Grid`](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example [`ASP.NET Core Tree Grid example`](https://ej2.syncfusion.com/aspnetcore/TreeGrid/Overview#/material) to knows how to present and manipulate data. + From 7f725049ba9be1a2b8981ea7cc08c9679cf3720c Mon Sep 17 00:00:00 2001 From: YukeshNarayanB-SF5087 Date: Wed, 17 Dec 2025 14:52:38 +0530 Subject: [PATCH 07/10] Revise Checkbox Selection documentation for Tree Grid Updated the Checkbox Selection documentation for the Tree Grid component, including new features and examples. --- .../selection/check-box-selection.md | 62 +------------------ 1 file changed, 2 insertions(+), 60 deletions(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md index 0db7925586..2544440d21 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md @@ -78,7 +78,7 @@ In checkbox selection, selection can also be done by clicking on rows. This sele ## Conditional row selection -The TreeGrid supports conditional row selection through the `isRowSelectable` callback. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The callback accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria. +The TreeGrid supports conditional row selection through the (`isRowSelectable`) callback. This allows selection to be controlled by custom business logic, ensuring that only rows meeting specific conditions can be selected. The callback receives each row’s data and returns "true" to allow selection or "false" to prevent it. Local data: The callback runs once when the TreeGrid initializes and evaluates all records because the full dataset is already available on the client. @@ -109,63 +109,5 @@ In the following sample, selection is disabled for rows where the "Progress" col {% endtabs %} {% endif %} -## Checkbox Selection In Tree Column - -### Enable checkboxes in tree column - -The tree column cell includes checkboxes that support checkbox selection for each record. The feature supports both simple selection and hierarchical selection, where parent and child records are linked through their checkboxes. In hierarchical mode, checking a parent record’s checkbox automatically selects its child records, and clearing it will deselect them as well. To enable checkbox selection in the tree column, set the [`showCheckbox`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) to **true**. For hierarchical checkbox selection, set the [`autoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_AutoCheckHierarchy) to **true**, which activates the parent–child linking behavior. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/columns-mvc/checkbox/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Checkbox.cs" %} -{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/columns-mvc/checkbox/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Checkbox.cs" %} -{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -### Checkbox selection in tree column with virtualization - -The TreeGrid component provides efficient handling of large datasets while offering flexible checkbox selection with virtualization. This feature allows checkboxes to be displayed in tree column cells so that allowing direct interaction with records, even when working with extensive data. Virtualization ensures smooth performance by rendering only the rows and columns that are visible during scrolling. - -To enable checkbox selection in the tree column, set the [`showCheckbox`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) property to **true**. For virtualization support, use the [`enableVirtualization`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_EnableVirtualization) property, which activates optimized rendering for large datasets. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Partial.cs" %} -{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Partial.cs" %} -{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs%} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> You can refer to our [`ASP.NET MVC Tree Grid`](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`ASP.NET MVC Tree Grid example`](https://ej2.syncfusion.com/aspnetmvc/TreeGrid/Overview#/material) to knows how to present and manipulate data. + From 24ea43cfbae5be0285d50316e2dc8196733923fc Mon Sep 17 00:00:00 2001 From: YukeshNarayanB-SF5087 Date: Wed, 17 Dec 2025 14:53:15 +0530 Subject: [PATCH 08/10] Update checkbox selection documentation --- .../tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md index 2544440d21..b9a74272f7 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md @@ -78,7 +78,7 @@ In checkbox selection, selection can also be done by clicking on rows. This sele ## Conditional row selection -The TreeGrid supports conditional row selection through the (`isRowSelectable`) callback. This allows selection to be controlled by custom business logic, ensuring that only rows meeting specific conditions can be selected. The callback receives each row’s data and returns "true" to allow selection or "false" to prevent it. +The TreeGrid supports conditional row selection through the `isRowSelectable` callback. This allows selection to be controlled by custom business logic, ensuring that only rows meeting specific conditions can be selected. The callback receives each row’s data and returns "true" to allow selection or "false" to prevent it. Local data: The callback runs once when the TreeGrid initializes and evaluates all records because the full dataset is already available on the client. @@ -111,3 +111,4 @@ In the following sample, selection is disabled for rows where the "Progress" col N> You can refer to our [`ASP.NET MVC Tree Grid`](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`ASP.NET MVC Tree Grid example`](https://ej2.syncfusion.com/aspnetmvc/TreeGrid/Overview#/material) to knows how to present and manipulate data. + From 87049f21bed4a053e83667eea097c896fe124307 Mon Sep 17 00:00:00 2001 From: YukeshNarayanB-SF5087 Date: Wed, 17 Dec 2025 14:54:50 +0530 Subject: [PATCH 09/10] Revise columns documentation for Tree Grid component Updated the columns documentation for the Syncfusion Tree Grid component, including formatting, locking, and checkbox functionalities. --- .../EJ2_ASP.MVC/columns/columns-mvc.md | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/columns-mvc.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/columns-mvc.md index 4cdebf71af..fbf91d9e81 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/columns-mvc.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/columns-mvc.md @@ -134,6 +134,38 @@ TreeGrid column supports the following types: N> If the [`Type`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Type.html) is not defined, it will be determined from the first record of the [`DataSource`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGrid~DataSource.html). + +## Checkbox column + +To render checkboxes in existing column, you need to set [`ShowCheckbox`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~ShowCheckbox.html) property as **true**. + +It is also possible to select the rows hierarchically using checkboxes in TreeGrid by enabling [`AutoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_AutoCheckHierarchy) property. When we check on any parent record checkbox then the child record checkboxes will get checked. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-mvc/checkbox/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Checkbox.cs" %} +{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-mvc/checkbox/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Checkbox.cs" %} +{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## Controlling Tree Grid actions You can enable or disable treegrid action for a particular column by setting the [`AllowFiltering`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~AllowFiltering.html), and [`AllowSorting`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~AllowSorting.html) properties in [`Column`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn.html). @@ -293,3 +325,4 @@ To render boolean values as checkbox in columns, you need to set [`DisplayAsChec N> You can refer to our [`ASP.NET MVC Tree Grid`](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`ASP.NET MVC Tree Grid example`](https://ej2.syncfusion.com/aspnetmvc/TreeGrid/Overview#/material) to knows how to present and manipulate data. + From 1f593733b80176c4b8480da1c9f4421bfb599b51 Mon Sep 17 00:00:00 2001 From: AakashSF4753 Date: Thu, 18 Dec 2025 12:16:19 +0530 Subject: [PATCH 10/10] 993923: content --- .../EJ2_ASP.MVC/columns/column-spanning.md | 13 ++++++++----- .../tree-grid/EJ2_ASP.MVC/row/row-spanning.md | 13 ++++++++----- .../EJ2_ASP.NETCORE/columns/column-spanning.md | 11 +++++++---- .../tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md | 13 ++++++++----- 4 files changed, 31 insertions(+), 19 deletions(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md index a0700b4740..6d92fab394 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md @@ -10,7 +10,7 @@ documentation: ug # Column Spanning in ##Platform_Name## TreeGrid Component -Column spanning in the ASP.MVC TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +Column spanning in the TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. In the following example, Employee "Davolio" is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. @@ -25,9 +25,9 @@ In the following example, Employee "Davolio" is scheduled for analysis from "9.0 ## Column spanning via API -The column spanning feature in the ASP.MVC TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the `EnableColumnSpan` property to "true" in the TreeGrid configuration. +Column spanning in the TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the `EnableColumnSpan` property to "true" in the TreeGrid configuration. -In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableColumnSpan` property to "false" in the column level. +In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting the `EnableColumnSpan` property to "false" in the column level. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -40,7 +40,7 @@ In the following example, column spanning is applied to the "Status", "Permit St ### Limitations -The following list outlines the features that are not compatible with column spanning. +The following list outlines the features that are not compatible with column spanning: * Virtualization * Infinite Scrolling @@ -48,4 +48,7 @@ The following list outlines the features that are not compatible with column spa * Column Virtualization * Detail Template * Editing -* Export \ No newline at end of file +* Export + +## See Also +* [Row Spanning in Syncfusion® ASP.MVC TreeGrid](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/row/row-spanning) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md index fbcb931961..640ca62e98 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md @@ -10,7 +10,7 @@ documentation: ug # Row Spanning in ##Platform_Name## TreeGrid Component -Row spanning in the ASP.MVC TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +Row spanning in the TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. In the following demo, the "Lunch Break" cell spans multiple rows in the "1:00 PM" column. @@ -25,9 +25,9 @@ In the following demo, the "Lunch Break" cell spans multiple rows in the "1:00 P ## Row spanning via API -Row spanning in the ASP.MVC TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to "true" in the TreeGrid configuration. +Row spanning in the TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to "true" in the TreeGrid configuration. -In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableRowSpan` property to "false" in the column level. +In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting the `EnableRowSpan` property to "false" in the column level. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -40,7 +40,7 @@ In the following example, row spanning is applied to the "Status", "Permit Statu ### Limitations -The following list outlines the features that are not compatible with row spanning. +The following list outlines the features that are not compatible with row spanning: * Virtualization * Infinite Scrolling @@ -48,4 +48,7 @@ The following list outlines the features that are not compatible with row spanni * Column Virtualization * Detail Template * Editing -* Export \ No newline at end of file +* Export + +## See Also +* [Column Spanning in Syncfusion® ASP.MVC TreeGrid](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/columns/column-spanning) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md index 4272455f6e..933d09298c 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md @@ -10,7 +10,7 @@ documentation: ug # Column Spanning in ##Platform_Name## TreeGrid Component -Column spanning in the ASP.Core TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +Column spanning in the TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. In the following example, Employee "Davolio" is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. @@ -27,7 +27,7 @@ In the following example, Employee "Davolio" is scheduled for analysis from "9.0 Column spanning in the TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the `EnableColumnSpan` property to "true" in the TreeGrid configuration. -In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableColumnSpan` property to "false" in the column level. +In the following example, column spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting the `EnableColumnSpan` property to "false" in the column level. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -40,7 +40,7 @@ In the following example, column spanning is applied to the "Status", "Permit St ### Limitations -The following list outlines the features that are not compatible with column spanning. +The following list outlines the features that are not compatible with column spanning: * Virtualization * Infinite Scrolling @@ -48,4 +48,7 @@ The following list outlines the features that are not compatible with column spa * Column Virtualization * Detail Template * Editing -* Export \ No newline at end of file +* Export + +## See Also +* [Row Spanning in Syncfusion® ASP.Core TreeGrid](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/row/row-spanning) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md index 5c0f1f2f45..3a409da6e1 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md @@ -10,7 +10,7 @@ documentation: ug # Row Spanning in ##Platform_Name## TreeGrid Component -Row spanning in the ASP.Core TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. +Row spanning in the TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. In the following demo, the "Lunch Break" cell spans multiple rows in the "1:00 PM" column. @@ -25,9 +25,9 @@ In the following demo, the "Lunch Break" cell spans multiple rows in the "1:00 P ## Row spanning via API -Row spanning in the ASP.Core TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to "true" in the TreeGrid configuration. +Row spanning in the TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the `EnableRowSpan` property to "true" in the TreeGrid configuration. -In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting their `EnableRowSpan` property to "false" in the column level. +In the following example, row spanning is applied to the "Status", "Permit Status", "Inspection Status", and "Punch List Status" columns, while it is disabled for the "Planned Budget" and "Actual Spend" columns by setting the `EnableRowSpan` property to "false" in the column level. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -40,7 +40,7 @@ In the following example, row spanning is applied to the "Status", "Permit Statu ### Limitations -The following list outlines the features that are not compatible with row spanning. +The following list outlines the features that are not compatible with row spanning: * Virtualization * Infinite Scrolling @@ -48,4 +48,7 @@ The following list outlines the features that are not compatible with row spanni * Column Virtualization * Detail Template * Editing -* Export \ No newline at end of file +* Export + +## See Also +* [Column Spanning in Syncfusion® ASP.Core TreeGrid](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/columns/column-spanning) \ No newline at end of file