cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Is it possible to use addEventDelegate for register onAfterRendering for entire view instead of individual controls?

Go to solution
srinujava
Participant

on ‎10-16-2015 6:35 AM

0 Kudos

example: i have  in my page i have 3 tables like oTable1,oTable2,oTable3 and some other openui5 controls.

now      oTable1.addEventDelegate({

           onAfterRendering: function(){

                    alert(" table1 rendered");

          }

          }, this);

instead of doing similer things to all controls .can i do for entire page

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

dunayevsky_yuri
Participant
‎10-18-2015 9:52 AM
0 Kudos

I don't think it is possible to move all your addEventDelegate functions from each control to one place.

The only way I can think of  - is to use onAfterRendering function of the controller, but even then you'll have to call each desired control by its id, which doesn't seem like a good idea.

Cheers.

Show replies
Show replies

Answers (3)

Answers (3)

Former Member
‎10-16-2015 9:26 AM
0 Kudos

Hi,

Can you check this link, After render table, it throws alert.

link: JS Bin - Collaborative JavaScript Debugging

Show replies
Show replies
srinujava
Participant
‎10-16-2015 9:54 AM
0 Kudos

   oTable.onAfterRendering = function(){

          alert("df")

         };

i want after rendring of entire page not single table.

becasue my page may contain multiple tables

Former Member
‎10-16-2015 10:23 AM
0 Kudos

Hi,

this is triggered using jquery, try this

onInit : function() {
   this.getView().addEventDelegate({
  onAfterShow : jQuery.proxy(function(evt) {
   this.onAfterShow(evt);
   }, this)
   });
},


onAfterShow : function(evt) {

//T

   }

former_member182862
Active Contributor
‎10-18-2015 12:40 AM
0 Kudos

Please do not use Pradeep's solution.

He is overriding the table onAfterRendering function, where he does

oTable.onAfterRendering = function() {

...

};

From the jsbin, you can see that the table is not rendered correctly.

Thanks

-D

former_member183518
Active Participant
‎10-16-2015 7:06 AM
0 Kudos

yes, you can. Just add the delegate in your view instance. In the onInit of the controller, you can do as below.



this.getView().addEventDelegate({


     onAfterRendering : function(){


          console.log("view rendered");


     }


});
Show replies
Show replies
srinujava
Participant
‎10-16-2015 7:29 AM
0 Kudos

Hi Sakthivel i have tried the above code given by you.But it is not working for me

saivellanki
Active Contributor
‎10-16-2015 7:44 AM
0 Kudos

Hi Srinivas,

Are you using JS view? If so, in your createContent() method try 




this.addEventDelegate({


onAfterRendering: function(oEvent){


console.log("view rendered");


     }


},this);

Regards,

Sai Vellanki.

former_member183518
Active Participant
‎10-16-2015 7:58 AM
0 Kudos

Can't help much without you providing any info on how your code is.

Check out the working example - JS Bin - Collaborative JavaScript Debugging

Can you try to reproduce the issue ?

srinujava
Participant
‎10-16-2015 8:27 AM
0 Kudos

dragndropwithmvc.jsp

<!DOCTYPE html>

<meta charset="utf-8">

    <script id='sap-ui-bootstrap' type='text/javascript'

        src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'

        data-sap-ui-theme='sap_bluecrystal'

        data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.layout,sap.ui.ux3,sap.m">

    </script>

         <script>

    // Include jquery UI plugins

    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');

    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');

    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');

    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');

    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');

  </script>

<script>

  sap.ui.localResources("oui5mvc");

    sap.ui.jsview("oui5mvc.dragndropwithmvc");

</script>

<body class="sapUiBody" role="application">

        <div id="content"></div>

        <div id="sample1"></div>

    </body>

dragndropwithmvc.view.js


var oTable=null;

sap.ui.jsview("oui5mvc.dragndropwithmvc", {

    

    getControllerName : function() {

   

        return "oui5mvc.dragndropwithmvc";

    },

    createContent : function(oController) {

       

        var oTextView = new sap.ui.commons.TextView();

        oTextView.setText("A simple text to be displayed.");

        oTextView.setTooltip("Some Tooltip");

        // attach it to some element in the page

        oTextView.placeAt("content");

       

        //Create an instance of the table control

         oTable = new sap.ui.table.TreeTable({

              id : "oTable",

            columns: [

                new sap.ui.table.Column({label: "Name", template: "name"}),

                new sap.ui.table.Column({label: "Description", template: "description"})

            ],

            selectionMode: sap.ui.table.SelectionMode.Single,

            // selectionBehavior: sap.ui.table.SelectionBehavior.Row,

            enableColumnReordering: true,

            expandFirstLevel: true,

            toggleOpenState: function(oEvent) {

                var iRowIndex = oEvent.getParameter("rowIndex");

                var oRowContext = oEvent.getParameter("rowContext");

                var bExpanded = oEvent.getParameter("expanded");

                alert("rowIndex: " + iRowIndex +

                        " - rowContext: " + oRowContext.getPath() +

                        " - expanded? " + bExpanded);

            }

        });

   

    }

});

