table data is not showing

[Former Member]

i am trying to display a table but it is not showing any data in it. databinding for table is working as titile="{/title}" is getting displayed in table.

flow is like that

main.view.xml -> icontab.fragment.xml -> my_table.view.xml

so main view loads first.it loads a fragment(icontab) inside it.in icontab fragment i have icontabfilters and in 5th i am loading my_table.view.xml.problem is that only table header and footer is showing and nothing else

code files are ---

    

main.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

  controllerName="filter_icontabbar.main" xmlns:html="http://www.w3.org/1999/xhtml">

  <Page title="Title">

  <content>

  <core:Fragment id="fraggy" fragmentName="filter_icontabbar/icontab" type="XML" />

  </content>

  </Page>

</core:View>

icontab.fragment.xml

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

  xmlns:core="sap.ui.core">

  <IconTabBar id="idIconTabBar" class="sapUiResponsiveContentPadding">

  <items>

  <IconTabFilter icon="sap-icon://customer-view" count="1">

  <Text text="Working..." />

  </IconTabFilter>

  <IconTabFilter icon="sap-icon://measure" count="2">

  <Text text="Working..." />

  </IconTabFilter>

  <IconTabFilter icon="sap-icon://activity-individual"

  count="3">

  <Text text="work in progress" />

  </IconTabFilter>

  <IconTabFilter icon="sap-icon://notification" count="4">

  <Text text="work in progress" />

  </IconTabFilter>

  <IconTabFilter icon="sap-icon://measurement-document" count="5">

  <content>

  <mvc:XMLView viewName="filter_icontabbar.my_table"></mvc:XMLView>

  </content>

  </IconTabFilter>

  <IconTabFilter icon="sap-icon://chain-link" count="6">

  <Text text="Working..." />

  </IconTabFilter>

  </items>

  </IconTabBar>

</core:FragmentDefinition>

my_table.view.xml

<core:View  xmlns:core="sap.ui.core"

  xmlns:mvc="sap.ui.core.mvc"

  xmlns="sap.m"

     controllerName="filter_icontabbar.my_table"

     xmlns:html="http://www.w3.org/1999/xhtml"

  xmlns:table="sap.ui.table">

  <Page  title="{/title}" showNavButton="true" navButtonPress="backToTile">

  <headerContent>

  <Button icon="sap-icon://drop-down-list" press="openFrag" />

  </headerContent>

  <subHeader>

  <Toolbar>

  <SearchField  placeholder="enter name"    search="searchit"  value="{/searchName}"    width="400px"/>

     <SearchField  placeholder="enter company" search="searchit"  value="{/searchCompany}" width="400px" />

     <Button text="Search" press="searchit" width="100px"/>

     <SearchField placeholder="rank search only" liveChange="onRankSearch" />

  <ToolbarSpacer/>

  <ComboBox  id="combo" placeholder="select rank" items="{path: '/data',sorter: { path: 'rank' }}"  selectionChange="handleSelectionChange" >

  <core:Item key="{rank}" text="{rank}" />

  </ComboBox>

  </Toolbar>

  </subHeader>

  <content>

  <table:Table id="tableId"  rows="{/data}" >

          <table:title><Text text="Wikileaks"></Text></table:title>

              <table:columns>

                <table:Column width="70px">

                    <Label text="Rank"/>

                        <table:template><Text text="{rank}" ></Text></table:template>

                    </table:Column>

                    <table:Column>

                         <Label text="Name"/>

                         <table:template><Text text="{name}" ></Text></table:template>

                    </table:Column>

                    <table:Column>

                         <Label text="Company"/>

                         <table:template><Text text="{company}" ></Text></table:template>

                    </table:Column>

                        <table:Column>

                        <Label text="Ctc"/>

                        <table:template><Text text="{ctc}" ></Text></table:template>

                    </table:Column>

              </table:columns>

  </table:Table>

  </content>

  <footer>

  <Toolbar>

  <Button text="Accept" type="Accept"></Button>

  <ToolbarSpacer/>

  <Button text="Reject" type="Reject"></Button>

  </Toolbar>

  </footer>

  </Page>

</core:View>

my_table.cotroller.js

