UI5- Tree Table

lightUI5- Tree Table

 

 


Create a UI5 project.

Step1- Create a table with two columns and fill the 4 rows.

12


3


Let’s add two ┬ámore columns and create a tree hierarchy for the first row. The first row has now 2 sub items.

4


The tree is expanded , it can be compressed.

5


6


Create 2 sub items for each main item(main row).

7


8


The tree expand is true. Make it false and test.

9


Tree table displayed with compressed mode.

10

Expand any one row.

11


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”);


 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s