dynamic binding with table element

[former_member219850]

Hi All,

I am learning SAPUI5 development!!!..

I am traying to bind table element dynamically. As per SS2 data contains 21 deep values which I want to show in right bottom table element (SS4

). I have written below code in controller file.

	var otable = this.getView().byId("table");
			var model = new sap.ui.model.json.JSONModel();
			 model.setData(oCtx);
			// var spath = "/Availability/";
			var listItem =  this.getView().byId("listItem");
			 otable.bindItems(model,listItem);<br>

XML file nodes are as follows.

	<Table headerText="Products"  
										       items="{globalModel>/Material Data/Availability}" id = "table">
											<columns>
												<Column mergeDuplicates="true" id = "column1">
													<header>
														<Text text="Date"/>
													</header>
												</Column>
												<Column mergeDuplicates="true" id = "column2">
													<header>
														<Text text="Quantity"/>
													</header>
												</Column>
											</columns>
											<ColumnListItem vAlign="Middle" id= "listItem">
												<Text text="{globalModel>/Material Data/Availability/Date}"/>
												
												<Text text="{globalModel>/Material Data/Availability/Quantity}"/>
											
											</ColumnListItem>
										</Table><br>

Please suggest on this.

It is like a hurdle in my learning process.

thanks in advance.

thanks

Darshan.

[junwu · Accepted solution]

<Table headerText="Products"  
										       items="{globalModel>Availability}" id = "table">
											<columns>
												<Column mergeDuplicates="true" id = "column1">
													<header>
														<Text text="Date"/>
													</header>
												</Column>
												<Column mergeDuplicates="true" id = "column2">
													<header>
														<Text text="Quantity"/>
													</header>
												</Column>
											</columns>
											<ColumnListItem vAlign="Middle" id= "listItem">
												<Text text="{globalModel>Date}"/>
												
												<Text text="{globalModel>Quantity}"/>
											
											</ColumnListItem>
										</Table>

once you select a row in the left table, get the binding context and set it to the table in the right

var otable = this.getView().byId("table");
otable.setBindingContext(BINDINDCONTEXTOFTABLEFROMLEFT)

[former_member219850 · Accepted solution]

Hi Jun,

Thank you for your reply. Hope you are doing well!!..

I have written below code, but still not able to display data in table.

Two columns (Date & Quantity) are supposed to be displayed in right bottom table.

var table = oEvent.getSource();
			
			var oCtx = table.getBindingContext("globalModel").getObject();
			var name = oCtx["Material Name"];
			var oHeader = this.getView().byId("Header");
			oHeader.setTitle(name);
			var num = oCtx["Material Num"];
			oHeader.setNumber(num);
			var ostatus1 = this.getView().byId("status1");
			var vstatus1 = oCtx["Material Supplier"];
			ostatus1.setText(vstatus1);
			
			var ostatus2 = this.getView().byId("status2");
			var vstatus2 = oCtx["Material Group"];
			ostatus2.setText(vstatus2);
			
			var model = new sap.ui.model.json.JSONModel();
			 model.setData(oCtx);
			var otable = this.getView().byId("table");
			otable.setBindingContext(model,"/Availability/");

Thanks,

Darshan

[junwu · Accepted solution]

just do what I said.

[former_member219850 · Accepted solution]

Hi Jun,

Thank you for your guidance, but still not able to bind. I am doing same thing which you have suggested.

Please have a look at the xml also.

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:viz="sap.viz.ui5.controls"
	controllerName="sampleCoreElements.sampleCoreElements.controller.materialInspection" xmlns:html="http://www.w3.org/1999/xhtml">
	<App>
		<pages>
			<Page title="Title">
				<content>
					<l:ResponsiveSplitter defaultPane="default">
						<l:PaneContainer>
							<l:SplitPane requiredParentWidth="400">
								<l:layoutData>
									<l:SplitterLayoutData size="{sizes>/pane1}"/>
								</l:layoutData>
								<Panel headerText="List of materials" height="100%">
									<SearchField width="100%"/>
									<List items="{globalModel>/Material Data/}" headerText="Products">
										<ObjectListItem id= "list" 
														title="{globalModel>Material Name}" 
										               type="Active" 
										               press="onListItemPress"
										               number="{globalModel>Material Num}"
													    numberUnit="{globalModel>Availability/0/Quantity}">
											<firstStatus>
												<ObjectStatus text="{Status}"/>
											</firstStatus>
											<ObjectAttribute text="{globalModel>Material Type}"/>
											<ObjectAttribute text="{globalModel>Material Supplier}"/>
										</ObjectListItem>
									</List>
								</Panel>
							</l:SplitPane>
							<l:PaneContainer orientation="Vertical">
								<l:SplitPane requiredParentWidth="400">
									<l:layoutData>
										<l:SplitterLayoutData size="{sizes>/pane1}"/>
									</l:layoutData>
									<Panel headerText="Minimum parent width 500" height="100%">
										<ObjectHeader binding="{globalModel>/Material Data/}" attributes="{globalModel>/Material Data/}"
											title="{globalModel>/Material Data/Material Name}" number="{globalModel>/Material Data/Material Num}" numberUnit="{Material Num}"
											class="sapUiResponsivePadding--header" id="Header">
											<statuses>
												<ObjectStatus text="" state="Error" id="status1"/>
												<ObjectStatus text="" state="Success" id="status2"/>
											</statuses>
											<ObjectAttribute text="{globalModel>/Material Type}"/>
										</ObjectHeader>
										<Table headerText="Products"  
										       items="{/Availability}" id = "table">
											<columns>
												<Column mergeDuplicates="true" id = "column1">
													<header>
														<Text text="Date"/>
													</header>
												</Column>
												<Column mergeDuplicates="true" id = "column2">
													<header>
														<Text text="Quantity"/>
													</header>
												</Column>
											</columns>
											<ColumnListItem id= "listItem">
												
												<Text text="{Date}"/>
												
												<Text text="{Quantity}"/>
											
											</ColumnListItem>
										</Table>
									</Panel>
								</l:SplitPane>
							</l:PaneContainer>
						</l:PaneContainer>
					</l:ResponsiveSplitter>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