dragndropwithmvc.controller.js

sap.ui.controller("oui5mvc.dragndropwithmvc", {

    onInit: function() {

       

       

        this.getView().addEventDelegate({ 

             onAfterRendering : function(){ 

                 alert(this.getView());

             } 

        });

    /*    oTable.addEventDelegate({

              onAfterRendering: function(){

                  alert();

                   $("#oTable tbody tr").draggable({

                             helper: "clone"

                         });

              }

            }, this);*/

       

        //Define some sample data

        var oData = {

                root:{

                    name: "root",

                    description: "root description",

                    checked: false,

                    0: {

                        name: "item1",

                      description: "item1 description",

                      checked: true,

                        0: {

                            name: "subitem1-1",

                          description: "subitem1-1 description",

                          checked: true,

                            0: {

                                name: "subsubitem1-1-1",

                                    description: "subsubitem1-1-1 description",

                                    checked: true

                            },

                            1: {

                                name: "subsubitem1-1-2",

                                    description: "subsubitem1-1-2 description",

                                    checked: true

                            }

                        },

                        1: {

                            name: "subitem1-2",

                          description: "subitem1-2 description",

                                checked: true,

                            0: {

                                name: "subsubitem1-2-1",

                                    description: "subsubitem1-2-1 description",

                                    checked: true

                            }

                        }

                       

                    },

                    1:{

                        name: "item2",

                      description: "item2 description",

                      checked: true,

                        0: {

                            name: "subitem2-1",

                          description: "subitem2-1 description",

                          checked: true

                        }

                    },

                    2:{

                        name: "item3",

                      description: "item3 description",

                      checked: true

                    }

                   

                }

        };

        for (var i = 0; i < 20; i++) {

            oData["root"][2][i] = {

                name: "subitem3-" + i,

                    description: "subitem3-" + i + " description",

                    checked: false

            };

        }

        this.drawTable(oData);

    },

   

    drawTable: function(oData) {

        //alert(JSON.stringify(oData));

        var oModel = new sap.ui.model.json.JSONModel();

        oModel.setData(oData);

        oTable.setModel(oModel);

        oTable.bindRows("/root");

        oTable.placeAt("sample1");

       

    },

   

    onAfterRendering: function() {

       

    },

});

i want to use jquery draggable and droppable

in this code i put one table only but for my requirement i want to use 2 or more tables and other controls to.so that instead of add addEventDelegate to each control i would like apply jquery draggable and droppable after complete view is render

srinujava
Participant
‎10-16-2015 8:45 AM
0 Kudos

Hi Sai,

i have tried this also

this.addEventDelegate({ 

            onAfterRendering: function(oEvent){ 

            alert();

            console.log("view rendered"); 

                 } 

            },this);

but not working

former_member183518
Active Participant
‎10-16-2015 9:21 AM
0 Kudos

just try alert("Some dummy text"); the context of *this* would be different within the event handler.

saivellanki
Active Contributor
‎10-16-2015 9:57 AM
0 Kudos

Srinivas,

May I know the reason, why are you using placeAt method inside view and controller. I see your code inside the view as -



// attach it to some element in the page


oTextView.placeAt("content");

And in controller also, I see it as -  



drawTable: function(oData) {


        //alert(JSON.stringify(oData));


        var oModel = new sap.ui.model.json.JSONModel();


        oModel.setData(oData);


        oTable.setModel(oModel);


        oTable.bindRows("/root");


        oTable.placeAt("sample1");       


}

Remove the above placeAt methods from both and do in index.html as 



var oView = sap.ui.jsview("oui5mvc.dragndropwithmvc");


oView.placeAt("content");

After doing few changes in your code, addEventDelegate is able to hit. Check the sample here - Plunker

Regards,

Sai Vellanki.

srinujava
Participant
‎10-16-2015 10:00 AM
0 Kudos

Hi Sakthivel even alert is not coming

former_member182862
Active Contributor
‎10-18-2015 12:44 AM
0 Kudos

Hi

Sai's solution should work

http://jsbin.com/yeduzi/edit?html,js,output

Thanks

-D

Former Member
‎10-16-2015 7:04 AM
0 Kudos

I am not sure if I understand your problem right, but the views already have an event called onAfterRendering that does not need to be added manually.

Show replies
Show replies
Ask a Question