We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

TreeView in a grid cell

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

1 Reply

MF Mohammed Farook J Syncfusion Team August 15, 2016 08:13 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon