Skip to content

Commit 87269f9

Browse files
thavasianandthavasianand
authored
Merge pull request #6701 from syncfusion-content/983239-treegrid2
983239: Treegrid files updated
2 parents 5671270 + f205a77 commit 87269f9

File tree

4 files changed

+89
-88
lines changed

4 files changed

+89
-88
lines changed

‎blazor/treegrid/clipboard.md‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
33
title: Clipboard in Blazor TreeGrid Component | Syncfusion
4-
description: Checkout and learn here all about clipboard in Syncfusion Blazor TreeGrid component and much more details.
4+
description: Learn how to use clipboard features in the Syncfusion Blazor TreeGrid component and much more details.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Clipboard in Blazor TreeGrid Component
10+
# Clipboard in Syncfusion Blazor TreeGrid Component
1111

12-
The clipboard provides an option to copy selected rows or cells data into the clipboard.
12+
The clipboard feature allows copying selected rows or cell data from the TreeGrid.
1313

1414
The following list of keyboard shortcuts is supported in the Tree Grid to copy selected rows or cells data into the clipboard.
1515

@@ -189,15 +189,14 @@ namespace TreeGridComponent.Data {
189189

190190
## Copy Hierarchy Modes
191191

192-
Tree Grid provides support for a set of copy modes with [CopyHierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.CopyHierarchyType.html) property. The below are the type of filter mode available in the Tree Grid.
192+
The TreeGrid supports multiple copy hierarchy modes using the [CopyHierarchMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.CopyHierarchyType.html) property.
193193

194-
* **Parent** : This is the default copy hierarchy mode in the Tree Grid. Clipboard value will have the selected records with its parent records, if the selected records does not have any parent record then the selected record will be in clipboard.
195-
196-
* **Child** : Clipboard value will have the selected records with its child record. If the selected records do not have any child record then the selected records will be in clipboard.
197-
198-
* **Both** : Clipboard value will have the selected records with its both parent and child record. If the selected records do not have any parent and child record then the selected records alone are copied to the clipboard.
199-
200-
* **None** : Only the selected records will be in the clipboard.
194+
| Mode | Description |
195+
|------|-------------|
196+
| **Parent** | Copies selected records along with their parent records |
197+
| **Child** | Copies selected records along with their child records |
198+
| **Both** | Copies selected records with both parent and child records |
199+
| **None** | Copies only the selected records |
201200

202201
{% tabs %}
203202

@@ -384,14 +383,18 @@ namespace TreeGridComponent.Data {
384383
385384
### Limitations of Paste Functionality
386385

387-
* Since the string values are not pasted to number and date type, so when the copied string type cells are pasted to number type cells, then it will be displayed as **NaN**. For date type cells, when the copied string format cells are pasted to date type cells, then it will be displayed as an **empty cell**.
386+
- String values pasted into number-type cells will display as **NaN**
387+
- String values pasted into date-type cells will display as **empty cells**
388+
- Sequential data generation is not supported
388389

389-
## Clipboard events
390+
## Clipboard Events
390391

391-
Events are triggered when performing a copy or paste action on TreeGrid.
392+
The following events are triggered during clipboard operations:
392393

393-
* [BeforeCopyPaste](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_BeforeCopyPaste) : This event is triggered before the cell is copied or pasted in the tree grid cell, and you can cancel the entire copy or paste action by using this event.
394+
* [BeforeCopyPaste](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_BeforeCopyPaste) : Triggered before copying or pasting; can cancel the action.
394395

395-
* [BeforeCellPaste](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_BeforeCellPaste) : This event is triggered before pasting the copied cell value for each cell, and you can cancel the pasting action for a particular cell or change the value by using this event.
396+
* [BeforeCellPaste](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_BeforeCellPaste) : Triggered before pasting each cell; can cancel or modify the value.
396397

397-
> To know more, you can refer the [BeforeCopyPaste](https://blazor.syncfusion.com/documentation/treegrid/events#beforecopypaste) and [BeforeCellPaste](https://blazor.syncfusion.com/documentation/treegrid/events#beforecellpaste) events.
398+
> For more details, refer to:
399+
> - [BeforeCopyPaste](https://blazor.syncfusion.com/documentation/treegrid/events#beforecopypaste)
400+
> - [BeforeCellPaste](https://blazor.syncfusion.com/documentation/treegrid/events#beforecellpaste)

‎blazor/treegrid/context-menu.md‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
---
22
layout: post
33
title: Context Menu in Blazor TreeGrid Component | Syncfusion
4-
description: Checkout and learn here all about context menu in Syncfusion Blazor TreeGrid component and much more.
4+
description: Learn how to enable and customize context menu options in the Syncfusion Blazor TreeGrid component and much more.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Context Menu in Blazor TreeGrid Component
11-
12-
The Tree Grid has options to show the context menu when right clicked on it. To enable this feature, define either default or custom item in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ContextMenuItems) property.
13-
14-
The following table lists the default context menu items,
15-
16-
Items |Description
17-
-----|-----
18-
`AutoFit` | Auto fit the current column.
19-
`AutoFitAll` | Auto fit all columns.
20-
`Edit` | Edit the current record.
21-
`Delete` | Delete the current record.
22-
`Save` | Save the edited record.
23-
`Cancel` | Cancel the edited state.
24-
`Copy` | Copy the selected records.
25-
`PdfExport` | Export the Tree Grid data as Pdf document.
26-
`ExcelExport` | Export the Tree Grid data as Excel document.
27-
`CsvExport` | Export the Tree Grid data as CSV document.
28-
`SortAscending` | Sort the current column in ascending order.
29-
`SortDescending` | Sort the current column in descending order.
30-
`FirstPage` | Go to the first page.
31-
`PrevPage` | Go to the previous page.
32-
`LastPage` | Go to the last page.
33-
`NextPage` | Go to the next page.
34-
`AddRow` | Add new row to the Tree Grid.
10+
# Context Menu in Syncfusion Blazor TreeGrid Component
11+
12+
The TreeGrid supports displaying a context menu on right-click. To enable this feature, define default or custom items using the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ContextMenuItems) property.
13+
14+
## Default Context Menu Items
15+
16+
| Item | Description |
17+
|------|-------------|
18+
| `AutoFit` | Auto fit the current column |
19+
| `AutoFitAll` | Auto fit all columns |
20+
| `Edit` | Edit the current record |
21+
| `Delete` | Delete the current record |
22+
| `Save` | Save the edited record |
23+
| `Cancel` | Cancel the edited state |
24+
| `Copy` | Copy the selected records |
25+
| `PdfExport` | Export TreeGrid data as PDF |
26+
| `ExcelExport` | Export TreeGrid data as Excel |
27+
| `CsvExport` | Export TreeGrid data as CSV |
28+
| `SortAscending` | Sort the current column in ascending order |
29+
| `SortDescending` | Sort the current column in descending order |
30+
| `FirstPage` | Navigate to the first page |
31+
| `PrevPage` | Navigate to the previous page |
32+
| `LastPage` | Navigate to the last page |
33+
| `NextPage` | Navigate to the next page |
34+
| `AddRow` | Add a new row to the TreeGrid |
3535

3636
The following sample code demonstrates enabling context menu with its default items,
3737

@@ -60,7 +60,7 @@ The following sample code demonstrates enabling context menu with its default it
6060
public int Progress { get; set; }
6161
public string Priority { get; set; }
6262
public int? ParentId { get; set; }
63-
public Boolean Approved { get; set; }
63+
public bool Approved { get; set; }
6464
}
6565
6666
public List<BusinessObject> TreeData = new List<BusinessObject>();
@@ -82,9 +82,9 @@ The following sample code demonstrates enabling context menu with its default it
8282

8383
![Blazor TreeGrid with Context Menu](images/blazor-treegrid-context-menu.png)
8484

85-
## Custom context menu items
85+
## Custom Context Menu Items
8686

87-
The custom context menu items can be added by defining the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ContextMenuItems) as a collection of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html). Actions for these customized items can be defined in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_ContextMenuItemClicked) event.
87+
Add custom context menu items by setting [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ContextMenuItems) to a collection of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects, and handle their actions in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_ContextMenuItemClicked) event.
8888