sap.ui.define([

'jquery.sap.global',

'sap/ui/core/Fragment',

'sap/ui/core/mvc/Controller',

'sap/ui/model/Filter',

'sap/m/MessageToast',

'sap/ui/model/Sorter',

'sap/ui/model/json/JSONModel'

  ], function(jQuery, Fragment, Controller, Filter, Sorter, JSONModel,MessageToast) {

  "use strict";

  sap.ui.controller("filter_icontabbar.my_table", {

  cross:function(){

  alert("cross clicked");

  },

  onInit: function() {

  //alert("in table controller");

  var oModel =  new sap.ui.model.json.JSONModel("tabledata/data_table.json");

  this.getView().setModel(oModel);

  console.log(oModel);

  },

  onExit: function() {

  if (this._oDialog) {

  this._oDialog.destroy();

  }

  },

  searchit:function()

  {

  var queryOne = this.getView().getModel().getProperty("/searchName");

  //alert(queryOne);

  var queryTwo = this.getView().getModel().getProperty("/searchCompany");

  //alert(queryTwo);

  var filter1 = new Filter("name", sap.ui.model.FilterOperator.Contains,queryOne);

  var filter2= new Filter("company", sap.ui.model.FilterOperator.Contains,queryTwo);

  var aFilters = [];

  aFilters.push(filter1);

  aFilters.push(filter2);

  var mytable = this.getView().byId("tableId").getBinding("rows").filter(aFilters);

  },

  handleSelectionChange: function(oEvent)

  {

  var ans=this.getView().byId("combo"). getSelectedKey();

  var combofilter = new Filter("rank",sap.ui.model.FilterOperator.EQ,ans);

  var mytable = this.getView().byId("tableId").getBinding("rows").filter(combofilter);

  },

  //jump back to tile view

  backToTile:function(){

  var app=sap.ui.getCore().byId("appId");

  app.to("tile_page");

  },

  //not working ........why ???????????????

  /* _getDialog : function () {

        if (!this._oDialog) {

            this._oDialog = sap.ui.xmlfragment("mytable/sort");

            this.getView().addDependent(this._oDialog);

        }

        return this._oDialog;

      },

  openFrag : function () {

        this._getDialog().open();

        alert("frag opened");

      },

  */

  openFrag: function (oEvent) {

  if (!this._oDialog) {

  this._oDialog = sap.ui.xmlfragment("filter_icontabbar/sort", this);

  }

  // toggle compact style

  jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);

  this._oDialog.open();

  },

  callme : function(oEvent){

  var oView = this.getView();

  var oTable = oView.byId("tableId");

  var oBinding = oTable.getBinding("items");

  var mParams = oEvent.getParameters();

  // apply sorter to binding

  // (grouping comes before sorting)

  //var aSorters = [];

  /*if (mParams.groupItem) {

  var sPath = mParams.groupItem.getKey();

  var bDescending = mParams.groupDescending;

  var vGroup = this.mGroupFunctions[sPath];

  aSorters.push(new Sorter(sPath, bDescending, vGroup));

  }*/

  var sPath = mParams.sortItem.getKey();

  //alert("sPath : "+sPath);//key name

  var bDescending = mParams.sortDescending;

  //alert("bDescending : "+bDescending);

  //aSorters.push(new  Sorter(sPath, bDescending));

  //oBinding.sort(aSorters);

  var oSorter = new sap.ui.model.Sorter(sPath,bDescending); // sort descending

  oTable.getBinding("rows").sort(oSorter);

  // apply filters to binding

  var aFilters = [];

  jQuery.each(mParams.filterItems, function (i, oItem) {

  //alert(mParams.filterItems);

  var aSplit = oItem.getKey().split("___");

  var sPath = aSplit[0];

  var sOperator =aSplit[1];

  var sValue1 = aSplit[2];

  var sValue2 = aSplit[3];

  var oFilter = new Filter(sPath, sOperator, sValue1, sValue2);

  aFilters.push(oFilter);

  });

  //oBinding.filter(aFilters);

  oTable.getBinding("rows").filter(aFilters);

  // update filter bar

  //oView.byId("vsdFilterBar").setVisible(aFilters.length > 0);

  //oView.byId("vsdFilterLabel").setText(mParams.filterString);

  },

/**

* 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 tile_master_detail.my_table

*/

// onInit: function() {

//

// },

/**

* 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 tile_master_detail.my_table

*/

// 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 tile_master_detail.my_table

*/

// onAfterRendering: function() {

//

// },

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

* @memberOf tile_master_detail.my_table

*/

// onExit: function() {

//

// }

});

});

data_table.json

{

"data":

  [

{"name":"kaushi", "company":"hp", "rank":5, "ctc":5 },

{"name":"sushil", "company":"dell", "rank":7, "ctc":10 },

{"name":"amma", "company":"sony", "rank":1, "ctc":3 },

{"name":"ironman", "company":"xiaomi", "rank":4, "ctc":7 },

{"name":"himmi", "company":"sap", "rank":0, "ctc":5 },

{"name":"santanu", "company":"amazon", "rank":6, "ctc":9 },

{"name":"aditi", "company":"flip", "rank":3, "ctc":11 },

{"name":"richa", "company":"snap", "rank":2, "ctc":12 }

  ],

  "searchName":"",

  "searchCompany":"",

  "placeholder":"Enter here",

  "abc":"xyz",

  "namePlaceHolder":"enter name",

  "companyPlaceHolder":"enter company",

  "nameValue":"",

  "title":"table title"

}

[Former Member · Accepted solution]

thanks for your replies but the problem is solved now.

actually the problem was in my_table.view.xml page and the problem was in the aggregation i think.

i changed my table view to like this and its working now.

[saivellanki]

Hi Himanshu,

Try -

onInit: function() {
var oModel =  new sap.ui.model.json.JSONModel("tabledata/data_table.json");
oModel.attachRequestCompleted(function(oEvent){  
var oNewModel= oEvent.getSource();  
this.getView().setModel(oNewModel);
});  
}

Regards,

Sai Vellanki.

[Former Member]

hey sai,

its not working

[vijay_kumar49]

try this code

onInit: function() {

        var oModel = new sap.ui.model.json.JSONModel(jQuery.sap.getModulePath("xyz.tabledata", "/data_table.json"));

        oModel.attachRequestCompleted(function(oEvent){

          var oModel = oEvent.getSource();

          sap.ui.getCore().setModel(oModel);

        })

      }

[Former Member]

hey vijay,

i already tried setting the model to the core and then accessing it in the table but it is not working.

[vijay_kumar49]

try

var oModel =  new sap.ui.model.json.JSONModel("data/data_table.json");

[Former Member]

hello vijay,

my json file is in tabledata folder not in data folder.and regarding data binding actually data is getting to table if you see because i have bind title property of data_table.json with page title in my_table.view.xml