Skip to Content
avatar image
Former Member

UI5 table is not completely displayed

hello Experts,

I am new to SAP UI5. I found a problem and couldn't locate the reason.

there is a popup table sap.ui.table.Table, with 4 fixed columns, visible rows = 10, table width is fix as well, which is 1000px, 4 fixed columns has width 602px. and there maybe more columns which are dynamically created (by oTable.addColumn(new sap.ui.table.Column), each has a width = 398 / number of column.

The problem is that if the table has more than 10 records, the last record is always not shown in the beginning of the popup. but , if I adjust the column manually , the last record is shown then.

I try to change the column width. but no effect.

please help to give some advise .

Thanks in advance,

Kevin

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    avatar image
    Former Member
    Mar 15, 2017 at 02:44 AM

    Problem solved when specific line height.

    closed

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 07, 2017 at 05:43 AM
    -1

    Hello,

    Please paste the screen shots.

    Regards,

    Gowrinath

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      I scroll all the way down ,and see last record is 111, and I adjust my column width, the 11th record 109 is shown then.

      		var that = this;
      		var controller = that.getController();
      		var oLayout = new sap.ui.commons.layout.MatrixLayout({
      			columns : 2,
      			width: '1000px',
      			widths : ['602px', '398px']
      		});
      		
      		var oRow = new sap.ui.commons.layout.MatrixLayoutRow({
      			height: '25px' });
      
      
      		oLayout.addRow(oRow);
      
      
      		var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
      			id:'PredPkgv',
      		});
      
      
      		var oTitle = new sap.ui.commons.TextView({
      			text : rdc.t('siv.header',[0]),
      			//text : "{t>siv.header}",
      			design : sap.ui.commons.TextViewDesign.H5});
      		
      		oController._tableTitle = oTitle;
      		oCell.addContent(oTitle);
      		oRow.addCell(oCell);
      
      
      		oCell = new sap.ui.commons.layout.MatrixLayoutCell({
      			id:'DeptPkgv',
      		});
      
      
      		oTitle = new sap.ui.commons.TextView({
      			text : rdc.t('pv.updatedeptpkgvs.title'),
      			design : sap.ui.commons.TextViewDesign.H5});
      
      
      		oCell.addContent(oTitle);
      		oRow.addCell(oCell);
      		
      		var oTable = new sap.ui.table.Table("pkgDeptTable",{
      			visibleRowCount: 10,
      			selectionMode : sap.ui.table.SelectionMode.Single,
      			fixedColumnCount: 4,
      			enableColumnReordering: false,
      	        enableSelectAll: false
      		}).addStyleClass("pkgDeptmentTable");
      		
      		oTable.setColumnHeaderHeight(20);
      		
      		
      		var oModel = new sap.ui.model.json.JSONModel();
      		var newDeptPkgSivs = controller._newDeptPkgSivs = [];//come from deptPkgSivs
      		var pkgSivs = controller._pkgSivs = [];
      		var deptPkgvs = controller._cpDeptPkgvs = [];
      		
      		controller.getTableData(oModel, newDeptPkgSivs, pkgSivs, deptPkgvs);
      		oTable.setModel(oModel);
      		
      		oTable.addColumn(new sap.ui.table.Column({  
      			label : "{t>siv.id}",  
      			template: new sap.ui.commons.TextView().bindProperty("text", {path: "SI_ID"}),
      			filterProperty: "SI_ID",
      			width: this.sWidthSiId
      		}));
      		
      		oTable.addColumn(new sap.ui.table.Column({  
      			label : "{t>siv.country.label}",  
      			template: new sap.ui.commons.TextView().bindProperty("text", {path: "SI_COUNTRY"}),
      			filterProperty: "SI_COUNTRY",
      			width: this.sWidthSiCountry
      		}));
      		
      		oTable.addColumn(new sap.ui.table.Column({  
      			label : "{t>siv.leadproductversion.label}",  
      			template: new sap.ui.commons.TextView().bindProperty("text", {path: "SI_LEAD_PROD_VERS"}),
      			filterProperty: "SI_LEAD_PROD_VERS",
      			width: this.sWidthSiProduct
      		}));
      		
      		oTable.addColumn(new sap.ui.table.Column({  
      			label : "{t>siv.description.label}",  
      			template: new sap.ui.commons.TextView().bindProperty("text", {path: "SI_VERS_DESCRIPTION"}),
      			filterProperty: "SI_VERS_DESCRIPTION",
      			width: this.sWidthSiDescription
      		}));
      		
      		oTable.bindRows("/sivs");
      		
      		controller.iNumberofRows = oTable.getBinding("rows").getLength();
      		var data = controller.data;
      		var isLocal;
      		if(deptPkgvs.length > 0){
      			var flag = false;
      			var columnWidth = controller.COLUMN_WIDTH;
      			if(deptPkgvs.length >= 8){
      				columnWidth = controller.COLUMN_WIDTH;
      			}else{
      				columnWidth = Math.floor(398/deptPkgvs.length) + "px";	
      			}
      			for(var i = 0; i < deptPkgvs.length; i++){
      				isLocal = deptPkgvs[i].IS_LOCAL;
      			    oTable.addColumn(new sap.ui.table.Column({
      			        label: new sap.ui.commons.Label({text:deptPkgvs[i].PKG_COUNTRY}),
      			        template: new sap.ui.commons.CheckBox({
      			        	change: function(event){
      			        		flag = true;
      			        		var IsChecked = this.getChecked();
      			        		var SI_ID = this.getParent().getCells()[0].mBindingInfos.text.binding.oContext.getObject().SI_ID;
      			        		//if it is new to deptPkg
      			        		var SI_COUNTRY = this.getParent().getCells()[0].mBindingInfos.text.binding.oContext.getObject().SI_COUNTRY;
      			        		var SI_LEAD_PROD_VERS = this.getParent().getCells()[0].mBindingInfos.text.binding.oContext.getObject().SI_LEAD_PROD_VERS;
      			        		var currentColumn = this.getCustomData()[0].getValue();
      			        		if(IsChecked){
      			        			var assignedSiv = {};
      		        				assignedSiv.SI_ID = SI_ID;
      		        				assignedSiv.SI_COUNTRY = SI_COUNTRY;
      		        				assignedSiv.SI_LEAD_PROD_VERS = SI_LEAD_PROD_VERS;
      		        				data[currentColumn-4].AssignedSivs.push(assignedSiv);
      			        		}else{
      			        			var currentDeptPkgSivs = data[currentColumn-4].AssignedSivs;
      			        			for(var i = currentDeptPkgSivs.length - 1; i >= 0; i--) {
      			        			    if(currentDeptPkgSivs[i].SI_ID === SI_ID) {
      			        			    	currentDeptPkgSivs.splice(i, 1);
      			        			    	break;
      			        			    }
      			        			}
      			        		}
      				        }
      			        }).bindProperty("checked", {
      			        	path: "SI_ID", 
      			        	formatter: function(siId){
      			        		var isChecked = false;
      		        			var currentColumn = -1, isExistIndept = true, isExist = true;
      		        			if(this.getCustomData()[0] != undefined && siId != null){
      	        					currentColumn = this.getCustomData()[0].getValue();
      	        					/*var deptPkgvs = controller.data;*/
      	        					var currentDeptPkgSivs = data[currentColumn - 4].AssignedSivs;
      	        					if(currentDeptPkgSivs.length === 0){
      	        						isExistIndept = false;
      	        					}
      			        			for(var j = 0; j < currentDeptPkgSivs.length; j++){
      			        				if(siId === currentDeptPkgSivs[j].SI_ID){
      			        					isChecked = true;
      			        					this.removeStyleClass('hideCb');
      			        					/*var sivs = data[currentColumn - 4].AssignedSivs;
      			        					if(sivs.length === 0){
      			        						data[currentColumn - 4].AssignedSivs.push(currentDeptPkgSivs[j]);
      			        					}else{
      			        						for(var i = 0; i < sivs.length; i++){
      			        							if(siId === sivs[i].SI_ID){
      			        								break;
      			        							}else if(i === sivs.length - 1){
      			        								data[currentColumn - 4].AssignedSivs.push(currentDeptPkgSivs[j]);
      			        							}
      			        						}
      			        					}*/
      			        					break;
      			        				}
      			        				else if(j === currentDeptPkgSivs.length - 1){
      			        					isExistIndept = false;
      			        				}
      			        			}
      			        			if(!isExistIndept){
      			        				for(var i = 0; i < pkgSivs.length; i++){
      			        					if(siId === pkgSivs[i].SI_ID){
      			        						isChecked = false;
      			        						this.removeStyleClass('hideCb');
      				        					break;
      			        					}else if(i === pkgSivs.length - 1){
      			        						isExist = false;
      			        					}
      			        				}
      			        			}
      			        			
      			        			if(!isExist){
      			        				var deptPkgvs = controller._deptPkgvs;
      			        				var deptPkgvSivs = deptPkgvs[currentColumn - 4].SIVS;
      			        				if(deptPkgvSivs.length === 0){
      			        					this.addStyleClass('hideCb');
      			        				}
      			        				for(var i = 0; i < deptPkgvSivs.length; i++){
      			        					if(siId === deptPkgvSivs[i].SI_ID){
      			        						isChecked = false;
      			        						this.removeStyleClass('hideCb');
      				        					break;
      			        					}else if(i === deptPkgvSivs.length - 1){
      			        						this.addStyleClass('hideCb');
      			        					}
      			        				}
      			        			}
      		        			}
      		        			return isChecked;
      			        	}
      			        }),
      			        width: columnWidth
      			        //hAlign: "Center"
      			    }));
      			    if(isLocal){
      			    	oTable.getColumns()[4 + i].mAggregations.label.addStyleClass("titleBkgColor");
      			    }
      			}
      		}
      
      1.png (37.8 kB)
      2.png (19.3 kB)