Scrollable Detail Records

Hi Sarika,

An example of such a button created for the AccountAddressDetailV2:

1) The button code itself:

{
				"operation": "insert",
				"name": "NewLineButton",
				"parentName": "Detail",
				"propertyName": "tools",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"className": "Terrasoft.Button",
					"style": Terrasoft.controls.ButtonEnums.style.BLUE,
					"tag": "NewLineButton",
					"caption": { "bindTo": "Resources.Strings.NewLineButtonCaption" },
					"click": {"bindTo": "onNewLineButtonClick"}
				}
			}

2) Creating an attribute:

attributes: {
			"ActiveRowIndex": {
				"dataValueType": this.Terrasoft.DataValueType.INTEGER,
				"value": 0
			}
		},

3) The code of the click handler:

onNewLineButtonClick: function(){
				var gridDataValue = this.getGridData();
				var gridDataItems = gridDataValue.getItems();				
				var activeRow = this.get("ActiveRow");				
				for (var i = 0; i < gridDataItems.length; i++) {
					if (gridDataItems[i].values.Id == activeRow) {
							this.set("ActiveRowIndex", i);
						}
				}				
				var currentActiveRowIndex = this.get("ActiveRowIndex");
				var newActiveRowIndex = currentActiveRowIndex + 1;
				var gridDataItemsLength = gridDataItems.length;
				if (newActiveRowIndex >= gridDataItemsLength) {
					return;
				}
				var targetActiveRow = gridDataItems[newActiveRowIndex].values.Id;
				this.set("ActiveRow", targetActiveRow);
			}

As a result after refreshing the page the button will do what is needed - navigation will be performed.

Best regards,

Oscar

Hi Oscar,

Thanks for your response.

I tried the code that you suggested and it is selecting the next record in the row on Clicking the Next Record Button. But the issue is I still have to manually navigate to see the next record that is selected. Kindly suggest me some way that the next selected record automatically gets visible on the screen without me having to scroll towards it.

Regards,

Sarika

Sarika Sharma,

Please clarify what do you mean? I thought you need a button that will select the next record in the grid. Do you want to open it or what? Please provide all the details of the task from the very beginning to the expected result.

Best regards,

Oscar

Hi Oscar, 

I want the functionality as follows:

As Soon as I click on the 'Next Record' Button, the next record should be automatically scrolled up and comes up in the view without me having to scroll the view of the window.

Please check the below link for making it clear.

https://jsfiddle.net/SZKJh/1/

As soon as a number is entered, and GO button is clicked, it redirects to the line with that number. I want the same redirection to occur on incremental basis.

Sarika Sharma,

Hi,

Ok, then something like this should be used:

onNewLineButtonClick: function(){
				var gridDataValue = this.getGridData();
				var gridDataItems = gridDataValue.getItems();
				var requestedActiveRow = this.get("RecordIndexColumn");
				if (requestedActiveRow != null) {
					if (requestedActiveRow >= gridDataItems.length) {
						return;
					}
					var targetActiveRowId = gridDataItems[requestedActiveRow].values.Id;
					this.set("ActiveRow", targetActiveRowId);
					var targetElementId = document.querySelector("[id*=" + CSS.escape(targetActiveRowId) + "]");
					$([document.documentElement, document.body]).animate({
						scrollTop: $("#" + CSS.escape(targetElementId.id) + "").offset().top
					}, 2000);
				}

RecordIndexColumn - is a virtual column where we specify the number of the record to which we should scroll (for example can be a separate field on the page or in the detail). This variable:

var targetElementId = document.querySelector("[id*=" + CSS.escape(targetActiveRowId) + "]");

searches for the detail record on the document (since each detail record has an Id value inside the Id selector of the element on the page).

This is not a ready code, but it animates the page to be scrolled to the active row visible in the document.

Best regards,

Oscar

Hi Oscar,

Many thanks for your response,

I tried the code you've provided above but it seems it is not reflecting any changes or action performed on the screen. I also configured the field "RecordIndexColumn" in section and added incrementing values in each of the records.

Sarika Sharma,

Hi,

It works correctly (almost, it should be modified a little since there is a problem with the MainHeaderSchemaContainer module at the top and the animation of the record (MainHeaderSchemaContainer sometimes can cover the actual record that is the first or the second in the detail list)). Also an example was provided for the AccountAddress detail and the "New line" button there). See the result:

Best regards,

Oscar