Skip to content

Commit 393318b

Browse files
Added the Selection Changes and hierarchy grid changes
1 parent 5464dce commit 393318b

File tree

4 files changed

+37
-83
lines changed

4 files changed

+37
-83
lines changed

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/hierarchy-grid.md

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ In the following example, the `Load` event is utilized to customize the mapping
6060
6161
## Expand child grid initially
6262

63-
Expanding the child grid initially in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid component is helpful when you want to display the child rows of the hierarchical grid expanded by default upon grid load. This can be beneficial in scenarios where you want to provide immediate visibility into the hierarchical data without requiring you to manually expand each child row.
63+
Expanding the child grid initially in the Data Grid component is helpful when you want to display the child rows of the hierarchical grid expanded by default upon grid load. This can be beneficial in scenarios where you want to provide immediate visibility into the hierarchical data without requiring you to manually expand each child row.
6464

6565
To achieve this, you can use the `expand` method with the desired target index (number) in the [DataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the grid.
6666

@@ -81,7 +81,7 @@ In the provided example, expand the third record of the grid by utilizing the `e
8181
8282
## Dynamically load child grid data
8383

84-
Dynamically load child grid data in Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid helps improve performance, optimize data transmission, and enhance the your experience by providing on-demand access to relevant information. Additionally, it offers flexibility in data presentation, which helps improve the overall efficiency of your application.
84+
Dynamically load child grid data in Data Grid helps improve performance, optimize data transmission, and enhance the your experience by providing on-demand access to relevant information. Additionally, it offers flexibility in data presentation, which helps improve the overall efficiency of your application.
8585

8686
To dynamically load the `DataSource` of a child grid in the Grid, you can utilize the [Load](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Load) event of parent grid. This event allows you to customize the loading behavior of the child grid based on the data of parent grid.
8787

@@ -100,7 +100,7 @@ The following example demonstrates how to dynamically load child grid data using
100100

101101
## Dynamically bind data to child grid based on parent row data
102102

103-
Dynamically binding data to a child grid based on the parent row data in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid component is useful when you want to display child grid data that is specific to each parent row. This feature allows for a dynamic and contextual representation of data within the child grid.
103+
Dynamically binding data to a child grid based on the parent row data in the Data Grid component is useful when you want to display child grid data that is specific to each parent row. This feature allows for a dynamic and contextual representation of data within the child grid.
104104

105105
To dynamically bind data to the child grid based on the parent row data instead of using the [QueryString](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryString) property, you can utilize the [DetailDataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DetailDataBound) event of the grid. This event is triggered when expanding the child grid.
106106

@@ -119,7 +119,7 @@ In the `DetailDataBound` event handler, you can filter the child grid's dataSour
119119

120120
## Adding record in child grid
121121

122-
Adding a record in a child grid within the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid component is useful when you want to provide the ability to add new records to the child grid. This feature allows you to input and save additional data specific to each parent row.
122+
Adding a record in a child grid within the Data Grid component is useful when you want to provide the ability to add new records to the child grid. This feature allows you to input and save additional data specific to each parent row.
123123

124124
To maintain the parent-child relationship in the Grid when adding a record to the child grid, you need to set the value for the `QueryString` in the added data. This can be done using the [ActionBegin](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event.
125125

@@ -138,7 +138,7 @@ In the following example, the parent and child grids are related by the **Employ
138138

139139
## Template column in child grid
140140

141-
A template column in a child grid within the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid component is valuable when you want to customize the appearance and functionality of specific columns in the child grid. It is useful for incorporating interactive elements, custom formatting, or complex data representation within specific columns of the child grid.
141+
A template column in a child grid within the Data Grid component is valuable when you want to customize the appearance and functionality of specific columns in the child grid. It is useful for incorporating interactive elements, custom formatting, or complex data representation within specific columns of the child grid.
142142

143143
To achieve this, you can utilize the `Template` property of a column to display a custom element instead of a field value in the Grid.
144144

@@ -176,7 +176,7 @@ The following example demonstrates how to obtain parent details in a child grid
176176

177177
## Render aggregates in child grid
178178

179-
The Aggregates feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid component allows you to display aggregate values in the footer, group footer, and group caption of the child grid. With this feature, you can easily perform calculations on specific columns and show summary information.
179+
The Aggregates feature in the Data Grid component allows you to display aggregate values in the footer, group footer, and group caption of the child grid. With this feature, you can easily perform calculations on specific columns and show summary information.
180180

181181
Rendering aggregates in a child grid involves displaying summary data at the footer or group caption of the grid. This can be particularly useful in hierarchical grids where each child grid represents detailed data that needs to be summarized.
182182

@@ -195,7 +195,7 @@ The following example demonstrates how to render aggregates in a child grid to d
195195

196196
## Expand all by external button
197197

198-
The Hierarchy Grid in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid component allows you to expand all child grid rows using an external button. This feature provides you with a convenient overview of all the hierarchical data within the grid, eliminating the need to manually expand each row individually.
198+
The Hierarchy Grid in the Data Grid component allows you to expand all child grid rows using an external button. This feature provides you with a convenient overview of all the hierarchical data within the grid, eliminating the need to manually expand each row individually.
199199

200200
By default, Grid renders all child grid rows in collapsed state. To expand all child grid rows in the Grid using an external button, you can utilize the `expandAll` method provided by the DetailRow module. Similarly, to collapse all grid rows, you can use the `collapseAll` method.
201201

@@ -216,7 +216,7 @@ The following example demonstrates how to expand and collapse the hierarchy grid
216216
217217
## Hide the expand/collapse icon in parent row when no record in child grid
218218

219-
The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid allows you to hide the expand/collapse icon in the parent row when there are no records in the child grid. However, in certain scenarios, you may want to hide the expand/collapse icon for parent rows that do not have any child records, providing a cleaner and more intuitive interface by eliminating unnecessary icons in empty parent rows.
219+
The Data Grid allows you to hide the expand/collapse icon in the parent row when there are no records in the child grid. However, in certain scenarios, you may want to hide the expand/collapse icon for parent rows that do not have any child records, providing a cleaner and more intuitive interface by eliminating unnecessary icons in empty parent rows.
220220

221221
To achieve this, you can utilize the [RowDataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_RowDataBound) event to hide the icon when there are no records in the child grid.
222222

@@ -266,7 +266,7 @@ The following example demonstrates how to hide the expand/collapse icon in the r
266266

267267
## Customize hierarchy Grid icons
268268

269-
The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid provides built-in expand/collapse icons for hierarchical Grid. However, you can customize these icons using custom CSS to modify their visual representation.
269+
The Data Grid provides built-in expand/collapse icons for hierarchical Grid. However, you can customize these icons using custom CSS to modify their visual representation.
270270

271271
To change the default icons, add the following CSS styles to your **index.html** file:
272272

@@ -297,15 +297,9 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and
297297

298298
## Detail row events
299299

300-
The Grid component provides the `detailExpand` and `detailCollapse` events, which are triggered when a detail row is about to expand or collapse. These events fire before the detail row actually expands or collapses, allowing you to control whether the action should proceed.
300+
The Grid control's `detailExpand` and `detailCollapse` events fire before a detail row actually expands or collapses, allowing you a chance to control whether the action should continue. The `detailExpand` event is raised just before a row expands, and `detailCollapse` fires just before a row collapses, with both events providing respective details through their event arguments.
301301

302-
`detailExpand` – This event is triggered before a detail row begins to expand. You can access the expansion details through the event arguments and optionally prevent the expansion by setting:
303-
`args.cancel = true`;
304-
305-
`detailCollapse` – This event is triggered before a detail row begins to collapse. You can access the collapse details through the event arguments and optionally prevent the collapse by setting:
306-
`args.cancel = true`;
307-
308-
In the example below, expansion is prevented for the **Nancy** row, and collapse is prevented for the **Andrew** row.
302+
In the example below, expansion is prevented for the "Nancy" row, and collapse is prevented for the "Andrew" row.
309303

310304
{% tabs %}
311305
{% highlight cshtml tabtitle="CSHTML" %}
@@ -318,7 +312,7 @@ In the example below, expansion is prevented for the **Nancy** row, and collapse
318312

319313
## Customize the child grid
320314

321-
The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid.
315+
The Data Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid.
322316

323317
### Header
324318

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ In the following example, it demonstrates how to dynamically enable and change t
5050

5151
![Checkbox selection mode](../images/selection/checkbox-mode.gif)
5252

53-
## Hide selectall checkbox in column header
53+
## Hide select-all checkbox in column header
5454

5555
You can hide the select all checkbox in the column header of the Syncfusion Grid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the grid.
5656

@@ -69,30 +69,13 @@ Here's an example of how to hide selectall checkbox in column header using empty
6969

7070
![Hide selectall checkbox in column header](../images/selection/checkbox-hide.png)
7171

72-
## Prevent specific rows from being selected in checkbox selection
72+
## Conditional row selection
7373

74-
The checkbox selection mode allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. However, there might be scenarios where you want to prevent specific rows from being selected based on certain conditions or business requirements.
74+
The `isRowSelectable` callback determines which rows in the Data Grid can be selected. It evaluates each row's data and returns **true** for rows that should be selectable and **false** for those that should not.
7575

76-
To achieve this, you can use the [RowDataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_RowDataBound) event of the Grid. The `RowDataBound` event is triggered for each row after it is bound to the data source. In this event, you can check the row data and determine whether the row should be selectable or not. If you want to prevent the row from being selected, you can set the `isSelectable` argument of the event to **false**.
76+
**Local data:** The callback runs once when the grid initializes and evaluates all records because the full dataset is already available on the client.
7777

78-
In the following sample, the selection of specific rows has been prevented based on the `isSelectable` argument in the `RowDataBound` event.
79-
80-
{% tabs %}
81-
{% highlight cshtml tabtitle="CSHTML" %}
82-
{% include code-snippet/grid/selection/checkbox-prevent/razor %}
83-
{% endhighlight %}
84-
{% highlight c# tabtitle="checkbox.cs" %}
85-
{% include code-snippet/grid/selection/checkbox-prevent/checkbox.cs%}
86-
{% endhighlight %}
87-
{% endtabs %}
88-
89-
![Prevent specific rows from being selected in checkbox selection](../images/selection/checkbox-prevent.gif)
90-
91-
## Partial selection using isRowSelectable
92-
93-
The `isRowSelectable` callback in Syncfusion's EJ2 Grid allows control over which rows users can select. It uses a simple callback that runs before the grid loads the data. This callback checks each row data and returns **true** if the row can be selected, or **false** for non-selectable rows.
94-
95-
For local data, the callback checks all items just once when the grid first loads. For remote data, it only checks the rows shown on the current page when the grid first appears. It re-checks them every time an action occurs, such as changing pages, filtering, or sorting.
78+
**Remote data:** The callback runs only for the rows displayed on the current page when the grid 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.
9679

9780
In the example below, it prevents selection of rows with canceled orders.
9881

@@ -105,7 +88,7 @@ In the example below, it prevents selection of rows with canceled orders.
10588
{% endhighlight %}
10689
{% endtabs %}
10790

108-
## How to select single row in checkbox selection mode
91+
## Select single row in checkbox selection mode
10992

11093
The ASP.NET MVC Grid allows you to select only one row at a time within the Grid. This feature is particularly useful when you want to ensure that only a single row is selected, and any previous selections are cleared when a new row is selected.
11194

0 commit comments

Comments
 (0)