How to conditionally change the add record position in TreeGrid?

4 mins read

This knowledge base explains how to conditionally add the new records in Tree Grid.

Solution

In Tree Grid, by default the new records is added at the top. In certain cases, you may like to add the new records based on your condition that whether it will be added as a “Child” Or “Top” Or “Below” Or “Above” to the selected records. You can achieve it through the newRowPosition property of Tree Grid and by setting the value you can easily change the position of the record to be added dynamically. In the below code we have used DropDownList to change the newRowPosition value.

let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: sampleData,
            childMapping: 'subtasks',
            treeColumnIndex: 1,
            height: 400,
            width: 800,
            editSettings: {
                allowAdding: true,
                allowEditing: true,
                allowDeleting: true,
                mode: 'Cell',
                newRowPosition: 'Below'
 
            },
            toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
            columns: [
                {
                    field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',
                    validationRules: { required: true, number: true }, width: 90
                },
                { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 220, validationRules: { required: true } },
                {
                    field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 130, editType: 'datepickeredit',
                    format: 'yMd', validationRules: { date: true }
                },
                {
                    field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 100, editType: 'numericedit',
                    validationRules: { number: true, min: 0 }, edit: { params: { format: 'n' } }
                }
            ]
        });
    treegrid.appendTo('#Grid');
 
    let dropDownColumns: DropDownList = new DropDownList({
        dataSource: [{ id: 'Top', name: 'Top' }, { id: 'Child', name: 'Child' }, { id: 'Below', name: 'Below' }],
        fields: { text: 'name', value: 'id' },
        value: 'Below',
        width: 100,
        change: (e: ChangeEventArgs) => {
            var mode = e.value;
            treegrid.editSettings.newRowPosition = mode;
 
        }
    });
    dropDownColumns.appendTo('#AddRowPosition');

MVC

@Html.EJS().DropDownList("NewRowPosition").DataSource((IEnumerable<object>)ViewBag.DropDownData).Width("120").Value("Top").Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "name", Value = "id" }).Change("change").Render()
 
@(Html.EJS().TreeGrid("TreeGrid").Height(270).ChildMapping("Children").TreeColumnIndex(1)
        .DataSource((IEnumerable<object>)ViewBag.DataSource)
        .EditSettings(edit => edit.AllowAdding(true).AllowDeleting(true).AllowEditing(true).Mode(Syncfusion.EJ2.TreeGrid.EditMode.Row))
        .Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })
        .Columns(col =>
        {
            col.Field("taskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
            col.Field("taskName").HeaderText("Task Name").Width(180).Add();
            col.Field("startDate").HeaderText("StartDate").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
            col.Field("duration").HeaderText("Duration").Width(80).TextAlign(TextAlign.Right).Add();
        }).Render())

CORE

<ejs-dropdownlist id="NewRowposition" dataSource="@ViewBag.DropDownData" width="120" value="@("Top")" change="change">
    <e-dropdownlist-fields text="name" value="id"></e-dropdownlist-fields>
</ejs-dropdownlist>
 
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" idMapping="TaskId" parentIdMapping='ParentId' allowPaging="true" enableCollapseAll="false" treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Edit","Delete", "Update", "Cancel" })">
    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Row"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="taskId" headerText="TaskId" width="95" isPrimaryKey="true" isIdentity="true" visible="false"></e-treegrid-column>
        <e-treegrid-column field="taskName" headerText="TaskName" width="95"></e-treegrid-column>
        <e-treegrid-column field="startDate" headerText="Start Date" textAlign="Right" headerTemplate="#dateTemplate" format="yMd"></e-treegrid-column>
        <e-treegrid-column field="duration" headerText="Duration" width="80"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

Javascript

<script>
    function change(e) {  //triggers when changing the newrowposition from dropdown
        var mode = e.value;
        var treegridinstance = document.getElementsByClassName("e-treegrid")[0].ej2_instances[0]  //take treegrid instance here
        treegridinstance.editSettings.newRowPosition = mode;  //set the newrowposition to treegrid from the selected list here
    }
</script>

[Controller]
public IActionResult Index()
        {
            var data = TreeGridItems.GetSelfData();
            ViewBag.DataSource = data.Cast<object>().ToArray();
            List<Object> DropDownData = new List<object>();    //define dropdown data here
            DropDownData.Add(new { id = "Top", name = "Top" });
            DropDownData.Add(new { id = "Child", name = "Child" });
            DropDownData.Add(new { id = "Above", name = "Above" });
            DropDownData.Add(new { id = "Below", name = "Below" });
            ViewBag.DropDownData = DropDownData;
            return View();
        }

how to add records conditionally by default