Skip to Content
0

UI5 table is not completely displayed

Mar 07, 2017 at 02:47 AM

85

avatar image

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Kuiyuan Wang
Mar 15, 2017 at 02:44 AM
0

Problem solved when specific line height.

closed

Share
10 |10000 characters needed characters left characters exceeded
Gowrinath Gundu Mar 07, 2017 at 05:43 AM
-1

Hello,

Please paste the screen shots.

Regards,

Gowrinath

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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)
0