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>

[santosh51 · Accepted solution]

Hi All, Hi @Virinchy  I was able to find the solution by using the controls below way.

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

[Virinchy]

try this @santosh51 , you may use FlexItemData instead of the static height on the scroll container, so When there are fewer table rows, the dialog shrinks automatically instead of taking a fixed height. Adjust the table data in the controller code shared in the example. 

https://plnkr.co/edit/hZXuWq8yHg9MdbzQ

Regards

Virinchy

[santosh51]

Hi Virinchy, Thanks for suggestion. I checked your new code, the table is getting shrinked automatically but then again the radiobuttons are also getting scrolled now. Can you check & suggest further please. The radiobuttons should be freezed always and dialog should get adjusted automatically as per the table items. Thanks in advance.

[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.