How to enable Editing in .NET MVC TreeGrid ?
We can enable editing in TreeGrid by set “AllowEditing” property as “True”.
The following edit modes are available in TreeGrid,
- Cell Editing
- Row Editing
- Dialog Editing
Cell Editing
In cell editing mode user can edit a specific cell of the selected row by set “EditMode” property as “CellEditing”. The below code example explains how to enable cell edit mode in TreeGrid.
[MVC]
<body>
<script type="text/javascript">
@(Html.EJ().TreeGrid("TreeGridContainer")
//...
.EditSettings(edit =>
{
edit.AllowEditing(true);
edit.EditMode(TreeGridEditMode.CellEditing);
})
.Datasource((System.Collections.IEnumerable)ViewBag.datasource)
)
@(Html.EJ().ScriptManager())
</script>
</body>
The following screen shot illustrates the cell edit mode in TreeGrid.
Row Editing
It is possible to make the entire row to editable state and to update a record by set “EditMode” property as “RowEditing”, please refer the below code snippet.
[MVC]
<body>
<script type="text/javascript">
@(Html.EJ().TreeGrid("TreeGridContainer")
//...
.EditSettings(edit =>
{
edit.AllowEditing(true);
edit.EditMode(TreeGridEditMode.RowEditing);
})
.Datasource((System.Collections.IEnumerable)ViewBag.datasource)
)
@(Html.EJ().ScriptManager())
</script>
</body>
The following screen shot illustrates the row edit mode in TreeGrid.
Sample link
A TreeGrid sample with inline editing is available in the following link, Sample.
Dialog Editing
We can perform add/edit actions through edit dialog, we can enable dialog edit mode by set “EditMode” as “DialogEditing”, please refer the below code snippet for this.
[ASP]
<body>
<script type="text/javascript">
@(Html.EJ().TreeGrid("TreeGridContainer")
//...
.EditSettings(edit =>
{
edit.AllowEditing(true);
edit.EditMode(TreeGridEditMode.DialogEditing);
})
.Datasource((System.Collections.IEnumerable)ViewBag.datasource)
)
@(Html.EJ().ScriptManager())
</script>
</body>
The following screen shot illustrates the dialog edit mode in TreeGrid.
Sample link
A TreeGrid sample with dialog editing is available in the following link, Sample
Conclusion
I hope you enjoyed learning about how to enable Editing in .NET MVC TreeGrid.
You can refer to our .NET MVC TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
