on 01-17-2014 4:51 AM
Hello,
I want to implement a logic in which the user should be able to drag and drop rows from Table1 to Table2. I used jquery ui plugin for it. But even after moving the rows, the data (json data binded to the table) of the table is not updated.
Assume below are the two tables:
Header 1 | Header 2 |
---|---|
index 1 | material 1 |
index 2 | material 2 |
Header 1 | Header 2 |
---|---|
index 6 | Material 6 |
index 7 | Material 7 |
Now, if I move 1st row of Table1 to Table2, UI is working fine and is shown like this:
Header 1 | Header 2 |
---|---|
index 2 | material 2 |
Header 1 | Header 2 |
---|---|
index 6 | Material 6 |
index 1 | material 1 |
index 7 | Material 7 |
But, actual json data is still not updated, ie, table1 and table2 still have 2 rows each.
How to update the json data associated to the table after moving the rows?
Please help me.
Thanks & Regards
Shubham Dehariya
Also, I am attaching the source code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_goldreflection" >
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
//Creation of a layout on which 2 tables will be added
var oMasterLayout = new sap.ui.commons.layout.MatrixLayout({id:"idMasterLayout",layoutFixed :false});
//Creation of the table and adding columns
var oTableComponent1 = new sap.ui.table.Table({
id : "idTableComponent1",
visibleRowCount: 5,
navigationMode : sap.ui.table.NavigationMode.Paginator,
width:"25%"
});
oTableComponent1.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Item"}),
template: new sap.ui.commons.TextView().bindProperty("text", "Item"),
width:"10%"
}));
oTableComponent1.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "IFS Material No."}),
template: new sap.ui.commons.TextView().bindProperty("text","Material")
}));
//Adding above table to the layout
oMasterLayout.addRow(new sap.ui.commons.layout.MatrixLayoutRow({
cells:[new sap.ui.commons.layout.MatrixLayoutCell({
content: [oTableComponent1]
})]
}));
//Creation of the table and adding columns
var oTableComponent2 = new sap.ui.table.Table({
id : "idTableComponent2",
visibleRowCount: 5,
navigationMode : sap.ui.table.NavigationMode.Paginator,
width:"25%"
});
oTableComponent2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Item"}),
template: new sap.ui.commons.TextView().bindProperty("text", "Item"),
width:"10%"
}));
oTableComponent2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "IFS Material No."}),
template: new sap.ui.commons.TextView().bindProperty("text","Material")
}));
//Adding above table to the layout
oMasterLayout.addRow(new sap.ui.commons.layout.MatrixLayoutRow({
cells:[new sap.ui.commons.layout.MatrixLayoutCell({
content: [oTableComponent2]
})]
}));
oMasterLayout.addRow(new sap.ui.commons.layout.MatrixLayoutRow({
cells:[new sap.ui.commons.layout.MatrixLayoutCell({
content: [new sap.ui.commons.Button({text:"Final Values"})]
})]
}));
oMasterLayout.placeAt("content");
//Setting data to above 2 tables
var initialTableData1 = [{Item: "1",Material:"Mat1"},
{Item: "2",Material:"Mat2"},
{Item: "3",Material:"Mat3"},
];
var oModel1 = new sap.ui.model.json.JSONModel();
oModel1.setData(initialTableData1);
oTableComponent1.setModel(oModel1).bindRows("/");
var initialTableData2 = [{Item: "6",Material:"Mat6"},
{Item: "7",Material:"Mat7"},
{Item: "8",Material:"Mat8"},
];
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData(initialTableData2);
oTableComponent2.setModel(oModel2).bindRows("/");
//Adding jquery ui plugin
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');
$(function() {
$("#idTableComponent1 tbody, #idTableComponent2 tbody").sortable({
connectWith : ".ui-sortable"
}).disableSelection();
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
You are only updating the DOM with your drag-n-drop (i.e. moving the HTML of a tablerow from one table to another) but this does of course not update the underlying model of the table.
You should also update the source and target model accordingly
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
This message was moderated.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Thanks for the idea . Let me try it !
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
As Robin said, we have to update the underlying model of the table. So, what I did after dropping a row to another table is I just called the cancel method so that any changes done in the UI is reverted. Meanwhile, I took the index of the selected row and using that index I modified the json model and after the modification I just called the updateBinding method.
So, the actual user will think that the row is dragged & dropped to the table. But we are using our UI5 way
Regards,
Shubham
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
hi shubham dehariya,
I am also facing the same scenario, did you find any solution for this ?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
88 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.