Table Row binding on fragement

[former_member201159]

Hi all,

I uploaded my "problem" which you can download for the import in SAP Web IDE

Here is the download Link for the import:

https://drive.google.com/open?id=1sg34iv1D43KOyPIPiraW0NifH38Ne7Iz

When a row was selected (you have to mark in the first column) and press the "openDialog" a fragment pops up.

I would like to display the values of the selected row in the fragment.

I got problems to bind the fragment to the model/selected row.

Many thanks for you help

Regards

Mario

[former_member467961]

Hello Mario,

You can do the following changes to bind the selected data to the dialog fragment.

• In the controller, update the method _getDialog as follows:

  //the below changes also work for sap.ui.table.Table
  _getDialog: function () {
      
  	var oTable = this.byId("TreeTable");
  
  	var selectedData = [];
  
  	//get indices of selected rows, comma-separated
  
  	var aIndices = oTable.getSelectedIndices();
  
          if (aIndices.length < 1) {
  
  		alert("no item selected");
  
  		return;
  
  	} else {
  
  		for(var i=0;i<aIndices.length; i++) {
  
  			//fetch the data of selected rows by index
  
  			var tableContext = oTable.getContextByIndex(aIndices[i]);
  
  			var data = oTable.getModel().getProperty(tableContext.getPath());
  
  			selectedData.push(data);
  
  		}
  
  	}
  
  	if (!this._oDialog) {
  
  		this._oDialog = sap.ui.xmlfragment("idFrag", "sap.ui.table.sample.TreeTable.HierarchyMaintenanceJSONTreeBinding.view.Dialog", this);
  
  		//set the dialog with the selected data from treetable
  
  		var oModel = new JSONModel();
  
  		oModel.setData(selectedData);
  
  		this._oDialog.setModel(oModel);
  
          }
  
          return this._oDialog;
  
  },
  

• Update the Dialog fragment to accommodate the data binding:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">

	<Dialog id="idFrag" title="MyDialog" contentWidth="500px" verticalScrolling="true" >

		<content>

			<VBox items="{path: '/'}">

					<Panel height="auto" width="auto" headerText="{name}" expandable="true" expanded="false" expandAnimation="false" backgroundDesign="Solid" class="sapUiNoContentPadding">

						<VBox width="100%" visible="{= ${categories}.length>0}" items="{path: 'categories', templateShareable:'false'}">

							<VBox>

								<Text text="{name}"/>

								<VBox visible="{= ${categories}.length>0}" items="{path: 'categories', templateShareable:'false'}" class="sapUiMediumMarginBegin"> 

									<VBox>

									<Text text="{name}"/>

									<VBox visible="{= ${categories}.length>0}" items="{path: 'categories', templateShareable:'false'}" class="sapUiMediumMarginBegin"> 

										<VBox>

											<Text text="{name}"/>

											<VBox visible="{= ${categories}.length===0}" class="sapUiSmallMarginBegin">

												<Text text="Price:{amount} {currency}"/> 

												<Text text="Size:{size}"/> 

											</VBox>

										</VBox>

									</VBox>

									<VBox visible="{= ${categories}.length===0}" class="sapUiSmallMarginBegin">

										<Text text="Price:{amount} {currency}"/> 

										<Text text="Size:{size}"/> 

									</VBox>

								</VBox>

								</VBox>

								<VBox visible="{= ${categories}.length===0}" class="sapUiSmallMarginBegin">

									<Text text="Price:{amount} {currency}"/> 

									<Text text="Size:{size}"/> 

								</VBox>

							</VBox>

						</VBox>

					</Panel>

			</VBox>

		</content>

		<endButton>

			<Button text="Close" press="onCloseDialog"/>

		</endButton>

	</Dialog>

</core:FragmentDefinition>

Hope this solves your problem! 🙂

Best Regards,

Bopanna

[former_member201159]

Hi Bopanna,

many, many thanks. I am glad to get an answer as I was searching for hours to find a solution(There are not many matched in google concerning this issue)

Unfortunatelly you coding does not work.

You can download the coding from :

https://drive.google.com/file/d/16RKIq1F6qApOmtMASkwqn0un9J0R5vsw/view?usp=sharing

One comment: there was a syntax error in your coding.

I tried to solve this. Instead I wrote:

this._oDialog.open();

Instead I wrote:

I would be glad, if we can solve this issue 🙂

regards

Mario

[former_member467961]

Hello Mario,

Returning the dialog control from the method is necessary. It works fine for me, not sure it is caused by the IDE used for development (I am using Eclipse). Sometimes ESLint validations can get tricky. Either way I have attached an updated version of the controller and a screenshot of the final working sample here:

https://drive.google.com/drive/folders/133WdgOjTuv0VEBGr1SR6lzQPT_UJXVpE?usp=sharing

Please let me know if you still face the same issue...

Best Regards,

Bopanna

[former_member467961]

Hello Mario

were you able to resolve this issue?

Kind Regards,

Bopanna

[former_member584042]

sap.ui.commons is deprecated. don't use sap.ui.commons.Dialog