I want to rename the column headers of my table when I change the size of the page.
I have tried detecting the width of the screen and then added the if conditions according to which I want to change the Column header. But the problem is as I have set the minimum screen width as desktop and my code is only responding if my width of the page go lower than 1024px else it is not responsive.
var oTable = that.getView().byId("monTable");
oTable.addEventDelegate({
"onAfterRendering": function () {
if (that.getView().$().width() < 1764) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("Fehler");
that.getView().byId("monTable").getColumns()[7].getHeader().setText("Warnung");
}
if (that.getView().$().width() < 1520) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("Fehler");
that.getView().byId("monTable").getColumns()[7].getHeader().setText("Warnung");
that.getView().byId("monTable").getColumns()[9].getHeader().setText("MG");
}
if (that.getView().$().width() < 1404) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("Fehler");
that.getView().byId("monTable").getColumns()[7].getHeader().setText("WN");
that.getView().byId("monTable").getColumns()[13].getHeader().setText("Status");
}
if (that.getView().$().width() < 1356) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("Fehler");
that.getView().byId("monTable").getColumns()[7].getHeader().setText("WN");
that.getView().byId("monTable").getColumns()[13].getHeader().setText("Status");
}
if (that.getView().$().width() < 1278) {
that.getView().byId("monTable").getColumns()[12].getHeader().setText("FG");
that.getView().byId("monTable").getColumns()[13].getHeader().setText("Status");
}
if (that.getView().$().width() < 1206) {
that.getView().byId("monTable").getColumns()[6].getHeader().setText("FH");
that.getView().byId("monTable").getColumns()[13].getHeader().setText("ST");
}
}
The expected result should change the header according to the width I have set in my if conditions but it is not responding. But if you reload the page after changing the screen with then every time it is responding.
You could use a ResizeHandler (https://sapui5.hana.ondemand.com/#/api/sap.ui.core.ResizeHandler/methods/sap.ui.core.ResizeHandler.register) to call the function everytime the window changes.
ResizeHandler.register(this.getView().byId("xyz"), this._onResize.bind(this));
The _onResize method then contains the logic you have posted regarding the change of the texts.
The control you attach it to could be your sap.m.Page or whatever your container is.
For this to work you would also need to require sap/ui/core/ResizeHandler as ResizeHandler.
Related
I am using a PreloadPageView to display WebViews whose content vary in length. I would like to be able to inform the user when there is more content below on WebViews which are scrollable. I have played around with the controller scroll methods and with some JS evaluations, but to no avail. Wish there was a controller.isScrollable() method!
You can get the DOM height.
Call this in the webview' s onLoadStop function:
controller
.evaluateJavascript(source: '''(() => { return document.documentElement.scrollHeight;})()''')
.then((scrollHeight) {
final widgetHeight = _webViewKey.currentContext?.size?.height ?? 0;
// compare scrollHeight to widgetHeight
});
I want to change the style of a row dynamically in ag-grid. What I'm trying to achieve is to change the background color of my ag-grid row if the row has been edited by the user.
cellValueChanged(event) {
//Add it only if the old value has changed
if (event.oldValue != event.newValue) {
// This will replace with latest edited value if it has been edited already
this.edittedRows[event.rowIndex.toString()] = event.data;
}
}
I'm keeping track of the edited row by listening to cellValueChanged event. I need to change the row style here.
I've looked into ag-grid documentation and found how to add row styles, row classes and row class rules but I could't find a way to add a style to a row dynamically when the user has changed something on it.
By using redrawRows I was able to achieve this.
First I added rowClassRules for my grid options like below
private initGrid() {
this.gridOptions.rowClassRules = {
'modified' : this.isEditedRow()
};
}
private isEditedRow() {
return (params) => {
return params.data.edited;
}
}
modified is my css class which has all the styles for an edited row.
Then in my row data I'm adding a new property edited.
And changed the cellValueChanged as below,
cellValueChanged(event) {
//Add it only if the old value has changed
if (event.oldValue != event.newValue) {
// This will replace with latest edited value if it has been edited already
// Setting edited flag to change the background
event.data.edited = true;
this.edittedRows[event.rowIndex.toString()] = event.data;
let row = this.gridApi.getDisplayedRowAtIndex(event.rowIndex);
this.gridApi.redrawRows({ rowNodes: [row] });
}
}
Find the documentation for redrawRows here.
Add below line in your CellValueChanged Function:
gridOptions.rowStyle = {background: 'coral'};
cellValueChanged(event) {
//Add it only if the old value has changed
if (event.oldValue != event.newValue) {
// This will replace with latest edited value if it has been edited already
this.edittedRows[event.rowIndex.toString()] = event.data;
gridOptions.rowStyle = {background: 'coral'};
}
}
Plunker - https://plnkr.co/edit/i1K3YXpGGgNEOU2JjZCf?p=preview
I am developing iphone application.
need to display 5 records at a time
and when i reached page end then the next 5 records will need to load using automatic scrolling.
initial 5 records display done.
Scroll not working when i reach page end.
Can any one.
I found the solution. my code as follows,
myTable.addEventListener('scroll', function(e){
if (Ti.Platform.osname === 'iphone')
{
var offset = e.contentOffset.y;
var height = e.size.height;
var total = offset + height;
var theEnd = e.contentSize.height;
// this condition will check whether the scroll reach end or not?
if (theEnd == total)
{
//call the function once again.
loadContents();
}
}
});
I hope... some one will use it.
#Suresh.g
You Can use "ScrollView" with property "contentHeight :Ti.UI.Size (or "Auto")".
When you use "ScrollView" it set default height on your requirement.
You can also enable for
showHorizontalScrollIndicator : true,
for more information read this blog
I have the following problem: I need to add an event listener for an iframe (a Facebook comment box) when it changes its height.
I can not access or change the contentWindow because it is cross domain. But there must be a callback function or something that changes the height attribute.
Is there a way to add an event listener on attribute changes or something? I alreade tried onResize and onChange.
I'm getting crazy with that... Anyone has an idea?
Thank you so much!!
Short answer: No.
However, you can use "postMessage" and "receiveMessage" to send from one iframe to another cross domain. (Of course, only if you have access to the iframed content - I suspect not as it's on facebook.)
In any case... for future help....
(on the iframed page)
var ii = {}
ii.window_height = 800;
var sendHeight = function () {
var window_height = $('body').outerHeight(true);
if (window_height != ii.window_height) {
ii.window_height = window_height;
window.parent.postMessage(ii.window_height, "http://containerDomain.com");
}
}
setInterval(sendHeight, 2000);
(on the container page)
function receiveMessage(evt) {
if (evt.origin === 'https://iframedDomain.com')
{
var iframe_content_height = evt.data;
$('#iframe_form').animate({height: iframe_content_height });
}
}
if ($.browser.msie) {
window.attachEvent('onmessage', receiveMessage);
} else {
window.addEventListener('message', receiveMessage, false);
}
Remember to change the domains in each script.
Note: that's using jQuery - It works, but I'm sure someone can write that better then me? Also not too proud of the interval checking the height... might update if i can.
I would like to have a fixed element (a DIV) in the iFrame for my Facebook Application. So when the user scrolls down the page, that element is still fixed on the top of the browser window?
The basic: You add stuff to a bag, while you are scrolling down, and a fixed DIV will show you your "score" while you add these things to the bag. The "score counter" should always be visible while scrolling.
Thank you!
This is not possible if you are using facebook's iframe auto-resize features. Once the iframe is resized so that scrolling is not necessary, the only scroll available will be the one of the parent window. However, the child iframe has no information about the scroll of the parent window (since they are not on the same domain...) and trying to listen to scroll events or scroll position will only return that the scrollbar is at position 0, or topmost.
You can however listen to click events and extract the offset of the click event or the clicked element.
Some examples:
$('.clickme').click(function(e) {
e.preventDefault();
var top;
// Using click position (e.pageY and e.pageX available)
top = e.pageY;
// Using clicked element position
top = $(this).offset().top;
$('#moveme').css({'top': top - 100 + 'px'}); //
}
Maybe you can base your interaction on this principle instead?
I don't know about you Erik but this really doens not help me much.
Could FB.Canvas.getPageInfo help?
Maybe that would help : I was ussing
(function() {
var el = $("header:first");
var elpos_original = el.offset().top;
$(window).scroll(function(){
var elpos = el.offset().top;
var windowpos = $(window).scrollTop();
var finaldestination = windowpos;
if(windowpos<elpos_original) {
finaldestination = elpos_original;
el.stop().css({'top':0});
} else {
el.stop().animate({'top':finaldestination-elpos_original},0);
}
});
})();