Skip to content

bug(1025940): Editing Documentation upgradation #8377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sreedharkumar-Panarapu wants to merge 3 commits into
base: development
Choose a base branch
from
Open

bug(1025940): Editing Documentation upgradation #8377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
28cba3b
Update the boolean value directly ui
Sreedharkumar-Panarapu May 8, 2026
94da99e
Update textarea rendering cell edit type
Sreedharkumar-Panarapu May 8, 2026
36abb42
Update print statement from 'Hello' to 'Goodbye'
Sreedharkumar-Panarapu May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 119 additions & 1 deletion blazor/treegrid/editing/cell-edit-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,6 +457,124 @@ public class TreeData

![Blazor Tree Grid with NumericTextBox Edit Template](../images/blazor-treegrid-numerictextbox-edit-template.webp)

### Render TextArea in EditTemplate

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid supports rendering a [SfTextArea](https://blazor.syncfusion.com/documentation/textarea/getting-started-webapp) within the TreeGrid's edit form for specific columns. This functionality is useful for editing and displaying multi-line text content, providing an efficient way to manage extensive text data within TreeGrid cells.

To render a `SfTextArea` in the edit form, define an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) in the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html). The `EditTemplate` property specifies the cell edit template used as an editor for the column and accepts either a template string or an HTML element ID.

> When using a `SfTextArea`, press **Shift+Enter** to insert a new line. By default, pressing **Enter** triggers a record update while in edit mode.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}

@page "/"
@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

<SfTreeGrid DataSource="@TreeGridData"
IdMapping="TaskId"
ParentIdMapping="ParentId"
TreeColumnIndex="1"
Height="350px">

<TreeGridEditSettings AllowEditing="true"></TreeGridEditSettings>

<TreeGridColumns>
<TreeGridColumn Field="TaskId"
HeaderText="Task ID"
IsPrimaryKey="true"
Width="90"
TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right">
</TreeGridColumn>

<TreeGridColumn Field="TaskName"
HeaderText="Task Name"
Width="150">
</TreeGridColumn>

<!-- TextArea column (same as Grid sample) -->
<TreeGridColumn Field="Description"
HeaderText="Description"
Width="220">
<EditTemplate>
<SfTextArea @bind-Value="@((context as TreeItem).Description)"
Placeholder="Enter description">
</SfTextArea>
</EditTemplate>

<Template>
<div style="white-space: pre-wrap;">
@((context as TreeItem).Description)
</div>
</Template>
</TreeGridColumn>

<!-- Boolean checkbox column -->
<TreeGridColumn Field="Approved"
HeaderText="Approved"
Width="100">
<Template>
@{
var item = context as TreeItem;
<SfCheckBox @bind-Checked="item.Approved"></SfCheckBox>
}
</Template>
</TreeGridColumn>

</TreeGridColumns>
</SfTreeGrid>
@code {

public class TreeItem
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public string Description { get; set; }
public bool Approved { get; set; }
public int? ParentId { get; set; }
}

public List<TreeItem> TreeGridData { get; set; }

protected override void OnInitialized()
{
TreeGridData = new List<TreeItem>
{
new TreeItem
{
TaskId = 1,
TaskName = "Parent Task 1",
Description = "This is a parent task.\nMultiline text supported.",
Approved = true,
ParentId = null
},
new TreeItem
{
TaskId = 2,
TaskName = "Child Task 1",
Description = "Child task description",
Approved = false,
ParentId = 1
},
new TreeItem
{
TaskId = 3,
TaskName = "Child Task 2",
Description = "Another child task",
Approved = true,
ParentId = 1
}
};
}
}
{% endhighlight %}
{% endtabs %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBdteZPTqGFpSWM?appbar=true&editor=true&result=true&errorlist=false&theme=fluent2" %}


### Using TimePicker in EditTemplate

Render the [SfTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) component for the edit form field in tree grid using [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_EditTemplate). In the following sample, `SfTimePicker` component is rendered in the `EditTemplate` for the **StartDate** column.
Expand Down Expand Up @@ -764,4 +882,4 @@ public class TreeData
{% endtabs %}

In the following image, `SfRichTextEditor` component is rendered with the `EditTemplate` in the **TaskName** column
![Blazor Tree Grid with Editing in Custom RichTextEditor](../images/blazor-treegrid-editing-in-custom-richtexteditor.webp)
![Blazor Tree Grid with Editing in Custom RichTextEditor](../images/blazor-treegrid-editing-in-custom-richtexteditor.webp)
83 changes: 83 additions & 0 deletions blazor/treegrid/editing/edit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -925,6 +925,89 @@ public class TreeData
The following GIF shows the TreeGrid with a custom external form for editing.
![Blazor TreeGrid with Custom External form Editing](../images/blazor-treegrid-custom-form-editing.webp)

## Update boolean column value with a single click

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid supports updating boolean column values with a single click in normal editing mode. This feature streamlines the process of toggling boolean values directly within the TreeGrid, improving interaction efficiency.

This behavior can be achieved using the [column template](https://blazor.syncfusion.com/documentation/treegrid/columns/column-template) feature. The column template allows custom UI elements, such as checkboxes, to be rendered for specific columns. By configuring the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) property, a checkbox can be rendered in the desired column, and its change event can be handled to update the value with a single click.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}

@page "/"
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.TreeGrid;

<SfTreeGrid DataSource="@TreeGridData"
IdMapping="TaskId"
ParentIdMapping="ParentId"
TreeColumnIndex="1"
>
<TreeGridEditSettings AllowEditing="true"></TreeGridEditSettings>

<TreeGridColumns>
<TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" IsPrimaryKey="true" ></TreeGridColumn>
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160" > </TreeGridColumn>

<TreeGridColumn Field="Approved"
HeaderText="Approved"
Width="100">
<Template>
@{
var item = (context as TreeData.BusinessObject);
<SfCheckBox @bind-Checked="item.Approved"></SfCheckBox>
}
</Template>
</TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>

@code {

public List<TreeData.BusinessObject> TreeGridData { get; set; }
protected override void OnInitialized()
{
this.TreeGridData = TreeData.GetSelfDataSource().ToList();
}
}
{% endhighlight %}

{% highlight c# tabtitle="BusinessObject.cs" %}

public class TreeData
{
public class BusinessObject
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public int? Duration { get; set; }
public int? Progress { get; set; }
public bool Approved { get; set; }
public int? ParentId { get; set; }
public string Priority { get; set; }
}

public static List<BusinessObject> GetSelfDataSource()
{
List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null, Approved = true });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 10, Progress = 80, Priority = "Low", ParentId = 1, Approved = false });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2, Approved = false });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Priority = "High", Progress = 77, ParentId = 3, Approved = true});
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null, Approved = true });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5, Approved = false });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5, Approved = true });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5, Approved = false });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5, Approved = true });
return BusinessObjectCollection;
}
}

{% endhighlight %}
{% endtabs %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLRZIXlqbyFAgDQ?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %}

## Edit enum column

Edit enum type data in a TreeGrid column using the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_EditTemplate).
Expand Down