How to enable Editing in 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
