Skip to Content
0
Oct 03, 2019 at 04:38 AM

Add new items and update binding context in sap.m.table

1897 Views

Hi everyone,

I have a problem.

.

I bind odata service to this table and it has functions (Add, Edit, Save and Cancel).

So I'm able to add new rows by clicking the + button. It'll trigger the function onAddViewTaskItem (code provided below).

So I input new description and sub description for the new item. However, if I edit any current items (not the new created ones), it will trigger function updateItems in ListBase object which calls updateAggregation.

As I debug, it updates with the current binding contexts (which I see there only 3 items in contexts instead of 4). It seems that when i addItem to the table, it doesn't add the new created context to the table's binding context.

Is there anyway to update the binding context?

onAddViewTaskItem: function (oEvent) {
this.getModel("viewSettings").setProperty("/visible", true);
this.getModel("viewSettings").setProperty("/editable", true);

this._createAddRow();
},
_createAddRow: function () {
var _oContext = this._createTaskItemContext();
this._addTableRow(_oContext);
},
_createTaskItemContext: function (oEvent) {
return this.getModel("xsodata").createEntry("/TaskItems", {
properties: {
"TaskItemID": this._generateGuid(),
"YearID": this._oScheduleDetailDialog.getBindingContext("xsodata").getObject().YearID,
"TaskDescription": "",
"TaskSubDescription": "",
"DeleteFlag": ""
},
success: function (oEvent) {}.bind(this),
error: function (oEvent) {}.bind(this)
});
},
_addTableRow: function (oContext) {
var oScheduleTaskItem = this._createRowControls();
this.getView().addDependent(oScheduleTaskItem);

oScheduleTaskItem.setBindingContext(oContext, "xsodata");
this.byId("tblScheduleItems").addItem(oScheduleTaskItem);
},

_createRowControls: function (oComboBoxControl) {
return new ColumnListItem({
cells: [
this._createInputControl("viewSettings>/editable", "i18n>description", "xsodata>TaskDescription"),
this._createInputControl("viewSettings>/editable", "i18n>subDescription", "xsodata>TaskSubDescription"),
this._createCheckboxControl("viewSettings>/editable", "xsodata>DeleteFlag")
				]
			});
		},

_createInputControl: function (sEditable, sPlaceholder, sBindingProperty) {
var _oInputControl = new Input({
maxLength: 255,
editable: "{" + sEditable + "}",
placeholder: "{" + sPlaceholder + "}",
value: "{" + sBindingProperty + "}"
});

return _oInputControl;
},

_createCheckboxControl: function (sEditable, sBindingProperty) {
var _oCheckBoxControl = new CheckBox({
editable: "{" + sEditable + "}",
selected: "{= ${" + sBindingProperty + "} === 'X' ? true : false}",
select: this.handleDeleteFlagSelect
});

return _oCheckBoxControl;
},
handleDeleteFlagSelect: function (oEvent) {
var bSelected = oEvent.getParameter("selected");
var sPath = oEvent.getSource().getBindingContext("xsodata").getPath();
this.getModel("xsodata").setProperty(sPath + "/DeleteFlag", bSelected ? "X" : "");
},