How to bind the OData Model dynamically in sap.ui.table?

[Jayakrishnan]

Hi All,

I am working on Custom SAPUi5 Development.In my application scenario i have two ui table. (both are sap.ui.table - grid table). Based on the first table selection i need to load the second table. (Header-Item). In OData i did association-navigation between the EntitySets.

How to load the details in the second table dynamically. I fit is sap.m.table i can do via aggregations. but in sap.ui.table i dont know how to load the collection in run time dynamically

Please help me to find the solution for this.

Thank you,

Regards,

JK..

[maheshpalavalli · Accepted solution]

Hi Jayakrishnan Chandramohan,

It has rows aggregation just bind the second entity there. On the selection of the first table, do the element binding for that first table key to the second table (bindElement) then in the rows aggregation, use the navigation property name without "/" this will trigger the request to the backend only when you apply the bindElement on the second table and request will go to fetch the navigation (second entity) data.

Thanks,
Mahesh

[Jayakrishnan · Accepted solution]

Hey Mahesh, Thanks for reply. Do you have any link or reference. i am trying that , but not able to get it.

[maheshpalavalli · Accepted solution]

jayakrishnan.chnadramohan this is an example using m.table you can do the same using ui.table aswell

https://next.plnkr.co/edit/jj0pFYL0AdPw71nR

Thanks,

Mahesh

[Jayakrishnan · Accepted solution]

In sap.m.table i did it many times. but in sap.ui.table, i just confused along bind columns and bindRows.

Code:

	oView = this.getView();
			oTable = this.getView()
				.byId("id_group_table");
			


			var columnName = [{
				columnName: "GroupId"
			}, {
				columnName: "Description"
			}];
			var rowData = [{
				GroupId: "Group_01",
				Description: "desc1"


			}, {
				GroupId: "Group_02",
				Description: "desc2"


			}, {
				GroupId: "Group_03",
				Description: "desc3"


			}];
			oModel = new sap.ui.model.json.JSONModel();
			oModel.setData({
				rows: rowData,
				columns: columnName
			});
			oTable.setModel(oModel);


			oTable.bindColumns("/columns", function (sId, oContext) {
				columnName = oContext.getObject()
					.columnName;
				return new sap.ui.table.Column({


					label: columnName,
					template: columnName


				});
			});
			oTable.bindRows("/rows");

i able to bind the data in sap.ui.table with above example.But in case of OData-Consumption how to do?

i have a named model. So where i need to mention my EntitySet name?

is it work?

	oView = this.getView();
			oTable = this.getView()
				.byId("id_group_table");
			//oModel = oView.getModel("elan");


			


			oTable.bindColumns("model>/EntitySet", function (sId, oContext) {
				columnName = oContext.getObject()
					.columnName;
				return new sap.ui.table.Column({


					label: columnName,
					template: columnName


				});
			});
			oTable.bindRows("model>/EntitySet");

Thanks.

[Jayakrishnan · Accepted solution]

Thanks Mahesh, It works. i followed the Punker example.

But i have another doubt. Usually i manually design the Columnist/Columns in the controller. which one is the recommended way to form the table.

1.In my approach i see more no of lines included in the controller. but where as if we bind the path using bindElement, all the code in the controller will be reduced. Is this only advantage?

[maheshpalavalli · Accepted solution]

Welcome Jayakrishnan Chandramohan,

Kind of true, but the idea is that we are using the "navigation property" in the second table and when do the bind element to the second table, it automatically sends the request and fetches the data. i would say use the bind element and navigation property which is the best and easy approach.

BTW just curious about your another issue, did the auto scroll worked? I even pasted a dummy code..

Thanks,
Mahesh

[Jayakrishnan · Accepted solution]

auto scroll? between two tables? No.

[maheshpalavalli · Accepted solution]

Jayakrishnan Chandramohan No your other question about focus in sematic page.

[Jayakrishnan · Accepted solution]

Oh ok, for that i found it bit difficult to apply scroll. i tried some option but it doesn't worked out. So i changed the design little bit.

Instead of semantic page, i tried with Object Page layout. i added the ui elements into two sections. then i handled the scroll via section change.

Thanks,

JK.