UI5- Tree Table
Create a UI5 project.
Step1- Create a table with two columns and fill the 4 rows.
Let’s add two more columns and create a tree hierarchy for the first row. The first row has now 2 sub items.
The tree is expanded , it can be compressed.
Create 2 sub items for each main item(main row).
The tree expand is true. Make it false and test.
Tree table displayed with compressed mode.
Expand any one row.
Code Snippet:
oTableData = {
root:{ branch: “br”, details: “br details”,
0: { branch: “Mech”, details: “Mechanical Engg”,
0: {subject: “Dynamics”, grade: “3”},
1: {subject: “Hydraulics”, grade: “4”}
},
1: { branch: “Elec”, details: “Electrical Engg”,
0: {subject: “Circuit Theory”, grade: “4”},
1: {subject: “Elec Motors”, grade: “4”}
},
2: { branch: “Ece”, details: “Electronics Engg”,
0: {subject: “Analog Electronics”, grade: “4”},
1: {subject: “Digital Electronics”, grade: “3”}
},
3: { branch: “Cse”, details: “Comptuer Sc Engg”,
0: {subject: “C Programming”, grade: “3”},
1: {subject: “C++ Programming”, grade: “4”}
}
}
};
oTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({label: “Branch”, template: “branch”}),
new sap.ui.table.Column({label: “Subject”, template: “subject”}),
new sap.ui.table.Column({label: “Details”, template: “details”}),
new sap.ui.table.Column({label: “Grade”, template: “grade”})
],
selectionMode: sap.ui.table.SelectionMode.Single,
expandFirstLevel: false, //true,
});
oModel= new sap.ui.model.json.JSONModel();
oModel.setData(oTableData);
oTable.setModel(oModel);
oTable.bindRows(“/root”);
oTable.placeAt(“content”);
SAPCODES 