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..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,9 +10,9 @@ 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. +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. +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 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 + +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 the `EnableColumnSpan` property to "false" in the column level. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -49,12 +38,10 @@ 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 @@ -62,3 +49,6 @@ Column spanning feature is not compatible with all the features which are availa * Detail Template * Editing * 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/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. + 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..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,9 +10,9 @@ 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. +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. +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 via API -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 implementation through 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". +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 the `EnableRowSpan` property to "false" in the column level. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -49,12 +38,10 @@ 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 @@ -62,3 +49,6 @@ Row spanning feature is not compatible with all the features which are available * Detail Template * Editing * 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.MVC/selection/check-box-selection.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md index c3980a1555..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,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 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. + +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,6 @@ 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 %} +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. - {% 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 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..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,9 +10,9 @@ 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. +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. +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 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 + +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 the `EnableColumnSpan` property to "false" in the column level. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -49,12 +38,10 @@ 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 @@ -62,3 +49,6 @@ Column spanning feature is not compatible with all the features which are availa * Detail Template * Editing * 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/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. + 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..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,9 +10,9 @@ 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. +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. +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 via API -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 implementation through 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". +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 the `EnableRowSpan` property to "false" in the column level. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -49,12 +38,10 @@ 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 @@ -62,3 +49,6 @@ Row spanning feature is not compatible with all the features which are available * Detail Template * Editing * 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 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..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,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 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. + +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,5 @@ 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/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) property of as **true**. - - 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" %} - - {% 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 %} - -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/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" %} - - {% 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. -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