Add button in extra column to delete record using python/flask + gridsj

[rjsears]

Hello -

I am working on a pretty simple project utilizing python and flask to display a set of events that we need covered for our company. I have got most of it to work including the db lookup, creating new records, updating records by clicking in the cell, etc but I cannot for the life of me figure out a way to add a button to each row to delete the entire record.

I am pretty new to gridjs and spent a bunch of time online and cobbling other code together to make it all work, hopefully someone can point me in the right direction.

All of my data in my column are created on the fly by database lookups, so I am not sure how to go about adding a button to that kind of setup.

In my app:

class Event(db.Model):
    id = db.Column(db.Integer(), primary_key=True)
    aircraft = db.Column(db.VARCHAR(collation='utf8_unicode_ci', length=5))
    training_under_part = db.Column(db.Integer())
    event_type = db.Column(db.VARCHAR(collation='utf8_unicode_ci', length=50))
    event_start_time = db.Column(db.VARCHAR(collation='utf8_unicode_ci', length=10))
    event_date = db.Column(db.VARCHAR(collation='utf8_unicode_ci', length=10))
    client = db.Column(db.VARCHAR(collation='utf8_unicode_ci', length=50))
    notes = db.Column(db.VARCHAR(collation='utf8_unicode_ci', length=50))
    assigned = db.Column(db.Integer())
    instructor_accepted = db.Column(db.VARCHAR(collation='utf8_unicode_ci', length=30))


    def to_dict(self):
        return {
            'id': self.id,
            'aircraft': self.aircraft,
            'training_under_part': self.training_under_part,
            'event_type': self.event_type,
            'event_start_time': self.event_start_time,
            'event_date': self.event_date,
            'client': self.client,
            'notes': self.notes,
            'assigned': self.assigned,
            'instructor_accepted': self.instructor_accepted,
            'delete_link': "<a href='{{{{ url_for('delete_event', id = {}) }}}}'>Delete</a>".format(self.id)
        }


@app.route('/manage_events')
def list_events():
    return render_template('manage_events.html')

in my manage_events.html:

new gridjs.Grid({
        columns: [
          { id: 'id', name: 'Event ID', width: '130px', sort: false},
          { id: 'aircraft', name: 'Aircraft', width: '130px', 'attributes': editableCellAttributes },
          { id: 'training_under_part', name: 'Part', width: '120px', 'attributes': editableCellAttributes },
          { id: 'event_type', name: 'Event Type', sort: false, 'attributes': editableCellAttributes },
          { id: 'event_start_time', name: 'Start Time', sort: false, 'attributes': editableCellAttributes },
          { id: 'event_date', name: 'Event Date', sort: false, 'attributes': editableCellAttributes },
          { id: 'client', name: 'Client', sort: false, 'attributes': editableCellAttributes },
          { id: 'notes', name: 'Notes', sort: false, 'attributes': editableCellAttributes },
          { id: 'assigned', name: 'Assigned', sort: false, 'attributes': editableCellAttributes },
          { id: 'instructor_accepted', name: 'Instructor', sort: false, 'attributes': editableCellAttributes },
          { id: 'delete_link', name: 'Delete', sort: false },
        ],

I did manage to dynamically create the actual flask URL that I need to delete the row, but I cannot figure out how get Grid to show it as an actual URL instead of just string code:

[herbjanes]

Not sure if you figured out the delete yet, but here's how I created a slightly different button (called "Detail")...bolded below.

BTW, I'd be interested in seeing your code for creating the fine looking grid...fonts, row heights, heading bold, etc. thanks.

---

new gridjs.Grid({
columns: [
{ id: 'id', 'hidden': true, sort: false },
{ name: 'More', formatter: (_, row) =>
gridjs.html(<a href="/doc-detail/${row.cells[0].data}" target="_blank">Detail</a>)
},
{ id: 'type', name: 'Type' ,'attributes': editableCellAttributes },
{ id: 'mceecode', name: 'MCEE ID' },
{ id: 'status', name: 'Status','attributes': editableCellAttributes },
{ id: 'mceefiscalyear', name: 'FY', 'attributes': editableCellAttributes},
{ id: 'country', name: 'Cntry' ,'attributes': editableCellAttributes },
{ id: 'grantamount', name: '$$','attributes': editableCellAttributes },
{ id: 'title', name: 'Title','attributes': editableCellAttributes },
{ id: 'mceesponsor', name: 'Sponsor', 'attributes': editableCellAttributes},
{ id: 'modrule', name: 'Mod Rule', 'attributes': editableCellAttributes}
],