Skip to Content
0

calculate values on select/deselect of rows of sap.m.table

Sep 28, 2017 at 07:05 AM

68

avatar image

Hi All,

I have a form where i have a field - netValue and this field follows by a sap.m.table with mode : multiselect.

In the table we have one column - totalPrice , Now on selection of any row the net Value should be calculated like : new netValue = previous net value - selected rows total price.

And if user deselect the row, then it should become netValue = previous net value + selected rows total price.

The user should also have the option of selecting all rows and deselecting all rows.

any pointers will be helpful.

Thanks

_vishal

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

3 Answers

Best Answer
Vedaradhya Agrahar Sep 28, 2017 at 01:00 PM
0

Hi Vishal,

i have tried with your scenario, the following code snip may help you

view1.view.xml

	<HBox><Label text="Net Value:" class="sapUiTinyMargin"/><Input value="{viewData>/netValue}" /></HBox>
					<Table id="productsTable" items="{data>/ProductCollection}" mode="MultiSelect" selectionChange="onSelect">
						<columns>
							<Column id="productCol" width="12em"><Text text="Product"/></Column>
							<Column id="supplierCol" minScreenWidth="Tablet" demandPopin="true"><Text text="Supplier"/></Column>
							<Column id="priceCol" hAlign="End"><Text text="Price"/></Column>
							<Column id="netPrice" hAlign="End" mergeDuplicates="true"><Text text="Net Price"/></Column>
						</columns>
						<items>
							<ColumnListItem>
								<cells>
									<ObjectIdentifier title="{data>Name}" text="{ProductId}" class="sapMTableContentMargin"/>
									<Text text="{data>SupplierName}"/>
									<ObjectNumber number="{data>Price}"/>
									<Text text="{viewData>/netValue}"/>
								</cells>
							</ColumnListItem>
						</items>
					</Table>

view1.controller.js

onInit: function() {
			var oJsonModel = new JSONModel({
				"ProductCollection": [{
					"ProductId": "HT-1000",
					"Name": "Notebook Basic 15",
					"SupplierName": "Very Best Screens",
					"Price": 956
				}, {
					"ProductId": "HT-1001",
					"SupplierName": "Very Best Screens",
					"Name": "Notebook Basic 17",
					"Price": 1249
				}, {
					"ProductId": "HT-1002",
					"SupplierName": "Very Best Screens",
					"Name": "Notebook Basic 18",
					"Price": 1570
				}, {
					"ProductId": "HT-1003",
					"SupplierName": "Smartcards",
					"Name": "Notebook Basic 19",
					"Price": 1650
				}, {
					"ProductId": "HT-1007",
					"SupplierName": "Technocom",
					"Name": "ITelO Vault",
					"Price": 299
				}]
			});
			this.getView().setModel(oJsonModel, "data");


			this.iNetValue = 1000;
			var oViewModel = new JSONModel({
				"netValue": this.iNetValue
			});
			this.getView().setModel(oViewModel, "viewData");
		},


onSelect: function(oEvent) {
	 var oView = this.getView(),
	oJsonModel = oView.getModel("data"),
	aListItems = oEvent.getSource().getSelectedItems(),
	iNetValue = this.iNetValue;

      //loop through the selected items
	aListItems.forEach(function(listItem, index) {
			var sPath = listItem.getBindingContextPath();
			iNetValue += oJsonModel.getProperty(sPath).Price;
		});

	oView.getModel("viewData").setProperty("/netValue", iNetValue);
		}

Regards,

Vedaradhya.

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Vedaradhya,

Thanks , this logic work after small change :)

_vishal

0
Irfan Gokak Sep 28, 2017 at 09:56 AM
0

Hi,

use mode="MultiSelect" selectionChange="<your event name>".

selectRow : function(oEvt){
    // Check if all selected
    if(oEvt.getSource()._getSelectAllCheckbox().getSelected() == true){
        // Loop on your model and add all fields
    } else { 
        if(oEvt.getParameter("selected") == true){
             //get rows binding context and total price then subtract from net price
        } else {
            //add to netprice
        }
    }
}
Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Irfan,

Thanks, I am trying this with my code,

can you tell me from where I can get more information on the functions like :

._getSelectAllCheckbox()

Thanks

_vishal

0

Hi,

I have found it in a debugger. I'm not sure please check API reference in SapUI5 Demokit

1
Vishal Gupta Sep 28, 2017 at 11:26 AM
0

Hi Irfan,

It did not work in one of the case when the user deselect all the rows using the checkbox in header row.

it is working fine 1) when user select all rows 2) select /deselect single row . the sample code is like:

handleSelect: function(oEvent) {
            var columnGrPrice = 0.00;
            var gPrice = 0.00;
            var newRemValue = 0.00;
            var initialRemValue = parseFloat(this.getView().byId("idRemainingVal").getText());
            // get the number of selected rows from table eg if 3 out of 5 rows are selected
            var oTable = this.getView().byId("idItemTable");
            var oLength = oTable.getSelectedItems().length;
            // get the index of selected row , if only one row is selected / deselected
            var selectedIndex = oEvent.getSource()._oItemNavigation.getFocusedIndex();
            // Check if all selected
            if (oEvent.getSource()._getSelectAllCheckbox().getSelected() == true) {
                // Loop on your model and add all fields
                for (var s = 0; s < oLength; s++) {
                        columnGrPrice = columnGrPrice + parseFloat(oTable.getItems()[s].getCells()[4].getValue());
                    }
                    newRemValue = initialRemValue - columnGrPrice;
            }else{
                if (oEvent.getParameter("selected") == true) {
                    //get rows binding context and total price then subtract from net price
                    gPrice = parseFloat(oTable.getItems()[(selectedIndex - 1)].getCells()[4].getValue());
                    newRemValue = initialRemValue - gPrice;
                } else {
                    //add to netprice
                    gPrice = parseFloat(oTable.getItems()[(selectedIndex - 1)].getCells()[4].getValue());
                    newRemValue = initialRemValue + gPrice;
                }
            }
            this.getView().byId("idRemainingVal").setText(newRemValue);
        },

Thanks

_vishal

Share
10 |10000 characters needed characters left characters exceeded