SAP UI5 Fragment Dialog with Fixed Toolbar and Scrollable Table

[santosh51]

Hi Experts,

I have a simple requirement for a dialog which includes radiobutton groups, table and buttons.

I want the radiobutton group displayed at the top of dialog to be visible always irrespective of number of items in the following table. The buttons which are defined at the end of dialog is already working as expected, means it's always displayed in the dialog and not getting scrolled. But the radiobuttons are not working like this, they get scrolled whenever there are more items in the table. This is how my dialog structure looks. Could you please suggest how to achieve this functionality? 

 <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog id="idDialog">
<VBox id="VB1">
<RadioButtonGroup id="idRBG1">
<RadioButton id="idRB1"></RadioButton>
<RadioButton id="idRB2"></RadioButton>
</RadioButtonGroup>
</VBox>
<VBox id="VB2">
<Table id="idTable"></Table>
</VBox>
<buttons>
<Button id="idB1"></Button>
<Button id="idB2"></Button>
</buttons>
</Dialog>
</core:FragmentDefinition>

[Virinchy]

Hi Santosh, 

Is this what you would like to achieve?

https://plnkr.co/edit/AOpIfKMVX23izvkn?preview

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">

<Dialog id="idDialog" title="Sample Dialog" stretch="false" resizable="true">

<VBox fitContainer="true">

<VBox id="VB1">

<RadioButtonGroup id="idRBG1">

<RadioButton id="idRB1" text="Option 1"/>

<RadioButton id="idRB2" text="Option 2"/>

</RadioButtonGroup>

</VBox>

</VBox>

<ScrollContainer height="300px" vertical="true">

<VBox id="VB2">

<Table id="idTable" items="{demoModel>/TableItems}" sticky="ColumnHeaders">

<columns>

<Column>

<Text text="ID"/>

</Column>

<Column>

<Text text="Name"/>

</Column>

<Column>

<Text text="Category"/>

</Column>

</columns>

<items>

<ColumnListItem>

<cells>

<Text text="{demoModel>id}"/>

<Text text="{demoModel>name}"/>

<Text text="{demoModel>category}"/>

</cells>

</ColumnListItem>

</items>

</Table>

</VBox>

</ScrollContainer>

<buttons>

<Button id="idB1" text="Action 1" press="onAction1"/>

<Button id="idB2" text="Action 2" press="onAction2"/>

<Button id="idClose" text="Close" press="onCloseDialog"/>

</buttons>

</Dialog>

</core:FragmentDefinition>

Regards

Virinchy

[santosh51]

Hi Virinchy, Thanks for your response. I had tried similar thing earlier but the concern with this approach is that I do not want to fix the height of the scrollContainer. When there are not many items in the table, I need the dialog to fit to content, means auto shrink.