TreeView in a grid cell

[Lev Kadisov]

Hi,
I have a editable TreeGrid version 14.2.0.26.
I want to show TreeView in the grid cell when I editing the cell.
Is it possibile?
thanks

I try next code without errors, but it show nothing when I editing the cell:

        @(Html.EJ().Grid<object>("Editing")
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("TagUpdate").InsertURL("TagInsert").RemoveURL("TagDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))
        .AllowFiltering()
        .ToolbarSettings(toolbar =>
        {
            toolbar.ShowToolbar().ToolbarItems(items =>
            {
                items.AddTool(ToolBarItems.Add);
                items.AddTool(ToolBarItems.Edit);
                items.AddTool(ToolBarItems.Delete);
                items.AddTool(ToolBarItems.Update);
                items.AddTool(ToolBarItems.Cancel);
            });
        })
        .Columns(col =>
        {
            col.Field("Id").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();
            col.Field("Name").HeaderText("Name").Width(180).ValidationRules(v => v.AddRule("minlength", 3)).Add();
 col.Field("IdObject").HeaderText("Object").Width(90).ClipMode(ClipMode.EllipsisWithTooltip).ForeignKeyField("Id").ForeignKeyValue("Name").DataSource((IEnumerable<EditableObject>)ViewBag.objects).EditTemplate(a => { a.Create("createTV").Write("writeTV").Read("readTV"); }).Add();
        })
        )

JavaScript
    <script type="text/javascript">
        var objectData = @Html.Raw(Json.Encode(ViewBag.objects));

        function createTV(args) {
            return "<input>";
        }
        function readTV(args) {
            var selected = args.ejTreeView("getSelectedNodeIndex");
            if(selected < objectData.length)
                return objectData[selected].Id;
            return null;
        }
        function writeTV(args) {
            var selIndex = [];
            if (args.rowdata != undefined && args.rowdata["IdObject"] != null)
            {
                    for (j = 0; j < objectData.length; j++) {
                        if (args.rowdata["IdObject"] == objectData[j].Id) {
                            selIndex.push(j);
                            break;
                        }
                    }
            }
            args.element.ejTreeView({
                  //width: "100%",
                  fields: { dataSource: objectData, id: "Id", parentId: "IdParent", text: "Name" },
                  enableMultipleExpand: false,
                  expandedNodes: selIndex,
                  selectedNode: selIndex[0]
            });
        }
    </script>


Lev Kadisov

63

[Mohammed Farook J]

Hi Lev Kadisov, 

Thanks for using Syncfusion products. 

we have analyzed your provide code and requirement . we cannot possible to use "ejTreeView" at editing time. please find the reasons are: 

  

1.   "ejTreeView " can render through "div" element not input element.  Please find the valid HTML form elements are : 

•               input,
•              select,
•              textarea,
•               label,
•              options,

  

2. if you using ejTreeview we cannot apply any validation. 

Regards, 

J.Mohammed Farook