Skip to Content

onAfterRendering of TableSelectDialog is not calling

HI Team,

I have extended the sap.m.TableSelectDialog control and added one custom event.

The problem is onAfterRendering() event is not getting called.

Please guide me where I am doing wrong.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap" 
    type="text/javascript"
    data-sap-ui-libs="sap.m"
    data-sap-ui-theme="sap_bluecrystal" 
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script>
jQuery(function() {
    sap.m.TableSelectDialog.extend('CustomTableSelectDialog', {
        metadata: {
            events : {
                columnPress: {}
            }
        },
         onAfterRendering: function() {
		sap.m.TableSelectDialog.prototype.onAfterRendering.apply(this, arguments);
		console.log("onAfterRendering  called..");
            var that = this;
            function colClick(idx, col) {
                col.css('cursor', 'pointer');
                col.children().each(function() {
                    $(this).css('cursor', 'pointer');
                });
                col.click(function() {
                    that.fireColumnPress({'columnIndex': idx});
                });
            }

            //sap.m.TableSelectDialog.prototype.onAfterRendering.apply(this, arguments);
            var count = 0;
            this.$().find('th.sapMListTblHeaderCell').each(function() {
                colClick(count++, $(this));
            });
        },
	renderer: function(oRm, oControl) {
            sap.m.TableSelectDialogRenderer.render(oRm, oControl);
        },
    });

    var oTable = new CustomTableSelectDialog({
       // mode: sap.m.ListMode.None,
        columns: [
            new sap.m.Column({
                header : new sap.m.Label({
                    text : "Last Name"
                })
            }),
            new sap.m.Column({
                header : new sap.m.Label({
                    text : "First Name"
                })
           })
        ],
        items: {
            path: "/", 
            template: new sap.m.ColumnListItem({
                cells : [ 
                    new sap.m.Text({text : "{lastName}"}), 
                    new sap.m.Text({text : "{firstName}"})
                ]
            })
        },
        columnPress: function(e) {
           console.log(e.getParameter('columnIndex'));
		   
        }
    });
    var oModel = new sap.ui.model.json.JSONModel();
    var users = [];
    for (var i = 0; i < 4; i++) {
        users.push({lastName: 'lastName' + i,  firstName: 'firstName' + i});
    }
    oModel.setData(users);
    oTable.setModel(oModel);
    oTable.placeAt("content");
	
	var oButton= new sap.m.Button({
	text:"Open Table select Dialog",
	press:function(){
	
	oTable.open();
	}
	
	});
	
	oButton.placeAt("content");
});
</script>

</head>
<body class="sapUiBody">
    <div id="content"></div>
</body>
</html>

Reagrds,

venkatesh.

Add a comment
10|10000 characters needed characters exceeded

Related questions

3 Answers

  • Best Answer
    Posted on Feb 28, 2019 at 02:08 AM

    HI Venkatesh

    The dialog does not render anything hence onAfterRendering function will not be called. You can try this.

    sap.m.TableSelectDialog.extend('CustomTableSelectDialog', {
      metadata: {
        events : {
          columnPress: {}
        }
      },
      renderer: {},
      open: function() {
        sap.m.TableSelectDialog.prototype.open.apply(this, arguments);
        if (!this._initColumnPress) {
          var that = this;
          function colClick(idx, col) {
            col.css('cursor', 'pointer');
            col.children().each(function() {
              $(this).css('cursor', 'pointer');
            });
            col.click(function() {
              that.fireColumnPress({'columnIndex': idx});
            });
          }
    
    
          var count = 0;
          this.$().find('th.sapMListTblHeaderCell').each(function() {
            colClick(count++, $(this));
          });
        }
        this._initColumnPress = true;
      }
    });
    
    
    var oTable = new CustomTableSelectDialog({
      title: "Test",
      columns: [
        new sap.m.Column({
          header : new sap.m.Label({
            text : "Last Name"
          })
        }),
        new sap.m.Column({
          header : new sap.m.Label({
            text : "First Name"
          })
        })
      ],
      items: {
        path: "/", 
        template: new sap.m.ColumnListItem({
          cells : [ 
            new sap.m.Text({text : "{lastName}"}), 
            new sap.m.Text({text : "{firstName}"})
          ]
        })
      },
      columnPress: function(e) {
        console.log(e.getParameter('columnIndex'));
      }
    });
    var oModel = new sap.ui.model.json.JSONModel([0, 1, 2, 3].map(function(i) {
      return {lastName: 'lastName' + i,  firstName: 'firstName' + i};
    }));
    oTable.setModel(oModel);
    
    
    (new sap.m.Button({
      text:"Open Table select Dialog",
      press:function(){
        oTable.open();
      }	
    })).placeAt("content");
    
    
    
    Add a comment
    10|10000 characters needed characters exceeded

    • Hi Dennis,

      I have used the above custom control in my project and the problem is the event is not triggering.

      Code inside CustomTableSelectDialog.js is calling only when I am opening my TableSelectDialog initially, when I click on the column after TableSelectDialog is opened , ColumnPress event is not triggering.

      Please suggest where I am wrong.

      Please find the code below:

      CustomTableSelectDialog.js:

      sap.ui.define([
      	"sap/m/TableSelectDialog"
      ], function(TableSelectDialog) {
      	"use strict";
      	return TableSelectDialog.extend("com.test.controls", {
      		metadata: {
      			events: {
      				columnPress: {}
      			}
      		},
      		renderer: {},
      		open: function() {
      			/*eslint-disable */
      			TableSelectDialog.prototype.open.apply(this, arguments);
      			if (!this._initColumnPress) {
      				var that = this;
      				function colClick(idx, col) {
      					col.css('cursor', 'pointer');
      					col.children().each(function() {
      						$(this).css('cursor', 'pointer');
      					});
      					col.click(function() {
      						that.fireColumnPress({
      							'columnIndex': idx,
      							'columnName': col.context.innerText
      						});
      					});
      				}
      				var count = 0;
      				this.$().find('th.sapMListTblHeaderCell').each(function() {
      					colClick(count++, $(this));
      				});
      			}
      			this._initColumnPress = true;
      		}
      	});
      });
      <br>

      My Fragment: (where I am using this Custom control):

      <core:FragmentDefinition
          xmlns="sap.m"
          xmlns:core="sap.ui.core"
          xmlns:custom="com.test.controls">
          <custom:CustomTableSelectDialog
              columnPress="onColumSelectFilter">
              <ColumnListItem>
                  <cells>
                      <ObjectIdentifier title="{FirstName}" width="20%"/>
                      <Text text="{age}" width="10%" />  
                  </cells>
              </ColumnListItem>
              <custom:columns >
                  <Column>
                     <header>
                          <Text text="Name"/>
                      </header>
                  </Column>
                  <Column
                      minScreenWidth="Tablet"
                      demandPopin="true"
                      hAlign="Right">
                      <header>
                          <Text text="Age" />
                      </header>
                  </Column>
              </custom:columns>
          </custom:CustomTableSelectDialog>
      </core:FragmentDefinition>
      <br>

      Best regards,

      venkatesh.

  • Posted on Feb 28, 2019 at 05:24 PM

    hi

    xmlns:custom="com.test.controls">

    and

    return TableSelectDialog.extend("aklc.cm.components.partners.controls.CustomTableSelectDialog", {

    do not match

    should the former be

    xmlns:custom="aklc.cm.components.partners.controls">
    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Mar 01, 2019 at 05:51 PM

    sorry I cannot debug code for you, you have to do it yourself.

    this is definitely wrong

    return TableSelectDialog.extend("com.test.controls", {

    should be something like

    return TableSelectDialog.extend("com.test.controls.CustomTableSelectDialog", {
    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.