How can I add a button to the detail list for an active string?

Question

How can I add a button to the detail list for an active string?

Answer

You can implement this as follows:

In the script of a detail, to the diff block, add additional properties to DataGrid (the button name and caption are provided as an example):

{
        "operation": "merge",
        "name": "DataGrid",
        "values": {
                "activeRowAction": {"bindTo": "onActiveRowAction"},
                "activeRowActions": [
                        {
                                "className": "Terrasoft.Button",
                                "style":this.Terrasoft.controls.ButtonEnums.style.BLUE,
                                "markerValue": "myButtonAction",
                                "tag": "myAction",
                                "caption": "MyButton"
                        }
                ]
        }
}

After this, when you highlight the active string in the detail, a blue button with the "MyButton" caption should appear.

You can add several buttons to the activeRowActions array, they all will be displayed in the highllighted string as you can see it work in the section list.

Afterwards, implement the onActiveRowAction method in the methods of the same detail. This method takes the button tag and the key column value of the highlighted string as arguments. If you need to receive any other values of the highlighted string, you can call the this.getActiveRow() method, which returns the whole model of the highlighted string:

methods: {
        onActiveRowAction: function(buttonTag, primaryColumnValue) {
                if (buttonTag === "myAction") {
                        // the whole code below can be removed, it demonstrates that the
                        // primaryColumnValue and activeRowId values are equal
                        var activeRow = this.getActiveRow();
                        var activeRowId = activeRow.get("Id");
                        console.log(primaryColumnValue);
                        console.log(activeRowId);
                        // your implementation follows here
                        ...
                }
        },
        ...
}