[junwu · Accepted solution]

small correction: binding context of the row you clicked at the left, not bindingcontext of the left table

second, binding context only , not get object from the binding context

[former_member219850 · Accepted solution]

Hi Jun,

Thank you for your time!!!..

Please find below code of controller file. please check below as I am still not able to display the rows.

	var olist = oEvent.getSource().bindContext("list");
			
			var otable = this.getView().byId("listItem");
			otable.setBindingContext(olist,"/Availability"); <br>

Also each left side material contains 21 more data rows which I wish to show at bottom right table.

Left side grid is made up of object list header and right bottom grid is column list item.

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:viz="sap.viz.ui5.controls"
	controllerName="sampleCoreElements.sampleCoreElements.controller.materialInspection" xmlns:html="http://www.w3.org/1999/xhtml">
	<App>
		<pages>
			<Page title="Title">
				<content>
					<l:ResponsiveSplitter defaultPane="default">
						<l:PaneContainer>
							<l:SplitPane requiredParentWidth="400">
								<l:layoutData>
									<l:SplitterLayoutData size="{sizes>/pane1}"/>
								</l:layoutData>
								<Panel headerText="List of materials" height="100%">
									<SearchField width="100%"/>
									<List items="{globalModel>/Material Data/}" headerText="Products">
										<ObjectListItem id= "list" 
														title="{globalModel>Material Name}" 
										               type="Active" 
										               press="onListItemPress"
										               number="{globalModel>Material Num}"
													    numberUnit="{globalModel>Availability/0/Quantity}">
											<firstStatus>
												<ObjectStatus text="{Status}"/>
											</firstStatus>
											<ObjectAttribute text="{globalModel>Material Type}"/>
											<ObjectAttribute text="{globalModel>Material Supplier}"/>
										</ObjectListItem>
									</List>
								</Panel>
							</l:SplitPane>
							<l:PaneContainer orientation="Vertical">
								<l:SplitPane requiredParentWidth="400">
									<l:layoutData>
										<l:SplitterLayoutData size="{sizes>/pane1}"/>
									</l:layoutData>
									<Panel headerText="Minimum parent width 500" height="100%">
										<ObjectHeader binding="{globalModel>/Material Data/}" attributes="{globalModel>/Material Data/}"
											title="{globalModel>/Material Data/Material Name}" number="{globalModel>/Material Data/Material Num}" numberUnit="{Material Num}"
											class="sapUiResponsivePadding--header" id="Header">
											<statuses>
												<ObjectStatus text="" state="Error" id="status1"/>
												<ObjectStatus text="" state="Success" id="status2"/>
											</statuses>
											<ObjectAttribute text="{globalModel>/Material Type}"/>
										</ObjectHeader>
										<Table headerText="Products"  
										       items="{/Availability}" id = "table">
											<columns>
												<Column mergeDuplicates="true" id = "column1">
													<header>
														<Text text="Date"/>
													</header>
												</Column>
												<Column mergeDuplicates="true" id = "column2">
													<header>
														<Text text="Quantity"/>
													</header>
												</Column>
											</columns>
											<ColumnListItem id= "listItem">
												
												<Text text="{Date}"/>
												
												<Text text="{Quantity}"/>
											
											</ColumnListItem>
										</Table>
									</Panel>
								</l:SplitPane>
							</l:PaneContainer>
						</l:PaneContainer>
					</l:ResponsiveSplitter>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

Thanks,
Darshan

[junwu · Accepted solution]

var olist = oEvent.getSource().getBindingContext("globalModel");
			
			var otable = this.getView().byId("listItem");
			otable.setBindingContext(olist,"globalModel"); 

[former_member219850 · Accepted solution]

Hi Jun,

It is not working.

Is it not working because left and right elements are not identical??.

Thanks,
Darshan

[junwu · Accepted solution]

dude make sure you get binding context of the row clicked.

second, make sure globalmodel also available to the right side table

[junwu · Accepted solution]

make sure you also updated your xml code for the table in the right.

[former_member219850 · Accepted solution]

can you please tell what I need to update in right table??

[junwu · Accepted solution]

I posted the xml view for that table. don't u see it?

[former_member219850 · Accepted solution]

Thanks for your guidance Jun!!.. your suggestion worked..