i've got a sap.ui.table with visibleRowCountMode="Auto" binded with a JSON Model.
In my ColumnBinding I use a sap.m.text element as a template to wrap the text if its too long for the columnWidth.
It seems like the table doesnt refresh the actual height and the row count if the rows are rebinded to the table.
If the rows exceed the actual screensize no scrollbar is added to the table.
I created a bin to show the example coding of my table:
https://jsbin.com/noxaqofeci/edit?html,js,output
--> if you resize the column and the table doesnt fit into the screen the issue will appear.
Am i missing something or is there any way to fix this?
Thanks!
example code for my problem:
<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 table example with local JSON
model" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>SAPUI5 Dynamic Table</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.table'></script>
<script>
var columnData = [{
columnName: "firstName"
}, {
columnName: "lastName"
}, {
columnName: "department"
}];
var rowData = [{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
}, {
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
}];
var oTable = new sap.ui.table.Table({
visibleRowCountMode: "Auto"
});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows: rowData,
columns: columnData
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
var columnName = oContext.getObject().columnName;
return new sap.ui.table.Column({
width: "120px",
label: columnName,
template: new sap.m.Text({text: {path:columnName}})
});
});
oTable.bindRows("/rows");
page = new sap.m.Page({content:[
oTable,new sap.m.Link({text:"Click For More Info",target:"_blank"})
]});
app = new sap.m.App();
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Question can be closed. Sap.ui.table.table is not meant to change its row height dynamically.
https://experience.sap.com/fiori-design-web/grid-table/
--> section cell level, search key: wrap
Related
I'm trying to add dynamic table in sapui5 by using sap.ui.table.Table. But in this example using HTML view, but I want to XML for my view.
What is the alternative way to place the table in XML by using this way
<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 table example with local JSON model" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>SAPUI5 Dynamic Table</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.table'></script>
<script>
var columnData = [{
columnName: "firstName"
}, {
columnName: "lastName"
}, {
columnName: "department"
}];
var rowData = [{
firstName: "Sachin",
lastName: "Tendulkar",
department: "Cricket"
}, {
firstName: "Lionel",
lastName: "Messi",
department: "Football"
}, {
firstName: "Mohan",
lastName: "Lal",
department: "Film"
}];
var oTable = new sap.ui.table.Table({
visibleRowCount: 3
});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows: rowData,
columns: columnData
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
var columnName = oContext.getObject().columnName;
return new sap.ui.table.Column({
label: columnName,
template: columnName,
});
});
oTable.bindRows("/rows");
page = new sap.m.Page({content:[
oTable
]});
app = new sap.m.App();
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
My XML file will look like
<mvc:View
controllerName="sap.ui.demo.toolpageapp.controller.Statistics"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page showHeader="false">
<content>
<!-- want to place the table here -->
</content>
</Page>
You can achieve it using bindColumns() and bindRows()
XML view
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:ui="sap.ui.table"
controllerName="XXXX.Main" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Dynamic Binding" class="sapUiContentPadding">
<content>
<ui:Table id="reOrderTable"></ui:Table>
</content>
</Page>
</core:View>
Controller.js
onInit: function() {
var oModel = this.getTableData(this);
this.createDynTable(this, oModel);
}
/**
* Get Data
*/
getTableData: function(that) {
var columnData = [
{ "colId": "Amt", "colName": "Amount", "colVisibility": true, "colPosition": 0 },
{ "colId": "Qty", "colName": "Quantity", "colVisibility": true, "colPosition": 1 },
{ "colId": "Unt", "colName": "Unit", "colVisibility": true, "colPosition": 2 },
{ "colId": "OPA", "colName": "OpenPOAmount", "colVisibility": true, "colPosition": 3 },
{ "colId": "OPQ", "colName": "OpenPOQuantity", "colVisibility": true, "colPosition": 4 }
];
var rowData = [{
"Amount": "200",
"Quantity": "RF",
"Unit": "CV",
"OpenPOAmount": "5988",
"OpenPOQuantity": "YY",
"EXT_FLDS": {
"PRINTING_NUM": {
"fieldvalue": 10,
"fieldlabel": "Printing Number",
"uictrl": "sap.m.Input"
},
"COUNTRY": {
"fieldvalue": "Thailand",
"fieldlabel": "Country",
"uictrl": "sap.m.ComboBox"
}
}
},
{
"Amount": "80",
"Quantity": "UG",
"Unit": "RT",
"OpenPOAmount": "878",
"OpenPOQuantity": "RF",
"EXT_FLDS": {
"PRINTING_NUM": {
"fieldvalue": 11,
"fieldlabel": "Printing Number",
"uictrl": "sap.m.Input"
},
"COUNTRY": {
"fieldvalue": "Thailand",
"fieldlabel": "Country",
"uictrl": "sap.m.ComboBox"
}
}
},
{
"Amount": "789",
"Quantity": "GV",
"Unit": "ED",
"OpenPOAmount": "8989",
"OpenPOQuantity": "FGG",
"EXT_FLDS": {
"PRINTING_NUM": {
"fieldvalue": 12,
"fieldlabel": "Printing Number",
"uictrl": "sap.m.Input"
},
"COUNTRY": {
"fieldvalue": "Thailand",
"fieldlabel": "Country",
"uictrl": "sap.m.ComboBox"
}
}
}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows: rowData,
columns: columnData
});
return oModel;
},
/**
* Creating Dynamic table
*/
createDynTable: function(that, oModel) {
var oTable = this.byId("reOrderTable");
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
var columnName = oContext.getObject().colName;
return new sap.ui.table.Column({
label: columnName,
template: columnName,
});
});
oTable.bindRows("/rows");
}
In a table, there is a drop-down for each row.
And every row has unique ID and based on it the values should be populated on UI
ID Country
1 India/Malasia/UK
2 Paris/spain/USA
3 Canada/Chile/China
So, I am trying to send the path of ObjectID.
The below code doesn't work. Not sure how to achieve this.
oEditTemplate = new Select({
forceSelection: false,
selectedKey: sPath,
items: {
path: {
path: "tempModel>ObjectId",
formatter: this._editableFormatter.bind(this, sName)
},
templateShareable: false,
template: new ListItem({
key: "{tempModel>value}",
text: "{tempModel>value}"
})
}
});
You can achieve it by using custom data and onAfterRendering. You can refer this JSBIN example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.table,sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"></script>
<script>
var ITEMS = {
"1": ["India", "Malasia", "UK"],
"2": ["Paris", "Spain", "USA"],
"3": ["Canada", "Chile", "China"]
};
sap.m.Select.extend("CustomSelect", {
metadata: {
properties: {
countryId: "string"
}
},
renderer: {}
});
var oSelect = new sap.m.Select({
customData: {
key: "countryId",
value: "{ID}"
}
});
oSelect.addEventDelegate({
onAfterRendering: function(oEvent) {
var src = oEvent.srcControl;
var countryId = src.data("countryId");
if (!!countryId && src.getItems().length === 0) {
ITEMS[countryId].forEach(function(i) {
src.addItem(new sap.ui.core.Item({
text: i,
value: i
}));
});
}
}
});
var oTable = new sap.ui.table.Table({
rows: '{/d/results}',
columns: [
new sap.ui.table.Column({
label: new sap.m.Label({text: "ID"}),
template: new sap.m.Text({text:"{ID}"}),
filterProperty: 'District'
}),
new sap.ui.table.Column({
label: new sap.m.Label({text: "Country"}),
template: oSelect
})]
});
var model = new sap.ui.model.json.JSONModel({
d: {
results: [
{ ID: "1"},
{ ID: "2"}
]
}
});
oTable.setModel(model);
oTable.placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody sapUiSizeCompact">
</body>
</html>
I have an ajax json response and I have managed to bind the values into columns but I need to bind the values into rows.
I tried using oTable.bindRows("/"), but this binds the values into columns.
As a sample array I have : ( this is a response from a service )
Info [3]
[0] Object
name: "name",
surname: "surn"
[1] Object
address: "address",
phone: "22",
key: "val"
key2: "val2"
[2] Object
info: "information",
system: "sys",
data:"data here"
And I need a table( or a list ):
Key Value
name name
surname surn
phone 22
system sys
info information
You basically have to convert your Array. Please check below running example.
oData.forEach(function(data){
var keys = Object.keys(data);
keys.forEach(function(key){
oData_new.push({'key':key,'value':data[key]});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m"></script>
<script>
var oData = [{
name: "name",
surname: "surn"
}, {
address: "address",
phone: "22",
key: "val",
key2: "val2"
},
{
info: "information",
system: "sys",
data: "data here"
}
];
var oData_new = [];
oData.forEach(function(data) {
var keys = Object.keys(data);
keys.forEach(function(key) {
oData_new.push({
'key': key,
'value': data[key]
});
});
});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData_new);
var aColumns = [
new sap.m.Column({
header: new sap.m.Label({
text: "Key"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "Value"
})
})
];
var oTable = new sap.m.Table({
columns: aColumns
});
oTable.setModel(oModel);
oTable.bindAggregation("items", {
path: "/",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: {
path: 'key'
}
}),
new sap.m.Text({
text: {
path: 'value',
}
})
]
})
});
oTable.placeAt('content');
</script>
<body id="content" class="sapUiBody">
</body>
</html>
I like the ag-Grid because it's less buggy, fast and works with many frameworks.
So I tried the Tree Data, no need to tell the link between parents and children, simply lay down the data in structure, specify some options, Bingo! But, when I plug in my API, it tells me
"TypeError: rowData is undefined"
from inside of ag-grid.js even though Watch clearly shows it has the array. There are some answered Question here regarding customization with internal api. Mine is not.
I then use the official demo as a base, set up a Fiddler to grab the raw data in JSON replace demo data to make it hardcoded for a test to determine if it's problem with own API or something else. Here is the Plunker. Note it's totally based on the official javaScript Demo of Tree Data, Tree Data Example, the first one.
In case you don't want to see Plunker, here is my .js:
var columnDefs = [
{headerName: "Client", field: "Client", cellRenderer: 'group'},
{headerName: "Program", field: "Program"}
/*{headerName: "Group", field: "xgroup", cellRenderer: 'group'}, // cellRenderer: 'group'}, -- this "group" is one of the default value option for built-in cellRenderer function, not field.
//{headerName: "Athlete", field: "athlete"},
//{headerName: "Year", field: "year"},
{headerName: "Country", field: "country"}
*/
];
var myData = [
{
'Client': 'Goodle',
'Program': 'no grid',
'kids': []
},
{
'Client': 'Facebrook',
'Program': 'grids',
'kids': [
{
'Client': 'Facebrook',
'Program': 'ag-Grid'
},
{
'Client': 'Facebrook',
'Program': 'ui-grid'
}
]
}
/*{xgroup: 'Group A',
participants: [
/*{athlete: 'Michael Phelps', year: '2008', country: 'United States'},
{athlete: 'Michael Phelps', year: '2008', country: 'United States'},
{athlete: 'Michael Phelps', year: '2008', country: 'United States'}*/
/*]},
{xgroup: 'Group B', athlete: 'Sausage', year: 'Spaceman', country: 'Winklepicker',
participants: [
{athlete: 'Natalie Coughlin', year: '2008', country: 'United States'},
{athlete: 'Missy Franklin ', year: '2012', country: 'United States'},
{athlete: 'Ole Einar Qjorndalen', year: '2002', country: 'Norway'},
{athlete: 'Marit Bjorgen', year: '2010', country: 'Norway'},
{athlete: 'Ian Thorpe', year: '2000', country: 'Australia'}
]},
{xgroup: 'Group C',
participants: [
{athlete: 'Janica Kostelic', year: '2002', country: 'Crotia'},
{athlete: 'An Hyeon-Su', year: '2006', country: 'South Korea'}
]}*/
];
var gridOptions = {
columnDefs: columnDefs,
rowData: myData,
rowSelection: "single",
enableSorting: "true", unSortIcon: "true",
enableColResize: "true",
enableRangeSelection: "true",
suppressCellSelection: "false",
showToolPanel: "true",
supressCopyRowsToClipboard: true,
supressCellSelection: false,
getNodeChildDetails: getNodeChildDetails,
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
};
function getNodeChildDetails(rowItem) {
if (rowItem.Client) {
return {
group: true,
// open C be default
//expanded: rowItem.ClientName === 'Group C',
// provide ag-Grid with the children of this group
children: rowItem.kids,
// this is not used, however it is available to the cellRenderers,
// if you provide a custom cellRenderer, you might use it. it's more
// relavent if you are doing multi levels of groupings, not just one
// as in this example.
//field: 'group',
// the key is used by the default group cellRenderer
key: rowItem.Client
};
} else {
return null;
}
}
function onFilterChanged(value) {
gridOptions.api.setQuickFilter(value);
}
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
HTML:
<html>
<head>
<!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
<script src="https://ag-grid.com/dist/ag-grid/ag-grid.js"></script>
<script src="script.js"></script>
</head>
<body>
<input placeholder="Filter..." type="text"
onpaste="onFilterChanged(this.value)"
oninput="onFilterChanged(this.value)"
onchange="onFilterChanged(this.value)"
onkeydown="onFilterChanged(this.value)"
onkeyup="onFilterChanged(this.value)"/>
<div id="myGrid" class="ag-fresh" style="height: 450px; margin-top: 4px;"></div>
</body>
</html>
Need some experts!
You need to alter getNodeChildDetails to have this:
function getNodeChildDetails(rowItem) {
if (rowItem.Client && rowItem.kids && rowItem.kids.length > 0) {
As you have it you're telling the grid that any item with Client is a parent node, but what you really mean in your data is any item with Client AND kids is a parent.
Remember that the grid can have multiple levels so a child can be a parent too.
A select element is a dropdown list in which an option may be selected.
The select element has the selectedItem which is a handle to the currently selected item. A selected item has a key that I bind to an identifying attribute in my JSON model.
Using an XML view declaration, I can use the change() event to fire code in the controller.
In the change() event how can I get the binding path of the selectedItem without having to search the model to match the key?
This is what I intuited but the second line throws an error.
onListSelect : function(event) {
console.log(event.oSource.getSelectedItem().getKey()) // works ok
var path = event.oSource.getSelectedItem().getBindingContext().getPath(); // Fails
}
EDIT: In response to input & comments I added the snippet to isolate the issue. In the course of doing so I find that there is no issue. The snippet works. Must have been my own mistake.
I shall erase the question shortly.
// JSON sample data
var data = {
"peeps": [
{className: "Coding 101", id: 100, firstName: "Alan", lastName: "Turing"},
{className: "Coding 101", id: 400, firstName: "Ada", lastName: "Lovelace"},
{className: "Combat 101", id: 300, firstName: "D", lastName: "Trump"},
{className: "Combat 101", id: 700, firstName: "Spartacus", lastName: ""},
{className: "Combat 101", id: 900, firstName: "Tasmanian", lastName: "Devil"}
]
};
sap.ui.getCore().attachInit(function() {
"use strict";
sap.ui.controller("MyController", {
onInit: function() {
// create JSON model instance
var oModel = new sap.ui.model.json.JSONModel();
// set the data for the model
oModel.setData(data);
// set model to core.
sap.ui.getCore().setModel(oModel);
},
onListSelect : function(event) {
console.log(event.getSource().getSelectedItem().getKey()); // works ok
var path = event.getSource().getSelectedItem().getBindingContext().getPath(); // Fails
console.log("Path=" + path)
var oModel = sap.ui.getCore().getModel()
var theName = oModel.getProperty(path)
console.log("You selected " + theName.lastName)
}
});
sap.ui.xmlview({
viewContent: jQuery("#myView").html()
}).placeAt("content");
});
<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>
<script id="myView" type="ui5/xmlview">
<mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:layout="sap.ui.commons.layout" xmlns:f="sap.ui.layout.form">
<Select id="theList" forceSelection="false" wisth="auto" change="onListSelect" items="{
path: '/peeps',
sorter: { path: 'lastName' }
}" class="sapUiResponsiveMargin">
<core:Item key="{id}" text="{lastName}" />
</Select>
</mvc:View>
</script>
<body class="sapUiBody">
<div id="content"></div>
</body>
Check following XML and JS code :
XML Code :
`<Select id="id_Select"
forceSelection="false"
selectedKey="{/Data/0/key}"
change="fnSelectChange"
items="{/Data}" >
<core:Item key="{key}" text="{name}" />
</Select>`
JS Code :
fnInputHandel : function(){
oSelectJSON = new sap.ui.model.json.JSONModel();
var Data = {
Data : [{
name : "name1",
key : "key1"
},{
name : "name2",
key : "key2"
}]
}
oSelectJSON.setData(Data);
this.getView().byId("id_Select").setModel(oSelectJSON);
},
fnSelectChange : function(oEvent){
var value = oEvent.oSource.getSelectedItem().getBindingContext().getPath();
},