Skip to Content
0

Getting Error when trying to add rows to the sap.ui.table dynamically.

Feb 22 at 06:44 PM

80

avatar image
Former Member

Hi Friends,

I am new to Ui5, need help regarding the error when trying to add rows dynamically.

My requirement is to add the table rows dynamically on button press.

Designation Fname Lname age Dropdown Input Input Input

Designation field should be Dropdown and remaining three should be input enabled.

Following is the plunker referring

https://plnkr.co/edit/8YvXxk?p=preview

Following is the error getting

Form.controller.js:236 Uncaught TypeError: Cannot read property 'getModel' of undefined

please help me in this regards

Thanks,

Kasi.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Bernard Le Tourneur Feb 23 at 06:11 AM
0

Please can you give details of your code. the plunker example works. I suspect you are not getting a handle to your model correctly. How are you referencing your model (and is it a named model?)

Is it declared in you manifest.json (and if yes show us how).

Show 8 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Bernard,

I am using the same piece of code, except one drop-down all other fields are input enabled.

Here is my code:

View:

<table:Table id="Tbl" enableSelectAll= "false" rows="{/}"

visibleRowCount="{= ${/}.length}"

selectionBehavior="Row">

<table:toolbar>

<Toolbar>

<content>

<Label text="Employee Creation" design = "Bold"/>

<ToolbarSpacer/>

<Button

id="Add"

icon="sap-icon://add"

text="Add Row"

tooltip="Add Row"

press="onAdd1"

type="Transparent"/>

<Button

id="Del"

icon="sap-icon://delete"

text="Delete Row"

tooltip="Delete Selected Row(s)"

press="onDelete"

type="Transparent"/>

</content>

</Toolbar>

</table:toolbar>

<table:columns>

<table:Column width="11rem">

<Label text="Designation" required= "false" design = "Bold"/>

<table:template>

<ComboBox width="100%"

selectedKey="{Desig/selectedKey}"

items="{

path: ' Desig/items',

templateShareable: false

}">

<core:Item

key="{key}"

text="{text}"/>

</ComboBox>

</table:template>

</table:Column>

<table:Column width="11rem">

<Label text="Fname" required= "false" design = "Bold"/>

<table:template>

<Input id="Fname" value="{Fname}" showValueStateMessage="false"

templateShareable="true" maxLength= "15"/>

</table:template>

</table:Column>

<table:Column width="11rem">

<Label text="Lname" required= "false" design = "Bold"/>

<table:template>

<Input id="Lname" value="{Lname} " showValueStateMessage="false"

templateShareable="true" maxLength= "15"/>

</table:template>

</table:Column>

</table:columns>

</table:Table>

In Controller:

onAdd1: function(){

// var tbl = this.getView().byId("Tbl");

// var oModel = tbl.getOwnerComponent().getModel();

var oModel = this.getOwnerComponent().getModel();

var currentRows = oModel.getProperty("/");

var newRows = currentRows.concat(this.createEntry());

oModel.setProperty("/", newRows);

},

createEntry: function() {

return {

Desig: {

selectedKey: "1",

items: [{

key: "1",

text: "Item 1-1",

}, {

key: "2",

text: "Item 1-2",

}, {

key: "3",

text: "Item 1-3",

}],

},

Fname : "",

Lname : "",

};

}

Please check my code and suggest me.

Thanks,

kasi.

0

Where do you declare your default (unamed) model that you are trying to get?

In your manifest.json, component.js, init on your controller?

You can only get a model that exists - so to fully assist i just have to see your declaration of this un-named model.

In the example you reference the model is instantiated with the manifest.json

    "models": {
      "": {
        "dataSource": "products"
      }

Is this true for you too?

0
Former Member

i have not declared this in my code .

Not maintaining any manifest.json and Component.js.

Please suggest me, in the controller how to declare this empty model.

"models": {
      "": {
        "dataSource": "products"
      }
},

Thanks,

Kasi.

0

In your case in your init event on your controller:

var model = new sap.ui.model.json.JSONModel(this.createEntry());
this.getView().setModel(model, "");
0
Former Member

Hi Bernard,

As suggested, maintained the code in init() method of controller.

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

this.getView().setModel(oModel, "");

and removed the following code.

onAdd1: function(){

// var tbl = this.getView().byId("Tbl");

// var oModel = tbl.getOwnerComponent().getModel();

var oModel = this.getOwnerComponent().getModel();

var currentRows = oModel.getProperty("/");

var newRows = currentRows.concat(this.createEntry());

oModel.setProperty("/", newRows);

},

this time not getting any error but row is not added when i click on "+" button.

Please help me in this regards.

Thanks,

Kasi.

0

Change

var oModel = this.getOwnerComponent().getModel();

to

var oModel = this.getView().getModel();

as the model is now local to this view.

0
Former Member
Bernard Le Tourneur

changed the code as suggested, but another error.

Uncaught TypeError: currentRows.concat is not a function

0
Former Member
Former Member

Hi Bernard,

Can you please help me with this latest error.

0
Vaibhav Maheshwari Feb 23 at 05:07 AM
0

Seems like you were able to resolve the issue on your own as i didn't get the error in the code.

Please close the thread, if done.

Share
10 |10000 characters needed characters left characters exceeded
Iftah Peretz
Feb 23 at 08:01 PM
0

I do second what is said here. I'm sure this was useful.

Please elaborate on how you solved it and close the thread.

Share
10 |10000 characters needed characters left characters exceeded