Skip to Content
Former Member
Jan 30, 2014 at 09:27 PM

Data binding for nested controls/elements


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

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


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();