grid - conditional tmpl rendering

[edchelstephens]

Question:

How to conditionally render a different tmpl based on a property on a row on the data source, i.e. a property of the object?

With code:

let editButton = '<a class="btn btn-primary"  href="#" onclick="editTrainingSession({id})">Edit</a>'
let cancelButton = '<button class="btn btn-secondary" onclick="cancelTrainingSession({id})">Cancel</button>'
let deleteButton = '<button class="btn btn-danger" onclick="deleteTrainingSession({id})">Delete</button>'

How can I do this:

{ title:'Actions', tmpl: object.is_cancelled ? editButton: actionButtons}

That is, I want to hide the Cancel button if the session is already cancelled with the is_cancelled property being true

If the objet is cancelled, tmpl should be just editButton only, if not cancelled then all actionButtons

UI

Code

Grid:

let editButton = '<a class="btn btn-primary"  href="#" onclick="editTrainingSession({id})">Edit</a>'
let cancelButton = '<button class="btn btn-secondary" onclick="cancelTrainingSession({id})">Cancel</button>'
let deleteButton = '<button class="btn btn-danger" onclick="deleteTrainingSession({id})">Delete</button>'

 let actionButtons = `${editButton} ${cancelButton} ${deleteButton}`

var teamTrainingsGrid = $('#teamTrainingsGrid').grid({
      primaryKey: 'id',
      uiLibrary: 'bootstrap4',
      dataSource: 'training_sessions/',
      columns: [
        { title: 'Date', field: 'date' , sortable:false},
        { title: 'Time',  field: 'time' , sortable:true  },
        {title:"Duration", field:"duration", sortable:true},
         { title: 'Name',  field: 'name' , sortable:true  },
        {  title: 'Venue', field: 'venue', renderer:(value) =>value.name, sortable: true },
        {  title: 'Status', field: 'status' , sortable: true },
        {  title: 'Notes', field: 'notes', sortable: true },
        { title:'Actions', tmpl:actionButtons}
      ],
      pager: { limit: 20, sizes: [10, 20, 50, 100] }
    })

Returned data from endpoint:

{
    "total": 5,
    "records": [
        {
            "id": 133,
            "is_cancelled": true,
            "name": "Training Camp",
            "description": "Training Camp",
            "venue": {
                "id": 16,
                "name": "Christopher Camp"
            },
            "time": "03:10 PM - 04:10 PM",
            "date": "June 01, 2022",
            "duration": "1 hour",
            "status": "Cancelled",
            "notes": ""
        },
        {
            "id": 134,
            "is_cancelled": false,
            "name": "Training Camp",
            "description": "Training Camp",
            "venue": {
                "id": 16,
                "name": "Christopher Camp"
            },
            "time": "03:10 PM - 04:10 PM",
            "date": "June 03, 2022",
            "duration": "1 hour",
            "status": "Scheduled",
            "notes": ""
        },

    ]
}

Sofware versions:

• gijgo: 1.9.13 - https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js
• jquery: 3.5.1 - https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
• jquery-ui: 1.12.1 - https://code.jquery.com/ui/1.12.1/jquery-ui.js

Browser:

Google Chrome - Version 102.0.5005.61 (Official Build) (arm64)

Environment

Mac M1 Monterey

Any help is much appreciated,

Thanks!