Dropdown on row and color code column in Tree grid

[Mahesh Machina]

Hi Team,

We want to add dropdown and a button on every row in a tree grid

Color code column based on its value

Expand row to see more details of that row like Accordion

is it possible?

Attachment: Tree_Grid_29b2ec48.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Mahesh Machina,

Query#:- Show Description of the Task here in subtasks and it shows only on Expanding:-

From your query we suspect that you need to render all records(i.e parent records) in collapsed state on rendering of TreeGrid rows. To achieve this, we suggest to use EnableCollapseAll property of the TreeGrid.

Refer to the code below:-

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" enableCollapseAll="true" allowPaging="true" childMapping="Children" treeColumnIndex="1">

    <e-treegrid-pagesettings pageSize="7"></e-treegrid-pagesettings>

    <e-treegrid-columns>

        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>

        .   .    .

    </e-treegrid-columns>

</ejs-treegrid>

Refer to the API Link:-

https://ej2.syncfusion.com/documentation/api/treegrid/#enablecollapseall

Also we have discussed the same in our Syncfusion Knowledge Base. Refer to the below Link:-

https://www.syncfusion.com/kb/7871/how-to-render-treegrid-rows-in-collapsed-state

If your requirement is different from above, share detailed Explanation of your requirement to proceed further.

Query#:- Can we have button and Dropdown on each row:-

We have achieved your requirement using Template column feature of the TreeGrid. We have rendered the Dropdownlist and Button components using queryCellInfo event of the TreeGrid.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data"  queryCellInfo="dropdown" enableCollapseAll="true" allowPaging="true" childMapping="Children" treeColumnIndex="1">

    <e-treegrid-pagesettings pageSize="7"></e-treegrid-pagesettings>

    <e-treegrid-columns>

        <e-treegrid-column field="TaskId" headerText="Task ID" template="#template1" textAlign="Right" width="90"></e-treegrid-column>

        <e-treegrid-column field="TaskName" template="#dropdown" headerText="Task Name" width="180"></e-treegrid-column>

       .    .   .

    </e-treegrid-columns>

</ejs-treegrid>

 

 

<div id='dropdown'> 

  // initializing with unique id. TaskId is a column name 

    <input id="dropdownlist ${ TaskId }"> 

</div> 

 

<script id="template1" type="text/x-template">

    <button class="custom-button" onclick="buttonClick(event)">Button </button>

</script>

 

<script>

  

    function dropdown(args) {

        var ele = args.cell.querySelector("#dropdown" + args.data["TaskId"]);

        var drop = new ej.dropdowns.DropdownList({

            dataSource: sportsData,

            fields: { value: 'Game' },

            placeholder: "Choose data type"

        });

        drop.appendTo(ele);

    }

 

  

</script>

Documentation and Demo links:-

https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/columns-core#column-template

https://ej2.syncfusion.com/aspnetcore/TreeGrid/ColumnTemplate#/bootstrap5

Please get back to us if you need any further assistance.

Regards,

Farveen sulthana T

[Mahesh Machina]

enableCollapseAll will not solve our use case. There is no parent-child relationship here.

we want to display on of the column Task description value when row expanded --> below that row in text area/accordion content kind of control.

we want filter,sort,delete and some custom events otherwise we could have used Accordion control.

Please let us know if you have a way to sort,filter accordion?

[Farveen Sulthana Thameeztheen Basha]

Hi Mahesh Machina,

Query#:- we want to display on of the column Task description value when row expanded --> below that row in text area/accordion content kind of control.

From your query we suspect that you doesn’t have maintained any parent-child relationship in your component. So please confirm that you have used any childMapping, IdMapping, ParentIdMapping has been maintained in your DataSource structure(TreeGrid structure).

If you doesn’t maintain any parent-child relationship you can use Grid component to achieve this requirement.  Refer to the documentation links:-

https://ej2.syncfusion.com/aspnetcore/documentation/grid/row/detail-template?cs-save-lang=1&cs-lang=razor

https://ej2.syncfusion.com/aspnetcore/Grid/DetailTemplate#/bootstrap5

Based on your confirmation we will assist you further.

Regards,

Farveen sulthana T