on 01-30-2014 9:27 PM
Hi community, I have a TreeTable and I have 1 column defined (for this example). The column has a template that defines a button. This button in turn, when clicked, opens a dialog that renders an HTML element. I have a model that I bind the tree to. The button template itself, seems to display the correct properties bound to my data model, but as soon as I have a nested control within the button (or control that gets invoked upon press), i.e) dialog with html, I cannot manage to bind properties for those controls. You can see below, the openFirstDialog() call creates a dialog and then tries to bind the 'title' property to 'linkText' and also when it adds content of the html1 object, that object tries to set its 'content' property to 'htmlContent' from the model, but to no avail. However, the button's text property binds fine.. I'm assuming all nested controls will honor the binding of the parent template object..... could someone kindly show me what I'm doing wrong?
Thank you!
Here is my source:
var oData = {
root : {
link : "root",
linkText : "root",
description : "root description",
checked : false,
0 : {
link : "Account.svc",
linkText : "Account",
htmlContent : "<iframe src='Account.svc/$metadata' width='600' height='400' ></iframe>",
description : "Account Odata Service Document",
checked : false,
expanded : false
},
1 : {
link : "ProductSelection.svc",
linkText : "ProductSelection",
htmlContent : "<iframe src='ProductSelection.svc/$metadata' width='600' height='400' ></iframe>",
description : "ProductSelection Odata Service Document",
checked : false,
expanded : false
}
}
};
//Create the button which should open the dialog
var oButton = new sap.ui.commons.Button("button2",{
text: "{linkText}", //linkText does resolve properly
lite: true,
// tooltip : new sap.ui.commons.Callout({ text: "{description}" }), // This does not work....... description does not resolve
tooltip : "{description}", // This works
press:function(){
openFirstDialog();
}
});
var html1 = new sap.ui.core.HTML("html1", {
content: "{htmlContent}", //this does not work... htmlContent does not resolve
preferDOM : false
}
);
//Function to create the first dialog
function openFirstDialog() {
var oFirstDialog = new sap.ui.commons.Dialog({modal: true, title: "{linkText}"});// linkText does not resolve
oFirstDialog.addContent(html1);
oFirstDialog.open();
};
var oTable1 = new sap.ui.table.TreeTable( {
columns : [
new sap.ui.table.Column( {
label : "Odata Service",
template : oButton
}),
],
selectionMode : sap.ui.table.SelectionMode.Single,
allowColumnReordering : true,
expandFirstLevel : false,
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
width : "auto"
});
// Create a model and bind the table rows to this model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
oTable1.setModel(oModel);
oTable1.bindRows("/root");
oTable1.placeAt("content");
Hi, Try this http://jsbin.com/UJazeBa/1/edit
I've modified:
- json data structure. table needs a binded collection.
- button event function. I've added an event parameter in order to retrieve bindingContext and model values.
var oData = {
root : {
link : "root",
linkText : "root",
description : "root description",
checked : false,
elements:
[ {
link : "Account.svc",
linkText : "Account",
htmlContent : "<iframe src='Account.svc/$metadata' width='600' height='400' ></iframe>",
description : "Account Odata Service Document",
checked : false,
expanded : false
},
{
link : "ProductSelection.svc",
linkText : "ProductSelection",
htmlContent : "<iframe src='ProductSelection.svc/$metadata' width='600' height='400' ></iframe>",
description : "ProductSelection Odata Service Document",
checked : false,
expanded : false
} ]
}
};
//Create the button which should open the dialog
var oButton = new sap.ui.commons.Button("button2",{
text: "{linkText}", //linkText does resolve properly
lite: true,
// tooltip : new sap.ui.commons.Callout({ text: "{description}" }), // This does not work....... description does not resolve
tooltip : "{description}", // This works
press:function(event){
openFirstDialog(event);
}
});
//Function to create the first dialog
function openFirstDialog(event) {
var oFirstDialog = new sap.ui.commons.Dialog({modal: true, title: event.getSource().getBindingContext().getProperty('linkText')});// linkText does not resolve
var html = new sap.ui.core.HTML({
content: event.getSource().getBindingContext().getProperty('htmlContent'), //this does not work... htmlContent does not resolve
preferDOM : false
}
);
oFirstDialog.addContent(html);
oFirstDialog.open();
};
var oTable1 = new sap.ui.table.TreeTable( {
columns : [
new sap.ui.table.Column( {
label : "Odata Service",
template : oButton
}),
],
selectionMode : sap.ui.table.SelectionMode.Single,
allowColumnReordering : true,
expandFirstLevel : false,
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
width : "auto"
});
// Create a model and bind the table rows to this model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
oTable1.setModel(oModel);
oTable1.bindRows("/root/elements");
oTable1.placeAt("content");
Hope this helps you,
Kind regards!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi,
here a slightly adjusted version that makes use of data binding. As the dialog control is not part of the existing control tree, I needed to set the model explicitly to the dialog. You can check this by using the key combination "Shift + Ctrl + Alt + S".
After this, I could do the binding for the dialog and HTML control "statically". The only thing left to do dynamicaly was setting the binding context according to the delected row.
var oData = {
root : {
link : "root",
linkText : "root",
description : "root description",
checked : false,
elements : [
{
link : "Account.svc",
linkText : "Account",
htmlContent : "<iframe src='Account.svc/$metadata' width='600' height='400' ></iframe>",
description : "Account Odata Service Document",
checked : false,
expanded : false
},
{
link : "ProductSelection.svc",
linkText : "ProductSelection",
htmlContent : "<iframe src='ProductSelection.svc/$metadata' width='600' height='400' ></iframe>",
description : "ProductSelection Odata Service Document",
checked : false,
expanded : false
} ]
}
};
//Create the button which should open the dialog
var oButton = new sap.ui.commons.Button("button2", {
text : "{linkText}", //linkText does resolve properly
lite : true,
// tooltip : new sap.ui.commons.Callout({ text: "{description}" }), // This does not work....... description does not resolve
tooltip : "{description}", // This works
press : function(event) {
openFirstDialog(event);
}
});
var oFirstDialog = new sap.ui.commons.Dialog({
modal : true,
title : "{linkText}"
});
var html = new sap.ui.core.HTML({
content : "{htmlContent}",
preferDOM : false
});
oFirstDialog.addContent(html);
//Function to create the first dialog
function openFirstDialog(event) {
oFirstDialog.setBindingContext(event.getSource().getBindingContext());
oFirstDialog.open();
};
var oTable1 = new sap.ui.table.TreeTable({
columns : [ new sap.ui.table.Column({
label : "Odata Service",
template : oButton
}), ],
selectionMode : sap.ui.table.SelectionMode.Single,
allowColumnReordering : true,
expandFirstLevel : false,
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
width : "auto"
});
// Create a model and bind the table rows to this model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
oTable1.setModel(oModel);
oFirstDialog.setModel(oModel);
oTable1.bindRows("/root/elements");
oTable1.placeAt("content");
oTable1.placeAt("content");
Regards, Frank
User | Count |
---|---|
80 | |
24 | |
11 | |
9 | |
7 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.