CODEWITHSUNDEEP
sapui5
MLElyakan
MLElyakan

Reputation: 269

SAPUI5 GridList Component Grouping Issue

I would like to use grouping feature for the GridList component. But when I used to grouping feature, the list items can not show separate rows. The all items show in inline position. I'm using the same coding just like in the this url

Here is the screenshow of my view https://ibb.co/M90Pb5T

Here is my coding:

<mvc:View xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:grid="sap.ui.layout.cssgrid"
xmlns:f="sap.f" controllerName="SapUI5Tutorial.RootApp">
<Panel>
    <content>
        <f:GridList items="{
                    path: '/DataList',
                    sorter: {
                        path: 'groupTitle',
                        group: true
                    }
                }">
            <f:customLayout>
                <grid:GridBoxLayout boxWidth="15rem"/>
            </f:customLayout>
            <f:GridListItem>
                <VBox >
                    <VBox class="sapUiSmallMargin">
                        <layoutData>
                            <FlexItemData growFactor="1" shrinkFactor="0" />
                        </layoutData>
                        <Title text="{title}" wrapping="true" />
                        <Label text="{subtitle}" wrapping="true" />
                    </VBox>
                </VBox>
            </f:GridListItem>
        </f:GridList>
    </content>
</Panel>

Here is the controller.js (Init function)

var data = [
    { title: "Grid item title 1", subtitle: "Subtitle 1", groupTitle: "Group A" },
    { title: "Grid item title 2", subtitle: "Subtitle 2", groupTitle: "Group A" },
    { title: "Grid item title 3", subtitle: "Subtitle 3", groupTitle: "Group A" },
    { title: "Grid item title 10", subtitle: "Subtitle 10", groupTitle: "Group B" },
    { title: "Grid item title 11", subtitle: "Subtitle 11", groupTitle: "Group B" },
    { title: "Grid item title 12", subtitle: "Subtitle 12", groupTitle: "Group B" },
  ];
  oModel.setProperty("/DataList", data);

Where am I doing mistake?

Please let me know about this issue. I would like to see separate row for the GroupHeaderListItem.

Upvotes: 0

Views: 569

Answers (1)

MLElyakan
MLElyakan

Reputation: 269

I have research a little bit on the web and I've resolved the issue by adding sap.f library to index.html file.

Here is the code:

<script id ="sap-ui-bootstrap"
  src = "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-theme = "sap_belize"
  data-sap-ui-libs = "sap.m,sap.tnt,sap.f,sap.ui.commons,sap.ui.table,sap.ui.ux3"
  data-sap-ui-bindingsyntax = "complex"
  data-sap-ui-compatversion = "edge"
  data-sap-ui-resourceroots = '{ "SapUI5Tutorial": "./" }'></script>

Upvotes: 1

Related Questions