8989
The following sample code demonstrates defining custom context menu item and its corresponding action in the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_ContextMenuItemClicked) event,
9090

‎blazor/treegrid/custom-binding.md‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
---
22
layout: post
33
title: Custom Binding in Blazor TreeGrid Component | Syncfusion
4-
description: Checkout and learn here all about custom binding in Syncfusion Blazor TreeGrid component and much more.
4+
description: Learn how to implement custom data binding and CRUD operations in the Syncfusion Blazor TreeGrid component and much more.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

1010
# Custom Binding in Blazor TreeGrid Component
1111

12-
The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows to perform manual operations on the data. This can be utilized for implementing custom data binding and editing operations in the Tree Grid component.
12+
The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors that allow manual operations on data. This enables custom data binding and editing in the TreeGrid component.
1313

14-
N> Only [Self-Referential type data](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) is supported with custom binding in tree grid
14+
N> Only [Self-Referential type data](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) is supported with custom binding in TreeGrid.
1515

16-
For implementing custom data binding in the Tree Grid, the **DataAdaptor** class is used. This abstract class acts as a base class for the custom adaptor.
16+
For implementing custom data binding in the TreeGrid, the **DataAdaptor** class is used. This abstract class acts as a base class for the custom adaptor.
1717

18-
The **DataAdaptor** abstract class has both synchronous and asynchronous method signatures which can be overridden in the custom adaptor. Following are the method signatures present in this class,
18+
The **DataAdaptor** abstract class provides both synchronous and asynchronous method signatures for custom data operations.
1919

