SAPUI5 - Table rerenders after data call - sapui5

I am using sap.m.Table to display some documents as a sap.m.Dialog.The UI looks as below:
Everything works as expected but when I scroll to the last Item (growing=true) the table rerenders and moves back to the top. Ideally that would happen only when I refresh a model. I am using bindAggregation to bind the odataModel to the UI. Please see a snippet below (Note:Partial snippet).
var dialog = new Dialog({
title: title,
buttons: [
new sap.m.Button({
text: "{i18n>close}",
press: function(oEvt) {
dialog.close();
}
})
]
});
var table = new sap.m.Table({
width: "100%",
inset: true,
growing: true,
growingThreshold: 100,
growingScrollToLoad: true
})
dialog.addContent(table);
if (!dialog.isOpen()) {
dialog.open();
}
var oDModel = new ODataModel(kmURL, {
json: true
});
oDModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
table.setModel(oDModel);
var mParams = {
path: "/DocumentQuerySet",
template: template,
};
table.bindAggregation("items", mParams);
I think that bindAggregation internally refreshes the model which forces the table to rerender after every data call. How can I avoid the model to refresh/rerender the table so that it does not scroll to the top every time the user scrolls down to see more data.
Appreciate any help.
Thanks.

You could fix this problem by placing the Table control within a ScrollContainer. The ScrollContainer will handle the growing feature of the table, which causes the change in height of the control. This will retain the current position without moving back to the top.
....
var table = new sap.m.Table({
width: "100%",
inset: true,
growing: true,
growingThreshold: 100,
growingScrollToLoad: true
})
var oScroll = new sap.m.ScrollContainer({
width: "100%",
height: "500px",
vertical: true,
content: table
})
dialog.addContent(oScroll);
....

Related

SapUi5 TreeTable is different rendered within jQuery.getJSON() call

I create several treetables, each is placed on it's own div.
The main reproducable problem i've got:
creating the tables directly -> everything looks fine (see image 1)
creating the tables within an asynchron jQuery call: the first added table gets always a vertical scrollbar (see image 2)
here is the code:
var oData = { root: ...}
// code for image 2
jQuery.getJSON(url, function (result) {
createTable(oData['table1'], 'table1')
createTable(oData['table2'], 'table2')
})
// code for image 1
createTable(oData['table1'], 'table1')
createTable(oData['table2'], 'table2')
function createTable(oData, codeSample){
var oTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({label: "trans_class", template: "trans_class"})
, new sap.ui.table.Column({label: "Checked", template: "checked"})
],
height: '100%',
selectionMode: sap.ui.table.SelectionMode.None,
enableColumnReordering: false,
expandFirstLevel: false,
visibleRowCount : INITIAL_ROW_COUNT_IN_TABLE,
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
toggleOpenState: function(oEvent) {
var isLeafExpanded = oEvent.getParameter("expanded");
if(isLeafExpanded){
oTable.setVisibleRowCount(oTable.getVisibleRowCount() + 2)
SUM_INDEX_TOGGLE = SUM_INDEX_TOGGLE + 2
}else{
oTable.setVisibleRowCount(oTable.getVisibleRowCount() - 2)
SUM_INDEX_TOGGLE = SUM_INDEX_TOGGLE - 2
}
}
})
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
oTable.setModel(oModel);
sap.ui.getCore().setModel(oModel, codeSample);
oTable.bindRows("/root");
oTable.expand(4); // expand Sum Row
//Bring the table onto the UI
oTable.placeAt(codeSample);
}
How can I fix this issue. I want that all my tables look the same.
Workaround: add a simple textField and hide it after adding the treeTable:
addSimpleHiddenTextField(HIDDEN_TEXTFIELD)
for(var i in config.TABLES){
createTableAndPlaceIt(result[i], i, config.TABLES[i])
}
hideSimpleTextField(HIDDEN_TEXTFIELD)

Get ColumnListItem index sapui5

How can I get index of pressed ColumnListItem? I want to get and pass to controller method.
View code:
var oTable = new sap.m.Table({
id: "Countries",
mode: sap.m.ListMode.None,
columns: [ new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Name"
})
})
]
});
var template = new sap.m.ColumnListItem({
id: "first_template",
type: "Navigation",
visible: true,
selected: true,
cells: [ new sap.m.Label({
text: "{name}"
})
],
press: [oController.pressListMethod]
});
oTable.bindItems("/eventos", template, null, null);
oPage.addContent(oTable);
Controller code:
pressListMethod: function(index){
var oData = sap.ui.getCore().getModel().getProperty("/eventos/"+index+"/name");
alert(oData);
}
You shouldn´t rely on the index since the index in the table can differ from the index in your model (e.g. due to filtering and sorting).
You can read the bindingContext of the pressed ListItem like this:
pressListMethod: function(event){
var bindingContext = event.getSource().getBindingContext();
}
The bindingContext is an artificial object containing the related model and a path of the object within the model.
You can then read properties of your object like this:
var name = bindingContext.getProperty("name");
To get the whole object you can do it like this:
var myObject = bindingContext.getObject();
To get exact value of product
SelectedRowContext.getObject('PRODUCT_ID')
To get Name of product
SelectedRowContext.getObject('NAME')

Change Kendo grid row on click

I'm hoping someone can offer help in this. I have a Kendo grid in a html document (no MVC), and am wanting to change the class of the entire row on row select. I have tried various approaches, still with no luck. I am currently at:
// within kendo grid definition - grid called '#grid'
change: function (e) {
$("#grid tbody").find("tr[k-state-selected]").css("color", "black");
var id = $("#grid").closest("tr").css("color", "black");
CallDocument(this._data[0]);
},
The function CallDocument is being fired, and so I know I can at least get to the function.
EDIT: Here is the solution that I came up with, and thanks to everyone
change: function (e) {
$("#grid tbody").find("tr.k-state-selected").attr("class", "detail read k-state-selected");
},
I needed to use the 'tr.k-state-selected' form, and change using attr in order to change the set of classes.
To mark every visited row as selected, you might add a CSS class on change event.
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : false,
pageable : true,
selectable: true,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
],
change : function (e) {
this.select().addClass("ob-selected");
}
}).data("kendoGrid");
The class ob-selected stays when you move to another cell since this does nothing to do with KendoUI.
Example here : http://jsfiddle.net/2TGLp/1/
The only question is that it does not stay selected if you apply filters, change to a different page... but not sure if this is important for you.
I override my Kendo styles using both css and javascript (depending on the scenario).
CSS:
.k-state-selected {
color: black;
}
Javascript/jQuery:
$('k-state-selected').css('color', '#000000')

How to destroy() my popup correctly in Sencha Touch

I am having difficulties implementing the destroy method on my popup. Everything works fine, the below code works for having one popup that changes its contents depending what is clicked on. But I notice that my content (media) still plays when hiding the popup. I'd like to destroy it completely, and re-create on click. I've not really found anything in the forums that helps me achieve this, so I think it will help others too :-)
There are a couple of things confusing me, as there is already a click listener on the markers, which initiates the popup, where should I put the destroy code? Should I be declaring it as a separate function outside the popup, then calling it on beforehide somehow?
function addMarker(country)
{
if (true)
{
var image = new google.maps.MarkerImage(country.image48Path);
var marker = new google.maps.Marker({
map: map.map,
title: country.title,
position: country.position,
//draggable: true,
icon:image
});
var goToCountryWrapper = function (button, event)
{
goToCountry(country, this.popup);
};
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{ ---> Should I be placing destroy code here?
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 800,
height: 600,
styleHtmlContent: true,
scroll: 'vertical',
items:[(new countryOverlay(country)).overlayPanel,
{
xtype:'button',
margin: 20,
ui:'action-round',
text:'Click here to view more promo videos',
handler:goToCountryWrapper,
scope : this
},],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: country.title
}],
---> Should I be placing a listener here for beforehide, destroying here?
});
};
this.popup.show('pop');
});
}
};
---> Should I be placing the destroy code after, as a seperate function?
Thanks,
Digeridoopoo
I presume you want to destroy it when you hide the popup? If so, you should listen tot he hide event and then destroy it then.
this.popup.on('hide', function() {
this.popup.destroy();
}, this);
Check this
hideOnMaskTap:true,
listeners : {
hide: function() {
this.destroy();
}
},

Browse button in ExtJS

I need to have a browse button in a window. I need something like...
var myWindow = new Ext.window.Window({
id:'my-window',
height: 200,
width: 400,
layout: 'fit',
buttons:[browseButton]
});
So I guess I can't use the filefield in there since I need it to be in the window's button config.
Is there any button or maybe a handler I can use to create a button that pops up a browse window like the ones in filefield do?
You can set a config item on the field to only show the button for example, this works:
myButton = Ext.create('Ext.form.field.File', {
buttonOnly: true,
hideLabel: true,
listeners: {
'change': function(button, value){
alert('Selected: '+ value);
}
}
});
// your window example
var myWindow = new Ext.window.Window({
id:'my-window',
height: 200,
width: 400,
layout: 'fit',
buttons:[myButton]
});
myWindow.show();