Table Selection is not working Inside TabContainer?

Jayakrishnan — Thu, 19 Sep 2019 09:00:39 GMT

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.

Re: Table Selection is not working Inside TabContainer?

Jayakrishnan — Thu, 10 Oct 2019 09:24:22 GMT

sharath.mg , Hi Sharath. I have seen your answer in one of the questions in SCN regarding GridTable-MultiToggle feature not working inside the TabContainer. I also posted the same issue here? Could you please help me if you have any solution for this?

Regards,

Re: Table Selection is not working Inside TabContainer?

Sharathmg — Thu, 10 Oct 2019 10:48:05 GMT

Hi JK,

Please share my post for reference.

Re: Table Selection is not working Inside TabContainer?

Jayakrishnan — Thu, 10 Oct 2019 11:35:54 GMT

sharath.mg . Please refer your post below.

https://answers.sap.com/answers/461975/view.html

Re: Table Selection is not working Inside TabContainer?

Jayakrishnan — Thu, 17 Oct 2019 05:56:52 GMT

Hi All, i am closing this post as it is a sapui5 version problem. As they improved the NavContainer and Table Selection behavior from 1.69.0 on wards, is is working from 1.69 and above. Grid Table Selection working fine perfectly inside the tab container.

Thanks ,

Regards,

JK.

Question Re: Table Selection is not working Inside TabContainer? in Technology Q&A

Table Selection is not working Inside TabContainer?

Re: Table Selection is not working Inside TabContainer?

Re: Table Selection is not working Inside TabContainer?

Re: Table Selection is not working Inside TabContainer?

Re: Table Selection is not working Inside TabContainer?