- Home
- Forum
- ASP.NET Core - EJ 2
- How to expand to certain level after data loaded
How to expand to certain level after data loaded
Hi Syncfusion team,
How to expand the treegrid to level 2 or certain level after the datasource is loaded?
<script>
var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
treegrid.dataSource = json;
</script>
Regards,
Kuan Long
Hi Kuan Long,
Query#:- How to expand the treegrid to level 2 or certain level after the datasource is loaded?
We have achieved this requirement using dataBound event of the TreeGrid. At initial load, we have expand the specific level (i.e level2) parent records using expandAtLevel(2) method.
Refer to the code below:-
|
@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource) .DataBound("dataBound").Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" }) .Columns(col => { col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(70) .ValidationRules(new { required = true, number = true }) .TextAlign(TextAlign.Right).Add(); . . . }).Height(400).ChildMapping("Children").TreeColumnIndex(1).Render() ) <script> function dataBound(args) { this.expandAtLevel(2); //expand the 2nd level }
</script> |
API link:- https://ej2.syncfusion.com/documentation/api/treegrid/#expandatlevel
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
Hi Farveen Sulthana T,
Thanks for your reply. After I added ondatabound, the child cannot expand. Does my code apply correctly?
Code:
<ejs-treegrid id="TreeGrid" toolbar="@(new List<string>() { "Search", "ExpandAll", "CollapseAll" })" childMapping="children"
treeColumnIndex="0" autoCheckHierarchy="true" allowPaging="true" dataBound="ondataBound">
<e-treegrid-pagesettings pageSize="10" pageSizes="@(new string[] { "10", "20", "50", "100" })" pageCount="4"></e-treegrid-pagesettings>
<e-treegrid-columns>
<e-treegrid-column headerText="Title" field="title"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
var TreeGrid = document.getElementById("TreeGrid").ej2_instances[0];
TreeGrid.dataSource = [
{
"id": "1910af5a-add1-4997-8199-3836d5afb6d7",
"title": "CHAPTER 1K : INITIAL PROVISIONS AND GENERAL DEFINITIONS",
"children": [
{
"id": "b4d5f54d-f9ee-44f5-b996-90de2c617960",
"title": "Article 1.1 : Establishment of the Regional Comprehensive",
"children": []
},
{
"id": "fa79a073-bb35-4799-a222-c1625212b608",
"title": "Article 1.2 : General DefinitionsK",
"children": [
{
"id": "",
"title": "Clause(s)",
"children": [
{
"id": "",
"title": "K FFor the purposes of this Agreement, unless otherwise provided in this Agreement:",
},
{
"id": "",
"title": "(a)K AD Agreement means the Agreement on Implementation of Article VI of the General Agreement on Tariffs and Trade 1994 in Annex 1A to the WTO Agreement;",
},
{
"id": "",
"title": "(b) Agreement means the Regional Comprehensive Economic Partnership Agreement;123",
},
{
"id": "",
"title": "(c) Agreement on Agriculture means the Agreement on Agriculture in Annex 1A to the WTO Agreement;",
}
]
}
]
},
{
"id": "",
"title": "Article 1.3 : ObjectivesK",
"children": [
{
"id": "",
"title": "Clause(s)",
"children": [
{
"id": "",
"title": "The objectives of this Agreement are to:",
},
{
"id": "",
"title": "(a) establish a modern, comprehensive, high-quality, and mutually beneficial economic partnership framework to facilitate the expansion of regional trade and investment and contribute to global economic growth and development, taking into account the stage of development and economic needs of the Parties especially of Least Developed Country Parties;",
},
{
"id": "",
"title": "(b) progressively liberalise and facilitate trade in goods among the Parties through, inter alia, progressive elimination of tariff and non-tariff barriers on substantially all trade in goods among the Parties;",
}
]
}
]
}
]
}
];
function ondataBound() {
var TreeGrid = document.getElementById("TreeGrid").ej2_instances[0];
if(TreeGrid.dataSource.length > 0){
TreeGrid.collapseAtLevel(1);
}
}
</script>
Regards,
Kuan Long
Hi Kuan Long,
Query#:- After I added ondatabound, the child cannot expand. Does my code apply correctly?
We are able to replicate the scenario from your provided details. From your query we understood that you need to Collapse the TreeGrid rows at specific level on Initial Render alone. To achieve this we suggest you to render the rows based on this condition(this.InitialRender), at dataBound event, so that you can expand and collapse manually after that.
Refer to the code below:-
|
Index.cshtml:-
<ejs-treegrid id="TreeGrid" allowPaging="true" childMapping="children" treeColumnIndex="0" autoCheckHierarchy="true" dataBound="ondataBound" load="load"> <e-treegrid-pagesettings pageSize="7"></e-treegrid-pagesettings>
<e-treegrid-columns>
<e-treegrid-column headerText="Title" field="title"></e-treegrid-column>
</e-treegrid-columns> </ejs-treegrid>
<script>
function ondataBound() {
if (this.initialRender) { //based on condition only at initial render
TreeGrid.collapseAtLevel(1);
}
} </script> |
Sample Link:- https://www.syncfusion.com/downloads/support/forum/175135/ze/coresample1649720419.zip
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
Hi Farveen sulthana,
It works perfectly. Thanks.
Regards,
Kuan Long
Hi Kuan Long,
Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you.
Regards,
Farveen sulthana T
- 5 Replies
- 2 Participants
-
KL Kuan Long Khiu
- May 20, 2022 04:19 AM UTC
- May 26, 2022 11:39 AM UTC
