Auto Resizing of the sap.ui.table.Table Column based on the content at Run Time

[govardan_raj]

Hi Experts,

Am having a Grid Table, of type sap.ui.table , as shown below.

<core:View 
xmlns:core="sap.ui.core" 
xmlns:mvc="sap.ui.core.mvc" 
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:T="sap.ui.table"
xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="Controller.Create">



<T:Table id="TABLEABC" inset="false" items="" rows="{MODEL>/ITEM/SALEORDER_ITEM}">
		
<T:columns>
<T:Column autoResizable="true"> <Text text="Sr No." />         <T:template><Text text="{MODEL>SERIAL_NO}" /></T:template> </T:Column>
<T:Column autoResizable="true"> <Text text="Part Number" />    <T:template><Text text="{MODEL>EQUIPMENT_NUMBER}" /></T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Description" />    <T:template><Text text="{MODEL>EQUIPMENT_DESCRIPTION}" /></T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Configuration" />  <T:template><Input value="{MODEL>CONFIGURATION}" id ="QuantityInput1" class=""/></T:template></T:Column>
<T:Column autoResizable="true"> <Text text="UOM" />             <T:template><Text text="{MODEL>UOM}" /></T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Part Quantity" />  <T:template><Input value="{MODEL>QUANTITY}" id ="QuantityInput2" class=""/></T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Unit Price (₹)" /> <T:template><Text text="{MODEL>UNIT_PRICE}" /></T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Discount Type" />  <T:template><Select items="{MODEL>DISCOUNT_TYPE}" change="getItemDetails" ><core:Item key="{MODEL>key}" text="{MODEL>Desc}" /></Select> </T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Discount Rate" />  <T:template><Input value="{MODEL>DISCOUNT_RATE}" id ="QuantityInput3" class=""/></T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Discount Amount (₹) " /><T:template><Text text="{MODEL>DISCOUNT_AMOUNT}" /> </T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Net Val. After Discount(₹)" /> <T:template><Text text="{MODEL>NET_VALUE}" /></T:template></T:Column>
<T:Column autoResizable="true"> <Text text="CGST " /><T:template><Text text="{MODEL>CGST_PRCNT}" /> </T:template></T:Column>
<T:Column autoResizable="true"> <Text text="CGST Amt(₹)" /><T:template><Text text="{MODEL>CGST_AMOUNT}" /> </T:template></T:Column>
<T:Column autoResizable="true"> <Text text="SGST %" /><T:template><Text text="{MODEL>SGST_PRCNT}" /> </T:template></T:Column>
<T:Column autoResizable="true"> <Text text="SGST Amt(₹)" /><T:template><Text text="{MODEL>SGST_AMOUNT}" /> </T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Amount(₹)" /><T:template><Text text="{MODEL>AMOUNT}" /> </T:template></T:Column>
<T:Column autoResizable="true"> <Text text="Confirmed Quantity" /><T:template><Text text="{MODEL>CONFIRMED_QUANTITY}" /> </T:template></T:Column>
</T:columns>  
</T:Table>

In Column i have added Property autoResizable = "true", hence when screen is loaded with data in table, on double click of any column, that particular column(column i.e. double clicked example column A) width is auto resized to the length of the content(data) that has maximum length in that Column.

Now i want to achieve this automatically for all columns when screen is loaded without double clicking on the column, how can we achieve that ??

Regards

Govardan

[gill367 · Accepted solution]

There is no direct method or event present in the table api for achieving it.

The standard control uses one extension class to achieve all this.

You can try to extend the standard control to achieve it or use the extension directly (with risk of it not working after an upgrade).

for example I made it work using below code.

		onResizeAll: function (oEvent) {
			var tbl = this.getView().byId("table");
			var columnCount = tbl.getColumns().length;
			for (var indx = 0; indx < columnCount; indx++) {
				tbl._aExtensions[0].doAutoResizeColumn(indx);
			}
		}

Regards,

Sarbjeet Singh

[govardan_raj · Accepted solution]

Thanks a lot sarbjeet, thanks a ton, its working.

[andrzej_koeller · Accepted solution]

table.getColumns will return a reference, not a copy, to columns objects.

I would rather encourage to use the result array of columns, iterate through this array instead of using private property _aExtensions as it can be changed in future releases of ui5 and would break your app.

[Ataglavini · Accepted solution]

If you have a large number of columns, you should use the reverse index if you don't want to lose focus of the first column.

var tbl = this.getView().byId("table");

            var columnCount = tbl.getColumns().length;

            for (var index = columnCount - 1; index >= 0; index--) {

                tbl._aExtensions[0].doAutoResizeColumn(index);

            }