2020
```csharp
2121
public abstract class DataAdaptor
@@ -71,9 +71,9 @@ public abstract class DataAdaptor
7171
}
7272
```
7373

74-
## Data binding
74+
## Data Binding
7575

76-
The custom data binding can be performed in the Tree Grid component by providing the custom adaptor class and overriding the **Read** or **ReadAsync** method of the **DataAdaptor** abstract class.
76+
The custom data binding can be performed in the TreeGrid component by providing the custom adaptor class and overriding the **Read** or **ReadAsync** method of the **DataAdaptor** abstract class.
7777

7878
The following sample code demonstrates implementing custom data binding using custom adaptor,
7979

@@ -213,11 +213,9 @@ public class SelfReferenceData
213213
N> If the **DataManagerRequest.RequiresCounts** value is **true**, then the Read/ReadAsync return value must be of **DataResult** with properties **Result** whose value is a collection of records and **Count** whose value is the total number of records. If the **DataManagerRequest.RequiresCounts** is **false**, then simply send the collection of records.
214214
<br/> If the Read/ReadAsync method is not overridden in the custom adaptor then it will be handled by the default read handler.
215215

216-
## Inject service into Custom Adaptor
216+
## Injecting Services into Custom Adaptor
217217

218-
If you want to inject some of your service into Custom Adaptor and use the service, then you can achieve your requirement by using below way.
219-
220-
Initially, the CustomAdaptor class must be added as AddScoped in `Program.cs` file.
218+
To inject services into a custom adaptor, register them in `Program.cs`:
221219

222220
```csharp
223221
builder.Services.AddSingleton<TaskDataAccessLayer>();
@@ -294,13 +292,13 @@ The following sample code demonstrates injecting service into Custom Adaptor,
294292

295293
Custom Adaptor can be created as a component when `DataAdaptor` is extended from `OwningComponentBase`. Custom Adaptor can be created from any of the two versions of the class, `DataAdaptor` and `DataAdaptor<T>`.
296294

297-
Ensure to register your service in **Startup.cs** file.
295+
Register services in **Startup.cs**:
298296

299297
```csharp
300298
public void ConfigureServices(IServiceCollection services)
301299
{
302300
...
303-
services.AddScoped<SelfReferenceData>();
301+
services.AddScoped<SelfReferenceData>();
304302
}
305303
```
306304

@@ -453,14 +451,14 @@ The following sample code demonstrates `DataAdaptor` extended from `OwningCompon
453451

454452
## CRUD operation
455453

456-
The CRUD operations for the custom bounded data in the Tree Grid component can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class,
454+
The CRUD operations for the custom bounded data in the TreeGrid component can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class,
457455

458456
* **Insert/InsertAsync**
459457
* **Remove/RemoveAsync**
460458
* **Update/UpdateAsync**
461459
* **BatchUpdate/BatchUpdateAsync**
462460

463-
N> While using batch editing in tree grid, use BatchUpdate/BatchUpdateAsync method to handle the corresponding CRUD operation
461+
N> While using batch editing in TreeGrid, use BatchUpdate/BatchUpdateAsync method to handle the corresponding CRUD operation
464462

465463
The following sample code demonstrates implementing CRUD operations for the custom bounded data,
466464

