Dynamic accordion with nested TreeGrid

[Georg Thomas]

Hello,

I am wondering if it's possible to dynamically create an Accordion with a TreeGrid in each accordion?

I am able to create the accordion (from Datasource) and the TreeGrid both independently, but not sure how to combine. All the examples look like the Accordion is fixed when a control is used within.

Thanks in advance.

[Balasubramanian Sattanathan]

Hi Georg Thomas, 

 

Greetings from Syncfusion Support. 

We have validated your “Dynamic accordion with nested TreeGrid” requirement at our side and prepared an MVC project based on that using below code snippets. 

<div style="display: none"> 

    @(Html.EJS().TreeView("childNested1") 

        .Fields(field => field.Id("id") 

            .ParentID("pid") 

            .Selected("selected") 

            .Expanded("expanded") 

            .Text("name") 

            .HasChildren("hasChild") 

            .DataSource(ViewBag.dataSource) 

        ) 

        .Render() 

    ) 

</div> 

 

<div id='element'></div> 

 

<script> 

    var itemsData = []; 

    var mapping = { header: 'FirstName', content: 'Notes' }; 

    var treeView = { header: "Videos", content: "#childNested1" }; 

 

    const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees'; 

 

    new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor }) 

        .executeQuery(new ej.data.Query().range(4, 7)).then(function (e) { 

 

            var result = e.result; 

 

            for (var i = 0; i < result.length; i++) { 

                itemsData.push({ header: result[i][mapping.header], content: result[i][mapping.content] }); 

            } 

            itemsData.push(treeView); 

            //Initialize Accordion component 

            var accordion = new ej.navigations.Accordion({ 

                items: itemsData 

            }); 

 

            //Render initialized Accordion component 

            accordion.appendTo('#element'); 

        }); 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/153718/ze/mvc_accordion_sample-523682790.zip 

UG: https://ej2.syncfusion.com/aspnetmvc/documentation/accordion/how-to/load-accordion-with-data-source/ 

Kindly try the above links and let us know if you need further assistance. 

Regards, 

Balasubramanian S

[Georg Thomas]

Thank you very much. THis works well for creating the accordion and putting on treeview in. Is it possible to put a treeview in each accordion (from datasource) opposed to hard coding the child control?

[Balasubramanian Sattanathan]

Hi Georg Thomas, 

Thanks for the update. 

 

We have validated your requirement “Is it possible to put a treeview in each accordion (from datasource)” at our side and prepared a sample based on that using below code snippet. In the below sample, the treeview(from dataSource) will be added for each accordion in an Expanding event. 

index.cshtml: 

@(Html.EJS().Accordion("rtlAccordion").Items(ViewBag.rtlItems).Expanding("onExpanding").Render()) 

 

<script type="text/javascript"> 

    var DocDB = [ 

        { 

            nodeId: '03', nodeText: 'Documents', icon: 'folder', 

            nodeChild: [ 

                { nodeId: '03-01', nodeText: 'Environment Pollution.docx', icon: 'docx' }, 

                { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx', icon: 'docx' }, 

                { nodeId: '03-03', nodeText: 'Global Warming.ppt', icon: 'ppt' }, 

                { nodeId: '03-04', nodeText: 'Social Network.pdf', icon: 'pdf' }, 

                { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf', icon: 'pdf' }, 

            ] 

        }, 

    ] 

 

    function onExpanding(e) { 

        let treeObj = new ej.navigations.TreeView({ 

            fields: { dataSource: DocDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' }, 

            sortOrder: 'Ascending' 

        }); 

        if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 0 && e.element.querySelector('#tree1').childElementCount === 0) { 

            treeObj.appendTo('#tree1'); 

        } 

        if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 1 && e.element.querySelector('#tree2').childElementCount === 0) { 

            treeObj.appendTo('#tree2'); 

        } 

        if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 2 && e.element.querySelector('#tree3').childElementCount === 0) { 

            treeObj.appendTo('#tree3'); 

        } 

    } 

</script> 

HomeController.cs: 

List<AccordionAccordionItem> rtlItems = new List<AccordionAccordionItem>(); 

rtlItems.Add(new AccordionAccordionItem { Header = "Tree1", Expanded = true, Content = "<div id='tree1'></div>" }); 

rtlItems.Add(new AccordionAccordionItem { Header = "Tree2", Expanded = true, Content = "<div id='tree2'></div>" }); 

rtlItems.Add(new AccordionAccordionItem { Header = "Tree3", Expanded = true, Content = "<div id='tree3'></div>" }); 

ViewBag.rtlItems = rtlItems; 

return View(); 

 

Sample: https://www.syncfusion.com/downloads/support/forum/153718/ze/mvc_accordion_sample1079938480.zip 

UG: https://ej2.syncfusion.com/javascript/documentation/accordion/how-to/integrate-treeview-inside-the-accordion/?no-cache=1 

 

Kindly try the above sample and let us know if you need further assistance. 

 

Regards, 

Balasubramanian S