Skip to Content
0
Sep 19, 2019 at 09:00 AM

Table Selection is not working Inside TabContainer?

286 Views Last edit Sep 19, 2019 at 09:02 AM 2 rev

Hi Everyone,

I am working on SAPUI5 Application development. I am using MultiInstance(Tab Container) in my application. In my first view i have a sap.ui.table with selection. if user select single item from the table,it should open the Tab container. Inside the TabContainer i should have selected table item(another table).

For each table selected,i associated with two other collections(via association and navigation in OData). So in my TabContainer, in each tab i have a name and associated collections in grid table. it is also a table with selection.

But the selection property for the item table not working. I followed the below question,

SCN Question regarding it: Quetion


"It looks like the option to set or edit the content inside the Tab container is affected by the items set to the container.

When, I tried the code, I found that table works with tab container BUT no items should be set to the container. Once items are set, the default behavior of table is lost."

I tried the same scenatio in sapui5 sample app by binding two diff collections.

//SAPUI5 Sample application: Application

link:

TabContainer

By Default, the above application loaded with below model,

var oModel = new JSONModel(sap.ui.require.toUrl("com/zcombo_box_test/localService/mockdata") + "/products.json");
this.oView.setModel(oModel);

i added new model for the table inside the tab container:

var oSalesOrderModel = new JSONModel(sap.ui.require.toUrl("com/zcombo_box_test/localService/mockdata") + "/SalesOrder.json");
this.oView.setModel(oSalesOrderModel, "salesorder");

TableController call Code :

TCController.prototype.openSelectedItems = function () {
			var oTabContainer, oTabContainerItemsTemplate,
				aFilters = [],
				aSelectedRows = this.oPageTable.getSelectedContexts();


			this.oNavCon.to(this.oPageTabContainer);


			aSelectedRows.forEach(function (oRow) {
				aFilters.push(new Filter("ProductId", FilterOperator.EQ, oRow.getProperty("ProductId")));
			});


			oTabContainerItemsTemplate = new TabContainerItem({
				name: "{Name}",
				content: [
					this._getFragment("Display")
				]
			});
			oTabContainer = new TabContainer({
				showAddNewButton: true,


				items: {
					path: '/ProductCollection',
					filters: aFilters,
					template: oTabContainerItemsTemplate
				}
			});


			this.oPageTabContainer.insertContent(oTabContainer);
		};

it will call the Display Fragment code:

Display.Fragment.xml:

<core:FragmentDefinition xmlns="sap.m" xmlns:ui="sap.ui.table" class="sapUiSizeCompact" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core">
	<l:VerticalLayout class="sapUiContentPadding">
		<Panel expanded="true" expandable="true">
			<headerToolbar>
				<OverflowToolbar height="3rem">
					<Title text="GroupElementList"/>
					<ToolbarSpacer/>
					<Button icon="sap-icon://add" press="onCreateGroupElementFragment"/>
					<Button icon="sap-icon://delete" press="onDeleteGroupElement"/>
				</OverflowToolbar>
			</headerToolbar>
			<content>
				<ui:Table rows="{salesorder>/SalesOrderCollection}" title="SalesOrderCollection" selectionMode="MultiToggle" visibleRowCount="7"
					paste="onPaste">
					<ui:columns>
						<ui:Column width="11rem">
							<Label text="SoId"/>
							<ui:template>
								<Text text="{salesorder>SoId}" wrapping="false"/>
							</ui:template>
						</ui:Column>
						<ui:Column width="11rem">
							<Label text="CreatedByBp"/>
							<ui:template>
								<Input value="{salesorder>CreatedByBp}"/>
							</ui:template>
						</ui:Column>
						<ui:Column width="6rem" hAlign="End">
							<Label text="ChangedByName"/>
							<ui:template>
								<Label text="{salesorder>ChangedByName}"/>
							</ui:template>
						</ui:Column>
					</ui:columns>
				</ui:Table>
			</content>
		</Panel>
	</l:VerticalLayout>
</core:FragmentDefinition>

After this code, i can see the Initial tbale and tab container screen , and able select the table rows inside the tab container.

But In my approach , i followed the same approach the selection is not working inside the tab container.

Please if anyone know the solution, please help me to sort it out.

Thank you,

Regards,

JK.