Skip to Content
-1

SAP UI5 - Multiple tables Binding in the same view

Hello Experts,

I'm developing an app which contains two tables in the same view, assume header list table and item list table, when user clicks on header table row, item list will be populated based on selection on header.

I'm able to bind the header list, but not item list when click on the row, can you pls help how to bind item list when user clicks on header table row.

This is the code of the View

Entity Sets BU_PARTNERSet and BP_AddressSet belong to same OData service

createContent : function(oController) {		
//Create header Table
		var oTable = new sap.ui.table.Table('TB1', {
			title:'Header List',
			selectionBehavior :sap.ui.table.SelectionBehavior.Row,
			cellClick: function(oEvent){oController.getTaskDetail(oEvent)}
		});
		
        //Create table column
		var oColPartner = new sap.ui.table.Column();
		oColPartner.setLabel('Business Partner');
		
		var oTextPartner = new sap.m.Text();
		oTextPartner.bindProperty('text', {path:'Partner'});
	    oColPartner.setTemplate(oTextPartner);
	    oTable.addColumn(oColPartner);
	    
        //Create table column
		var oColType = new sap.ui.table.Column();
		oColType.setLabel('Business Type');
		
		var oTextType = new sap.m.Text();
		oTextType.bindProperty('text', {path:'Type'});
	    oColType.setTemplate(oTextType);
	    oTable.addColumn(oColType);
	     	  
	  //Assign model
	  oTable.placeAt('content'); 
	  
//Create Item table
	  var oTableItem = new sap.ui.table.Table('TB2', {
		  title:'Items Details',
		  visibleRowCount: 3,
		  selectionMode: sap.ui.table.SelectionMode.Single
	  });
	  
//Add column
	  oTableItem.addColumn(new sap.ui.table.Column({
		  label: new sap.ui.commons.Label({text: 'Business Partner'}),
		  template: new sap.ui.commons.TextView({text:"{Partner}"})	  
	  }));
	  
	  oTableItem.addColumn(new sap.ui.table.Column({
		  label: new sap.ui.commons.Label({text: 'Address Number'}),
		  template: new sap.ui.commons.TextView({text:"{Addrnumber}"})
	  }));
	  
//Assign Model
	  oTableItem.placeAt('content');

This is the code of the controller

     onInit: function() {
    	 
    	//create URL
 		var ourl = /sap/opu/odata/sap/ZBU_PARTNER_SRV/';
		//Create OData model
		var oModel = new sap.ui.model.odata.ODataModel(ourl,{json:'true'});
		//get Table
		var xcore  = sap.ui.getCore();
		var oTable = xcore.byId('TB1');
		//Set OData Model
		oTable.setModel(oModel);
		
		//Bind Rows
		oTable.bindRows('/BU_PARTNERSet');
}

***************Event*********************************************

	//get Task detail
	getTaskDetail: function(oEvent){

    	//create URL
 		var ourl = 'sap/opu/odata/sap/ZBU_PARTNER_SRV/';
		//Create OData model
        var oModelItem = new sap.ui.model.odata.ODataModel(ourl,{json:'true'});
		//Read Cell Row data
		var context = oEvent.getParameters().rowBindingContext;
		//Read partner Key value
		oPartner = context.getObject('Partner')
		
		//get Table
		var xcore  = sap.ui.getCore();
		var oTableItem = xcore.byId('TB2');
					
		//Set filter
		var ofilter = new sap.ui.model.Filter({
			path:'Partner',
			operator:sap.ui.model.FilterOperator.EQ,
			value1:oPartner
		});
		
	oTableItem.bindRows({path:'/BP_AddressSet',filters:[ofilter]});
Add comment
10|10000 characters needed characters exceeded

  • Former Member

    Can i see the sample of your oData? That would help me to debug better.

    I guess we can do the filtering in the oData service rather than applying filters on client side.

    Did you debug to see what is the value of oPartner in "oPartner =context.getObject('Partner')"?

    Please share the sample data.

  • Get RSS Feed

2 Answers

  • Best Answer
    Feb 01, 2017 at 09:10 AM

    Hi Ramakrishna ,

    In the listItem table you are not setting the model , you are directly binding the rows .

    oTableItem.setModel(oModelItem); //missing in your code

    thanks

    Viplove

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 01, 2017 at 07:14 AM

    Try this approach.

    • in Controller init: Attach your model at view level rather than at table control level
    //create URL
    var ourl = 'sap/opu/odata/sap/ZBU_PARTNER_SRV/';
    //Create OData model
    var oModelItem = new sap.ui.model.odata.ODataModel(ourl, {
    		json: 'true'
    });
    
    //set View
    this.getView().setModel(oModel);
    Add comment
    10|10000 characters needed characters exceeded