How to use Multi Select DropDown Column in Tree Grid?

2 mins read

This Knowledge base explains how to use Multi Select DropDown in Tree Grid.

Solution

In certain cases, you may like to set the column edit type of Tree Grid as Multi Select DropDown. You can achieve this by using the EditTemplate feature of the Tree Grid columns. The EditTemplate is used to display a custom editor (any other control) for a column.

let treegrid: TreeGrid = new TreeGrid(
  {
    dataSource: sampleData,
    editSettings: {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      mode: 'Row',
      newRowPosition: 'Below'
    },
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    columns: [
      {
        field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',
        validationRules: { required: true, number: true }, width: 80
      },
      {
        field: 'taskName', headerText: 'Task Name',
        edit:
        {
          create: function () {
            elem = document.createElement("input");
            return elem;
          },
          read: () => {
            return multiSelectObj.value;
          },
          destroy: () => {
            multiSelectObj.destroy();
          },
          write: args => {
            multiSelectObj = new MultiSelect({
              dataSource: <{ key: string, value: any }[]>treegrid.grid.dataSource,
              fields: { value: 'taskName' },
              value: Array.isArray(args.rowData["taskName"]) ? args.rowData["taskName"] : [args.rowData["taskName"]],
            });
            multiSelectObj.appendTo(elem);
          }
        },
        width: 200
      },
      { field: 'priority', headerText: 'Priority', width: 90 }
    ]
  });
treegrid.appendTo('#TreeGrid');

MVC

        @(Html.EJS().TreeGrid("TreeGrid")
            .DataSource((IEnumerable<object>)ViewBag.data)
            .EditSettings(edit => {
                edit.AllowAdding(true);
                edit.AllowDeleting(true);
                edit.AllowEditing(true);
                edit.Mode(Syncfusion.EJ2.TreeGrid.EditMode.Row);
                edit.NewRowPosition(Syncfusion.EJ2.TreeGrid.RowPosition.Below);
            })
            .Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })
            .Columns(col =>
            {
                col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(120)
                    .ValidationRules(new { required = true, number = true })
                    .TextAlign(TextAlign.Right).Add();
                col.Field("TaskName").HeaderText("Task Name")
                    .Edit(new {
                        create = "create", 
                        read = "read",
                        write = "write",
                        destroy = "destroy"
                    })
                    .Width(230)
                    .ValidationRules(new { required = true }).Add();
                col.Field("Priority").HeaderText("Priority").Width("110")
                    .TextAlign(TextAlign.Right).Add();
 
            })
           .Height(400)
           .ChildMapping("Children")
           .TreeColumnIndex(1).Render());

[Controller]
        public IActionResult Index()
        {
            var treeData = TreeGridItems.GetTreeData().ToList();
            ViewBag.data = treeData;
            return View();
        }

CORE

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="Children" height="270" treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" })">
    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" newRowPosition="Below" mode="Row"></e-treegrid-editsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" validationRules="@(new { required = true, number = true })" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" validationRules="@(new { required = true })" editType="stringedit" width="190" edit="@(new { create = "create", read = "read", write = "write", destroy ="destroy" })">
        </e-treegrid-column>
        <e-treegrid-column field="Priority" headerText="Priority" width="90"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

Rendering Edit Template

In the create event of the editTemplate, the input element for the column is created.
In the write event of the editTemplate, the input text box created is converted to the Multi Select DropDownList control.
The DataSource to the Multi Select DropDownList control is obtained from the Grid DataSource and assigned to the control.
In the read event of the editTemplate, the selected values are obtained and saved accordingly in the Tree Grid.
In the destroy event of the editTemplate, the Multi Select DropDownList is being destroyed.

<script>
    var multiSelectObj, elem;
    function create(args) {
        elem = document.createElement('input');
        return elem;
    }
    function read(args) {
        return multiSelectObj.value;
    }
    function destroy(args) {
        return multiSelectObj.destroy();
    }
    function write(args) { 
        var treeGridObj = document.getElementById("TreeGrid").ej2_instances[0]; //Tree Grid Instance
        multiSelectObj = new ej.dropdowns.MultiSelect({
            dataSource: treeGridObj.grid.dataSource,
            fields: { value: 'TaskName' },
            value: Array.isArray(args.rowData["TaskName"]) ? args.rowData["TaskName"] : [args.rowData["TaskName"]],
        });
        multiSelectObj.appendTo(elem);
 
    }
</script>

Multi Select DropDown column in Tree Grid

Figure 1 Multi Select DropDown in Tree Grid

JavaScriptDemo

Also refer the other frameworks demo links below,

AngularDemo

ReactDemo

VueDemo

Did you find this information helpful?

Yes

Comments (0)

How to use Multi Select DropDown Column in Tree Grid?

Access denied