‎blazor/treegrid/custom-style.md‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
---
22
layout: post
33
title: Styling and Appearance in Blazor TreeGrid Component | Syncfusion
4-
description: Checkout and learn here all about Styling and Appearance in Syncfusion Blazor TreeGrid component and more.
4+
description: Learn how to customize the styling and appearance of the Syncfusion Blazor TreeGrid component using CSS classes.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

1010
# Styling and Appearance in Blazor TreeGrid Component
1111

12-
To modify the Tree Grid appearance, override the default CSS of Tree Grid. Find the list of CSS classes and its corresponding section in Tree Grid.
12+
To modify the appearance of the TreeGrid, override its default CSS styles. Below is a categorized list of CSS classes and their corresponding sections in the TreeGrid.
1313

14-
| Section |CSS class | Purpose of CSS class |
15-
| ----- | ----- | ----- |
16-
| **Root** | e-treegrid | This classes are in this root element div of the Tree Grid control. |
17-
| **Header** | e-gridheader | This class is added in the root element of header element. In this class, thin line between header and content of the Tree Grid can be overridden. |
18-
| | e-table | This class is added at the **table** of the Tree Grid header. This CSS class makes table width as 100 %. |
19-
| | e-columnheader | This class is added at **tr** of the Tree Grid header. |
20-
| | e-headercell | This class is added in **th** element of Tree Grid header. The background color of header and border color can be overridden. |
21-
| | e-headercelldiv | This class is added in div which is present in **th** element in the header. Use the e-headercelldiv to override skeleton of header. |
22-
| **Body** | e-gridcontent | This class is added at root of the body content. This is to override background color of the body. |
23-
| | e-table | This class is added to table of the content. This CSS class makes table width as 100 %. |
24-
| | e-altrow | This class is added to the alternate rows of Tree Grid. This is to override alternate row color of the Tree Grid. |
25-
| | e-rowcell | This class is added to all cells in the Tree Grid. This is to override cells appearance and styling. |
26-
| | e-groupcaption | This class is added to the **td** of group caption which is to change the background color of caption cell. |
27-
| | e-selectionbackground | This class is added to rowcell's of the Tree Grid. This is override selection. |
28-
| | e-hover | This class adds to row of Tree Grid, while hovering the Tree Grid rows. |
29-
| **Pager** | e-pager | This class is added to root element of the pager. This is to change appearance of the background color and color of font. |
30-
| | e-pagercontainer | This class is added to numeric items of the pager. |
31-
| | e-parentmsgbar | This class is added to pager info of the pager. |
32-
| **Summary** | e-gridfooter | This class is added to root of the summary div. |
33-
| | e-summaryrow | This class is added to rows of Tree Grid summary. |
34-
| | e-summarycell | This class is added to cells of summary row. This to override background color of summary. |
14+
| Section | CSS Class | Purpose |
15+
|-------------|-------------------------|---------|
16+
| **Root** | `e-treegrid` | Applied to the root element of the TreeGrid control |
17+
| **Header** | `e-gridheader` | Applied to the root of the header; used to style the line between header and content |
18+
| | `e-table` | Applied to the header table; sets table width to 100% |
19+
| | `e-columnheader` | Applied to the `tr` element in the header |
20+
| | `e-headercell` | Applied to the `th` element; used to style header background and borders |
21+
| | `e-headercelldiv` | Applied to the `div` inside `th`; used to style header skeleton |
22+
| **Body** | `e-gridcontent` | Applied to the root of the body content; used to style background color |
23+
| | `e-table` | Applied to the content table; sets table width to 100% |
24+
| | `e-altrow` | Applied to alternate rows; used to style alternate row colors |
25+
| | `e-rowcell` | Applied to all cells; used to style cell appearance |
26+
| | `e-groupcaption` | Applied to `td` of group caption; used to style caption background |
27+
| | `e-selectionbackground` | Applied to selected row cells; used to style selection background |
28+
| | `e-hover` | Applied to rows on hover; used to style hover effect |
29+
| **Pager** | `e-pager` | Applied to the root of the pager; used to style background and font color |
30+
| | `e-pagercontainer` | Applied to numeric pager items |
31+
| | `e-parentmsgbar` | Applied to pager info section |
32+
| **Summary** | `e-gridfooter` | Applied to the root of the summary section |
33+
| | `e-summaryrow` | Applied to summary rows |
34+
| | `e-summarycell` | Applied to summary cells; used to style summary background |

0 commit comments

Comments
 (0)