Edit Types in ASP.NET CORE Tree Grid Component

21 Dec 20224 minutes to read

Cell edit type and its params

The editType of e-treegrid-column tag helper is used to customize the edit type of the particular column. You can set the editType based on data type of the column.

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

  • defaultedit - TextBox component for string data type.

  • dropdownedit - 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 in edit property of e-treegrid-column tag helper .

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() } 
@{
    var numParams = new { @params = new { format = "n" } };
    var dateParams = new { @params = new { format = "M/d/y hh:mm a" } };
}

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" childMapping="Children" load="load" height="270" treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
    <e-treegrid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Row"></e-treegrid-editSettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" editType="stringedit" width="120"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" edit=dateParams editType="datetimepickeredit" textAlign="Right" width="120"></e-treegrid-column>
        <e-treegrid-column field="Approved" headerText="Approved" editType="booleanedit"
            type="boolean" displayAsCheckBox="true" textAlign="Center" width="120"></e-treegrid-column>
        <e-treegrid-column field="Progress" headerText="Progress" edit=numParams editType="numericedit" textAlign="Right" width="80"></e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" editType="dropdownedit" width="120"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<script>
    function load(args) {
        this.columns[2].format = { format: 'M/d/y hh:mm a', type: 'dateTime' };
    }
</script>
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 Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.