Add a custom button in all rows

Hi Gabriel,



Please find the solutions in the below community threads.

https://community.creatio.com/questions/add-button-datagrid-active-row
https://community.creatio.com/articles/add-button-active-row-detail

BR,

Bhoobalan Palanivelu.

Bhoobalan Palanivelu,

Thanks for responding, but I had seen these posts before, and they helped me in parts but not for what I need, the two are for activeRow, that is for when they are selected only, and I need them to appear in all rows even if not selected.

Gabriel Cassimiro,

Thanks for the briefing!

In this case, you need a button as a column in the grid.



ContactSectionV2 Grid

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;
}

Result will be like below,





You need to do the same in your detail schema.





BR,

Bhoobalan Palanivelu.

Bhoobalan Palanivelu,

This is fantastic Bhoobalan, thanks for sharing!

Ryan

Bhoobalan Palanivelu,

Thanks, I have a question, because I'm trying to apply in a list of a detail, but I'm not having the same result for when it is a grid of a section, is there something I have to put different or does it work the same way?

Gabriel Cassimiro,

Please be informed to define the value for this label through the localizable string available on your schema page.

this.get("Resources.Strings.SelectCustomerButtonCaption"))

Also, you can check about the CSS and its dependency included in your schema.

BR,

Bhoobalan Palanivelu.