How to edit a row using dialogue box - sapui5

Question

I have created a sap ui5 table with 5 columns where One of the column of table will have a button with edit icon.
I have tried as below:
<Table id="table2" visibleRowCount="5" rows="{
path: '/ProductCollection',
sorter: {path: 'serialId', descending: false}
}">
<columns>
<Column width="50px">
<m:Text text="S.No" />
<template>
<m:Text text="{serialId}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeName" />
<template>
<m:Text text="{employeeName}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeId" />
<template>
<m:Text text="{employeeId}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="Age" />
<template>
<m:Text text="{age}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="Email" />
<template>
<m:Text text="{email}" wrapping="false" />
</template>
</Column>
<Column hAlign="End" width="4rem" >
<m:Text text="Edit" />
<template>
<m:Button icon="sap-icon://edit" press="editRow" type="Reject"/>
</template>
</Column>
</columns>
<dragDropConfig>
<dnd:DropInfo
groupName="moveToTable2"
targetAggregation="rows"
dropPosition="Between"
drop="onDropTable2" />
<dnd:DragDropInfo
sourceAggregation="rows"
targetAggregation="rows"
dropPosition="Between"
dragStart="onDragStart"
drop="onDropTable2" />
</dragDropConfig>
</Table>
On click of the edit button, a dialog box should open along with the data of the clicked row.
I have tried editing the row with the below function
where I am opening a dialog box with the current values , so that update on click of OK.
And this is my controller:
editRow: function(oEvent) {
var oControl = oEvent.getSource();
var oItemPath = oControl.getBindingContext().getPath();
var oObject = this.byId("table2").getModel() .getProperty(oItemPath);
var editRecord = oEvent .getSource().getBindingContext() .getObject();
var editRecordRank = editRecord.Rank;
var oDialog1 = new Dialog({
title: "Wafer",
contentWidth: "40px",
contentHeight: "300px",
content: [
new sap.m.Text({
width: "100%",
text: "EMPid"
}),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("EmployeeEditId", {
width: "60%",
items: [
new sap.ui.core.Item("itemee11", { text: "33" }),
new sap.ui.core.Item("iteme12", {
text: "78"
}),
new sap.ui.core.Item("itemee13", {
text: "100"
}),
new sap.ui.core.Item("iteme14", {
text: "75"
}),
new sap.ui.core.Item("iteme15", {
text: "101"
})
]
})
]
}),
new sap.m.Text({ width: "100%", text: "EMPname" }),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("EmployeeNameEditId", {
width: "60%",
items: [
new sap.ui.core.Item("iteme1111", {
text: "test1"
}),
new sap.ui.core.Item("iteme1234", {
text: "test2"
}),
new sap.ui.core.Item("iteme1312", {
text: "test3"
})
]
})
]
}),
new sap.m.Text({ width: "100%", text: "age" }),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("AgeEditId", {
width: "60%",
items: [
new sap.ui.core.Item("iteme15211", { text: "22" }),
new sap.ui.core.Item("iteme136454", { text: "23" }),
new sap.ui.core.Item("iteme213754", { text: "33" }),
]
})
]
}),
new sap.m.Text({ width: "100%", text: "Email" }),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("EmailEditId", {
width: "60%",
items: [
new sap.ui.core.Item("iteme11411", { text: "a#gmail.com" }),
new sap.ui.core.Item("iteme34", { text: "b#hotmail.com" }),
new sap.ui.core.Item("iteme314", { text: "c#hotmail.com" })
]
})
]
})
],
beginButton: new Button({
type: ButtonType.Emphasized,
text: "Update",
press: function() {
var otab = this.byId("table2");
var rows = otab.getRows();
var rowsLength = otab.getBinding('rows').getLength();
var tableArr = [];
for ( var i = 0; i < rowsLength; i++ ) {
tableArr.push({
empId : rows[i].getCells()[0].getText(),
employeeName : rows[i].getCells()[1].getText(),
age: rows[i].getCells()[2].getText(),
email : rows[i].getCells()[3].getText(),
});
}
var employeeId= sap.ui.getCore().byId("empId ");
var empnameId = sap.ui.getCore().byId("employeeName ");
var ageId = sap.ui.getCore().byId("age");
var emailId = sap.ui .getCore().byId("email");
// data=oEvent.getSource
var componentText =empId.mAssociations.selectedItem;
var categoryText = empnameId.mAssociations.selectedItem;
var quantityText = ageId.mAssociations.selectedItem;
var mainCategoryText = emailId.mAssociations.selectedItem;
var cValue = sap.ui.getCore().byId(componentText) .mProperties.text;
var catValue = sap.ui.getCore().byId(categoryText).mProperties.text;
var qValue = sap.ui.getCore().byId(quantityText).mProperties.text;
var mValue = sap.ui.getCore().byId(mainCategoryText) .mProperties.text;
tableArr.map(function(item) {
if (item.empId==cValue){
item.empnameId = catValue;
item.ageId = qValue;
item.emailId = mValue;
}
return item; });
// var aContexts = sap.ui.getCore().byId("test");
var oModel = new sap.ui.model.json.JSONModel();
var oTable = this.byId("table2");
oModel.setData({ modelData: tableArr });
oTable.setModel(oModel);
oTable.bindRows("/modelData");
oDialog1.close();
}.bind(this)
}),
endButton: new Button({
text: "Close",
press: function() {
this.pressDialog.close();
}.bind(this)
})
});
oDialog1.open();
},
any guiding links or a solution would be much helpful , TIA

Answer 1

The binding for the dialog is missing. Add the dialog as "dependent" on the view to be connected to the view’s model lifecycle. Or try to bind the element like this oDialog.bindElement(sPath).
Try sth. like oDialog1.bindElement(oItemPath) before opening the dialog.