Skip to Content

Selecting a row of data from with a radio button UI5

Hello,

How to get data from the cells of a table to pass to an edit screen using a radio button on the same row?


sap.ui.jsview("ECSB1.CommClassTable.view.main", {


	/** Specifies the Controller belonging to this View. 
	 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
	 * @memberOf controller.main
	 */
	getControllerName: function () {
		return "ECSB1.CommClassTable.controller.main";
	},


	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	 * Since the Controller is given to this method, its event handlers can be attached right away.
	 * @memberOf controller.main
	 */
	createContent: function (oController) {
		//Buttons
		var btnAdd = new sap.m.Button({
						text: "Add",
						width: "150px",
						press: [oController.onPressGoToAddNew, oController]
		});
		
		var btnEdit = new sap.m.Button({
						text: "Edit",
						width: "150px",
						press: [oController.onPressGoToEdit, oController]
		});
		
		var btnDelete = new sap.m.Button({
						text: "Delete",
						width: "150px",
						press: [oController.onPressGoToDelete, oController]
		});
		
		//CommClassTable
		 this.commClassTable = new sap.m.Table("commClass",{
			//inset : true, 
			headerText : "{CommClass}",
			noDataText: "Loading",
			//headerDesign : sap.m.ListHeaderDesign.Standard, 
			//mode : sap.m.ListMode.None,   
			//includeItemInSelection : false,   
			growing : false
			
		});
		
		var commClassTableButton = new sap.m.Column("commClassButton", {header: new sap.m.Label({text: "Select"})}); 
		this.commClassTable.addColumn(commClassTableButton);
		
		var commClassCodeCol =  new sap.m.Column("commClassCode",{header: new sap.m.Label({text:"Code"})});
		this.commClassTable.addColumn(commClassCodeCol);
		var commClassNameCol = new sap.m.Column("commClassName",{header: new sap.m.Label({text:"Name"})});
		this.commClassTable.addColumn(commClassNameCol);
		var commClassFreightCol = new sap.m.Column("commClassFreight",{header: new sap.m.Label({text:"Freight Factor"})});
		this.commClassTable.addColumn(commClassFreightCol);
		
		this.commClassTableTxt =  new sap.m.ColumnListItem("commClassTableTxt");//,{type: "Active"});
		
		 this.commClassButton = new sap.m.RadioButton({
			//Text: this.commClassTxtCode,
			select: [oController.onSelect, oController]
		});
		this.commClassTableTxt.addCell(this.commClassButton);
		
		this.commClassTxtCode = new sap.m.Text("commClassTxtCode", {text:"{Code}"});
		this.commClassTableTxt.addCell(this.commClassTxtCode);
		var commClassTxtName = new sap.m.Text("commClassTxtName", {text:"{Name}"});
		this.commClassTableTxt.addCell(commClassTxtName);
		var commClassTxtFreight = new sap.m.Text("commClassTxtFreight", {text:"{U_FreightFactor}"});
		this.commClassTableTxt.addCell(commClassTxtFreight);
		
		//Display
		var mainPage = new sap.m.Page({
			title: "Comm Class",
			content:[
				
				btnAdd,
				//new sap.m.ToolbarSpacer(),
				btnEdit,
				//new sap.m.ToolbarSpacer(),
				btnDelete,
				//new sap.m.ToolbarSpacer()
				this.commClassTable
				]
		});
		
		
		return mainPage;
	}


});
/*global app:true*/
sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";


	return Controller.extend("ECSB1.CommClassTable.controller.main", {
		onInit: function(){
			sap.ui.localResources("i18n");
			var oResourceModel = new sap.ui.model.resource.ResourceModel({
				bundleName: "i18n.i18n"
			});
			sap.ui.getCore().setModel(oResourceModel, "i18n");
			
			var user = "manager";
			var pass = "secofr";
			var comp = "ZZZTESTING05";
			
			var jData = JSON.stringify({
				UserName: user,
				Password: pass,
				CompanyDB: comp
			});
			var loginURL = "/destinations/Goetze/Login";
			$.ajax({
				url: loginURL,
				data: jData,
				type: "POST",
				dataType: "json"
			});
			//var code = "('102')";
			var tableURL = "/destinations/Goetze/ECSB1_COMMCLASS";
			//var url = tableURL + code;
			this.onCompleteCall = function (result){
				var commClassTable = sap.ui.getCore().byId("commClass");
				var commClassTableTxt = sap.ui.getCore().byId("commClassTableTxt");
				var oModel = new sap.ui.model.json.JSONModel();
				
				oModel.setData(result);
				commClassTable.setModel(oModel);
				commClassTable.bindItems("/value", commClassTableTxt);
			};
			
			$.ajax({
				url: tableURL,
				xhrFields: {withCredentials:true},
				type:"GET",
				dataType:"json",
				success: this.onCompleteCall
				//error: this.onErrorCall
			});
		
		
			/*this.onCompleteCall = function (result){
				var commClassTable = sap.ui.getCore().byId("commClass");
				var commClassTableTxt = sap.ui.getCore().byId("commClassTableTxt");
				var oModel = new sap.ui.model.json.JSONModel();
				//var oModel = new sap.ui.model.odata.ODataModel ("/destinations/Goetze/ECSB1_COMMCLASS"[user,pass]);
				
				oModel.setData(result);
				commClassTable.setModel(oModel);
				//commClassTable.Sap.ui.getcore().setModel(oModel);
				commClassTable.bindItems("/value", commClassTableTxt);
			};*/
		},
		onPressGoToAddNew: function(){
			app.to("add");
			
		},
		onPressGoToEdit: function(){
			app.to("edit");
		},
		
		onSelect: function(){
			app.to("edit");
			//this.commClassButton = sap.ui.table.getCell(this.commclassCode);
			var button = sap.ui.table.Row.getCells(this.commClassTableTxt);
			console.log(button);//.getCell(this.commClassTxtCode)); 
		}
	


	});
});
Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

2 Answers

  • Jan 07 at 09:02 AM

    get binding context, this will have data for the selected row

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 09 at 05:39 AM

    Hi Charles,

    Modify your onselect method as mentioned below to get the selected Row data.

    onSelect: function (oEvent) {
    if (oEvent.getParameter("selected")) {
    var name = oEvent.getSource().getBindingContext().getProperty("Name");
    console.log(name);
    var code = oEvent.getSource().getBindingContext().getProperty("Code");
    console.log(code);
    }
    }

    Thanks,

    Vaibhav

    Add comment
    10|10000 characters needed characters exceeded