Cannot display i5Grid on UI5 based Web Page

[former_member331639]

Hi

We are on MII 15.1.3.3.

I am trying to create a Simple App using UI5 SplitApp as my root element following MVC architecture. I am trying to add an MII i5Grid to one of the detail pages. But for some reason the i5Grid is not getting displayed. Odd thing is I am getting the updationevent alert as well as html elements before and after this grid getting displayed. I am just seeing blank where i5Grid is supposed to get displayed.

I tested the display template from workbench and it is working fine. I placed it alone in a webpage and it worked.

I am attaching the code for xmlview and controller below. Let me know if you need any info.

Controller

sap.ui.define(["sap/ui/core/mvc/Controller",
		"sap/ui/model/Filter",
		"sap/ui/model/FilterOperator",
		"removedstringhere/app/dashboard/controller/Utility"], 
		function (Controller,Filter,FilterOperator,utility) {
   "use strict";
   return Controller.extend("removedstringhere.app.dashboard.controller.Dashboard", {
	   onInit : function (evt) {
		   	
		},
		onAfterRendering: function(){
			if(this._grid_topleft == undefined){
				this._grid_topleft = new com.sap.xmii.grid.init.i5Grid("MIIPOC/Dashboard/DisplayTemplates/DisplayPIDatai5Grid","MIIPOC/Dashboard/QueryTemplates/GetPIDataXAcuteQuery");
				this._grid_topleft .setGridWidth("400px");
				this._grid_topleft .setGridHeight("300px");
				this._grid_topleft.registerUpdateEventHandler(function(){ alert(); });
				this._grid_topleft.draw(this.getView().byId("topleftcell").getId());
				$("#"+this.getView().byId("dummyid").getId()).html("<h1>Please print this</h1>");
			}
		},
		toggleToMaxScreen : function(){
			utility.toggleToMaxScreen(this);
		}
   });
});

XML View

<mvc:View controllerName="removedstringhere.app.dashboard.controller.Dashboard" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" 
	displayBlock="true" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout">
	<Page title="Removedstringhere Metrics" titleLevel="H4" width="100%" showNavButton="false" height="100%">
		<headerContent>
			<ToolbarSpacer />
			<Button id="maximizeButton"
					icon="sap-icon://full-screen"
					press="toggleToMaxScreen" 
					tooltip="Toggle full screen"/>
		</headerContent>
		<content>
				<Text id="topleftcelltext" text="test text"/>
				<html:div id="topleftcell" style="height:500px;width:700px">
	
				</html:div>
			          <html:div id="dummyid" style="height:500px;width:700px">


				</html:div>


		</content>
	</Page>
</mvc:View>

Output in the js console...shows that Chart has been drawn at the div Id I gave.

chart draw - start
i5Grid.js:1003 chart position Id: __xmlview0--dashboardDetailsView--topleftcell
i5Grid.js:189 Initiliazing title bar
TitleBar.js:47 Initiliazing title bar for i5Grid
TitleBar.js:71 title bar Initiliazed and added
TitleBar.js:87 Initiliazing tool bar
TitleBar.js:89 tool bar Initiliazed and added
i5Grid.js:198 Initiliazing message bar
i5Grid.js:231 thisObj.getGridObject() -->
i5Grid.js:140 In init of Grid
sap-ui-core.js:160 2017-01-03 15:01:40.991989 registerResourcePath ('CustomControls', '/XMII/JavaScript/original/') -  sap.ui.ModuleSystem
i5Grid.js:1013 chart draw - end

Any help or pointers would be highly appreciated.

Regards,

Ravi Kumar

[former_member331639 · Accepted solution]

Hi

I am able to fix the issue with the following code in my controller. Just helping out in case someone is trying to use UI5 MVC approach and trying to display MII objects on web pages.

Instead of using xhtml definition within my view to create grid's div container, I used sap.ui.core.HTML for creating the same.

Regards,

Ravi Kumar

onAfterRendering: function(){
			var oHtml = this.byId("gridControl");
			if (!oHtml) {
				if(this._grid_topleft == undefined){
					var oHtml = new sap.ui.core.HTML(this.createId("gridControl"),
							{ content: '<div id="gridDisplayId" style="height:400px;width:50%"></div>', 
							preferDOM: true,
							afterRendering : function(oEvent) {
								if(sap.ui.getCore().getModel("dashboardstatus").getProperty("/dashboardstatus/dasboardpageid") == 0){
									this._grid_topleft = new com.sap.xmii.grid.init.i5Grid("MIIPOC/Dashboard/DisplayTemplates/DisplayPIDatai5Grid","MIIPOC/Dashboard/QueryTemplates/GetPIDataXAcuteQuery");
									this._grid_topleft.setGridHeight("380px");
									this._grid_topleft.draw("gridDisplayId");
									sap.ui.getCore().getModel("dashboardstatus").setProperty("/dashboardstatus/dasboardpageid", 1);
								}
						  }.bind(this)
					});
					
					this.getView().byId('dasboardpageid').addContent(oHtml);
				}
			}
		},