sap.m.TileContainer Only Displays 2 Tiles - sapui5

Question

I'd like to use sap.m.TileContainer to display tiles with some info. The SAP sample is not really useful as it does not follow the guidelines such as using manifest.json etc...
So I built an app in SAP Web IDE from scratch. I am using TileContainer to display tiles. Its tile aggregation is bound to a local JSON data file.
The data file contains an array with three items. However, only two are displayed after rendering. Any suggestions why?
This is my data.json:
{
"TileCollection": [{
"title": "Slovenská Republika",
"info": "support for SR",
"flag": "",
"icon": "sap-icon://inbox"
}, {
"title": "Deutschland",
"info": "support for DE",
"flag": "",
"icon": "sap-icon://inbox"
}, {
"title": "Ceska Republika",
"info": "support for CZ",
"flag": "",
"icon": "sap-icon://inbox"
}]
}
This is my XML view:
<mvc:View
controllerName="com.support_page.controller.App"
height="100%"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns:tnt="sap.tnt"
xmlns="sap.m">
<Page
showHeader="true"
enableScrolling="false">
<TileContainer
id="container"
tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<StandardTile
icon="{icon}"
title="{title}"
info="{info}"
activeIcon="{flag}"/>
</TileContainer>
</Page>
</mvc:View>

Answer 1

many thanks for your suggestion
in the meantime i solved it with tile container as well.
what i did is that i used NOT a default model.
i initialised the model in component.js
then used model>/TileCollection and it worked though i am still a bit confused.
nevertheless, thanks for you answer as well.

Answer 2

I solved this issue , even i was facing same issue , If you dont use local model you will not face issue or if you define your model in controller you will not face the issue.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
"use strict";
return Controller.extend("SmartPurchaseReq.controller.Home", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf SmartPurchaseReq.view.Home
*/
onInit: function() {
var that = this;
var data = {
"TileCollection" : [
{
"icon" : "sap-icon://hint",
"type" : "Monitor",
"title" : "Tiles: a modern UI design pattern for overview & navigation."
},
{
"icon" : "sap-icon://inbox",
"number" : "89",
"title" : "Approve Leave Requests",
"info" : "Overdue",
"infoState" : "Error"
},
{
"type" : "Create",
"title" : "Create Leave Requests",
"info" : "28 Days Left",
"infoState" : "Success"
},
{
"icon" : "sap-icon://travel-expense-report",
"number" : "281",
"numberUnit" : "euro",
"title" : "Travel Reimbursement",
"info" : "1 day ago"
},
{
"icon" : "sap-icon://loan",
"number" : "2380",
"numberUnit" : "euro",
"title" : "My Salary",
"info" : "8 days ago"
},
{
"icon" : "sap-icon:`enter code here`//lab",
"number" : "1",
"numberUnit" : "Invention",
"title" : "Test Lab Reports",
"info" : "8 Days Ago"
},
{
"icon" : "sap-icon://inbox",
"type" : "Monitor",
"title" : "Leave Request History"
},
{
"type" : "Create",
"title" : "Create Purchase Order",
"info" : "890€ Open Budget",
"infoState" : "Success"
},
{
"icon" : "sap-icon://stethoscope",
"number" : "3",
"title" : "Yearly Health Check",
"info" : "3 year overdue",
"infoState" : "Error"
},
{
"icon" : "sap-icon://meal",
"type" : "Monitor",
"title" : "Meal Schedule"
}
]
};
var DummyModel = new JSONModel();
DummyModel.setData(data);
// var sPath = jQuery.sap.getModulePath("model", "/Dummy.json");
// var DummyModel = new JSONModel(sPath);
that.getView().byId("container").setModel(DummyModel);
},
OnTilePress: function(evt) {
var idj = evt.getSource();
var d =5;
}
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* #memberOf SmartPurchaseReq.view.Home
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* #memberOf SmartPurchaseReq.view.Home
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* #memberOf SmartPurchaseReq.view.Home
*/
// onExit: function() {
//
// }
});
});