button on section page in particular column

Hi Manikanta,



You can add a button using JQuery. Please see sample below. i added such button into Contact Section into last column in the grid. Idea is to add a column in a column setup and then using JQuey build a selector to that column. In my example i used last column in the grid for simplicity. Contact section:

define("ContactSectionV2", ["css!UsrContactSectionV2CSS"], function() {
	return {
		entitySchemaName: "Contact",
		attributes: {
			"SelectButtonColumn": {
				"dataValueType": Terrasoft.DataValueType.TEXT,
				"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN
			}
		},
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		methods: {
			onGridDataLoaded: function(response) {
				this.mixins.GridUtilities.onGridDataLoaded.call(this, response);
				this.addSelectCustomerButton();
			},
			onRender: function() {
				this.callParent(arguments);
				this.addSelectCustomerButton();
			},
			unSelectRow: function(id) {
				this.mixins.ConfigurationGridUtilities.unSelectRow.apply(this, arguments);
				this.addSelectCustomerButton();
			},
			addSelectCustomerButton: function() {
				var baseSelector = "#grid-ContactSectionV2DataGridGrid-wrap div.grid-listed-row div:last-child";
				var selector = baseSelector + ">span";
				var scope = this;
				$(selector).unbind();
				$(baseSelector).html(
					Ext.String.format("<span>{0}</span>", this.get("Resources.Strings.SelectCustomerButtonCaption")));
 
				$(selector).addClass("glb-select-customer-button");
 
				$(selector).click(function() {
					var id = "";
					try {
						id = arguments[0].currentTarget.offsetParent.offsetParent.attributes.id.value.split("item-")[1];
					} catch(e) {}
					if (id) {
						scope.onSelectCustomerButtonClick(id);
					} else {
						this.error("Active row id was not found");
					}
				});
			},
			onSelectCustomerButtonClick: function(id) {
				this.showInformationDialog(id);
			}
		}
	};
});

Css module:

.glb-select-customer-button {
	background: #8ecb60;
	color: white;
	padding: 2px 10px;
	border-radius: 3px;
}
 
.glb-select-customer-button:hover {
	background: #74bc48;
	cursor: pointer;
}

Results:

https://prnt.sc/q99evi



Regards,

Dmytro

 

Dmytro Smishchenko,

I added the custom class but all rows has same class.

I need to set separate class for each row

Any help will be highly appreciable.

Hi Dmytro Smishchenko,



I can add button to all the records using jquery as suggested.



Step 1 :

Adding buttons to all the rows/records

Step 2 :

Opening and closing a record. (Ex, consider im opening and closing the first record)

Step 3 :

After closing the record, i could not see the button added in the section list.

NOTE:

i can see that this jquery's button  build is happening on onGridDataLoaded() and render() functions. But when we open a record and closed the record this methods are not triggered and hence the button is not shown.



Can you please give some insight to overcome this!



Thanks in advance!





Regards,

Bhoobalan P.