Named Actions and Buttons in Data Table - Param/Options Help

Support
1

I have a data table with 5 columns. The 1st and 5th columns are to have buttons in them.

The button for the first column is to perform a path action to go to a detail page for that record. I have previously gotten such an action to work using the actions_onRowClick for the table. However, I cannot do this because each button performs a different function.

The button for the fifth column is supposed to download a file using a link to the file to download. (The file is a .zip compressed archive of images. The type of file should not matter. Or, is this an incorrect assumption?)

Here is how the table is defined, including the options and slots. Note that the buttons for the first and fifth columns are put in place using slots.

{
            "actions_onRowClick": [],
            "columns": ["view", "Report Number", "Test Performed", "Report Date", "dl_img"],
            "model": "reports",
            "options": {
                "columnsClasses": {
                    "Report Date": "col-md-2",
                    "Report Number": "col-md-2",
                    "dl_img": "col-md-2",
                    "view": "col-md-2"
                },
                "headings": {
                    "Report Date": "Date",
                    "Report Number": "Report #",
                    "dl_img": "",
                    "view": ""
                },
                "orderBy": {
                    "column": "Report Number"
                },
                "perPage": "25",
                "perPageValues": [10, 25, 50, 100],
                "preserveState": true,
                "skin": " table table-striped table-hover",
                "sortable": ["Report Number", "Report Date"]
            },
            "slots": [{
                "html": "<button class=\"btn btn-primary btn-trans\" v-on:click=\"namedAction('goToRpt2',{id:this.params.row.id_Report})\" >\nView Details\n</button>",
                "slot": "view"
            }, {
                "html": "<button v-if=\"props.row.Imgs_File_URL\" class=\"btn btn-primary btn-trans\" v-on:click=\"namedAction('showSomeAlert',{row:row})\" >\n<i \n    class=\"fa fa-download\" >\n</i>Download Images\n</button>",
                "slot": "dl_img_BU_2"
            }, {
                "html": "<button v-if=\"props.row.Imgs_File_URL\" class=\"btn btn-primary btn-trans\" v-on:click=\"namedAction('dlImgFile',{thePath:props.row.Imgs_File_URL})\" >\n<i \n    class=\"fa fa-download\" >\n</i>Download Images\n</button>",
                "slot": "dl_img"
            }],
            "styleClasses": "col-md-12",
            "type": "table2"
        }

(The fifth column only displays the Download Images button when the URL for the file to download is in place.)

Here are the namedActions mentioned in the data table schema. These are in the Misc. tab of the page.

"namedActions": {
        "dlImgFile": [{
            "action": "path",
            "options": {}
        }],
        "goToRpt": [{
            "action": "path",
            "options": {
                "path_calc": "'/reportdetail?id=' + action.options.id"
            }
        }],
        "showSomeAlert": [{
            "action": "showAlert",
            "options": {
                "text": "This is an alert!",
                "title": "TWO",
                "type": "information"
            }
        }]
    }

My question is how to reference things like the id_Report in the goToRpt named action?

(Also, the dl_img_BU_2 slot does work when I change its name to match dl_img. It dsplays the button and shows the alert from the showSomeAlert named action when the button is clicked.)

Another question: how do I reference Imgs_File_URL in the dlImgFile named action to download or navigate to that URL?

Please feel free to correct or suggest better techniques for setting this up. Maybe my parameters are incorrect in the named actions? Maybe parameters are incorrect in the named action calls?

Maybe I am missing something simple here.

Your help and suggestions would be great!

Look forward to replies and advice. :slight_smile: