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: 

onAfterRendering of TableSelectDialog is not calling

Go to solution
VenkyM
Participant

on ‎02-27-2019 11:51 AM

0 Kudos

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.

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

former_member182862
Active Contributor
‎02-28-2019 2:08 AM
0 Kudos

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");
Show replies
Show replies
VenkyM
Participant
‎02-28-2019 3:34 AM
0 Kudos

Hi Dennis Seah,

Thank you for response and it works now.

Regards,

venkatesh.

VenkyM
Participant
‎02-28-2019 6:25 AM
0 Kudos

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.

Answers (2)

Answers (2)

former_member182862
Active Contributor
‎03-01-2019 5:51 PM
0 Kudos

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", {
Show replies
Show replies
VenkyM
Participant
‎03-04-2019 5:07 AM

Hi Dennis,

Thanks for your inputs, I identifed the problem and the problem was with "this" context.

I corrected it and it is working fine.

Best Regards,

venkatesh.

former_member182862
Active Contributor
‎02-28-2019 5:24 PM
0 Kudos

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">
Show replies
Show replies
VenkyM
Participant
‎03-01-2019 3:58 AM
0 Kudos

Hi Dennis,

It is typo issue, I updated the code. I am not sure why the ColumnPress event is not triggering after the dilaog is opened.

Please check now.

Regards,

Venkatesh.

Ask a Question