cancel
Showing results for 
Search instead for 
Did you mean: 

SAP UI5 Custom Smart table Grid type Navigation missing

former_member765920
Participant
0 Kudos
1,163

Hi All,

I have a requirement where I need a custom sap ui5 smart table with grid type as both horizontal and vertical scroll bars are required. I also need to have navigation from row selection to next page to show 2 more line item level details.

But I am unable to see the row level navigation enabled when I change Table to Grid table with both scroll bar.This option is showing up only if the table type is Responsive.

Is there a way to achieve row level navigation available along with horizontal and vertical scroll bars? If not through settings is there a way I can capture row level event on capturing which I can navigate to next page.

Also, please suggest if we can achieve this by OData extensions as well.

Above table is based on ABAP CDS views with metadata extensions for UI annotations.

PS: I have tried using the sap ABAP CDS based OData to build Fiori list app with grid table and I could get both navigation along with horizontal and vertical scroll bar. Due to some other customizations I cannot use Fiori list App.

Regards,

Priyanka

Accepted Solutions (1)

Accepted Solutions (1)

rahulkumar_sankla
Participant
0 Kudos

Check this example

https://sapui5.hana.ondemand.com/#/entity/sap.ui.table.Table/sample/sap.ui.table.sample.RowAction

you can bind the rows with the odata directly and manipulate the data as you like using formatter.

former_member765920
Participant
0 Kudos

Hi Rahul,

Actually I can achieve row action in smart table itself if I change the table type to Responsive but that hinders my horizontal scroll bar.

I need to get a solution staying with smart table itself. Since Grid table with more columns doesn't let me have row selection option. I am trying to figure out some custom option of implementation if possible.

Regards,

Priyanka

rahulkumar_sankla
Participant

priyankakes

in that case you need to do something like this, and this is an example from my own development:

View:

			<smartTable:SmartTable id="SmartTable" smartFilterId="smartFilterBar" entitySet="PurchaseOrderMonitorSet" tableType="Table"
				useExportToExcel="true" beforeExport="onBeforeExport" useTablePersonalisation="true" header="Line Items"
				persistencyKey="SmartTablePurchaseOrder" showRowCount="true" enableAutoBinding="true" class="sapUiResponsiveContentPadding">
				<smartTable:layoutData>
					<FlexItemData growFactor="1" baseSize="0%"/>
				</smartTable:layoutData>
			</smartTable:SmartTable>

in your controller, in the onInit method, get the instance of the table and change the property "SelectionMode" and then attach the event handler on the rowSelectionChange event

		onInit: function () {
			var oTable = this.getView().byId("SmartTable").getTable();
			oTable.setSelectionMode("Single");
			oTable.attachRowSelectionChange(function(){
				debugger;
			}.bind(this));
		}

once you select any row from the table, the event will be fired and the listner will be called and then you can do anything, including navigation

former_member765920
Participant
0 Kudos

Thanks for the response Rahul, this solves part of my issue.

But is it possible to achieve it without loosing the multi-selection option.

former_member765920
Participant
0 Kudos

Thanks for the solution Rahul. It worked as expected.

Answers (0)