Edit Types in ASP.NET MVC Tree Grid Component

21 Dec 20224 minutes to read

Cell edit type and its params

The EditType in Column API is used to customize the edit type of the particular column.
You can set the EditType based on data type of the column.

• NumericTextBox component for integers, double, and decimal data types.

• TextBox component for string data type.

• DropDownList component for list data type.

• booleanedit - CheckBox component for boolean data type.

• datepickeredit - DatePicker component for date data type.

• datetimepickeredit - DateTimePicker component for date time data type.

Also, you can customize model of the EditType component through the params inEdit property of Column API.

The following table describes cell edit type component and their corresponding edit params of the column.

Component	Example
NumericTextBox	params: { decimals: 2, value: 5 }
TextBox	-
DropDownList	params: { value: ‘Germany’ }
Checkbox	params: { checked: true}
DatePicker	params: { format:’dd.MM.yyyy’ }
DateTimePicker	params: { value: new Date() }

CSHTML

@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .EditSettings(edit =>
       {
         edit.AllowAdding(true);
         edit.AllowDeleting(true);
         edit.AllowEditing(true);
         edit.Mode(Syncfusion.EJ2.TreeGrid.EditMode.Row);
       })
       .Load("load")
       .Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })
       .Columns(col =>
        {
          col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(90)
             .ValidationRules(new { required = true, number = true })
             .TextAlign(TextAlign.Right).Add();
          col.Field("TaskName").HeaderText("Task Name").EditType("stringedit").Width(200)
             .ValidationRules(new { required = true }).Add();
          col.Field("StartDate").HeaderText("Start Date").Width(130)
             .EditType("datetimepickeredit")
             .Edit(new { @params = new { format = "M/d/y hh:mm a" } }).TextAlign(TextAlign.Right).Add();
          col.Field("Approved").HeaderText("Approved").Width(80).EditType("booleanedit")
             .Type("boolean").DisplayAsCheckBox(true)
             .TextAlign(TextAlign.Center).Add();
          col.Field("Progress").HeaderText("Progress").Width(100).EditType("numericedit")
             .Edit(new { @params = new { format = "n" } })
             .TextAlign(TextAlign.Right).Add();
          col.Field("Priority").HeaderText("Priority").Width(100).EditType("dropdownedit").Add();

       }).Height(270).ChildMapping("Children").TreeColumnIndex(1).Render())

<script>
    function load(args) {
        this.columns[2].format = { format: 'M/d/y hh:mm a', type: 'dateTime' };
    }
</script>

EditType.cs

public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

If edit type is not defined in the column, then it will be considered as the stringedit type (Textbox component).

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.