Skip to Content
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



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

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

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

			oTabContainerItemsTemplate = new TabContainerItem({
				name: "{Name}",
				content: [
			oTabContainer = new TabContainer({
				showAddNewButton: true,

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


it will call the Display Fragment code:


<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">
				<OverflowToolbar height="3rem">
					<Title text="GroupElementList"/>
					<Button icon="sap-icon://add" press="onCreateGroupElementFragment"/>
					<Button icon="sap-icon://delete" press="onDeleteGroupElement"/>
				<ui:Table rows="{salesorder>/SalesOrderCollection}" title="SalesOrderCollection" selectionMode="MultiToggle" visibleRowCount="7"
						<ui:Column width="11rem">
							<Label text="SoId"/>
								<Text text="{salesorder>SoId}" wrapping="false"/>
						<ui:Column width="11rem">
							<Label text="CreatedByBp"/>
								<Input value="{salesorder>CreatedByBp}"/>
						<ui:Column width="6rem" hAlign="End">
							<Label text="ChangedByName"/>
								<Label text="{salesorder>ChangedByName}"/>

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,