cancel
Showing results for 
Search instead for 
Did you mean: 

Data binding for nested controls/elements

Former Member
0 Kudos

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

Accepted Solutions (1)

Accepted Solutions (1)

former_member182650
Contributor
0 Kudos

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!

former_member293602
Active Participant
0 Kudos

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

Former Member
0 Kudos

@Frank, @Angel, thank you both so much... works perfectly.  Have a better understanding on binding now thanks to you too!

Answers (0)