How to add inline button for each grid rows when click on it , update some field in dialog

[waleed51]

I want to add inline button for each grid rows when click on it , update some field in dialog related to this row.

for example : I have grid contain visits transaction, this grid (like photo) ,

I want when I click on this blue button for any row , then update the field (Time Out) and field (State) for this Row, like when I modify it from dialog panel.

[minhhungit]

You added button, now you need to write code for onClick event

Here I update 2 fields Full & Short of State table using StateService

@Serenity.Decorators.registerClass()
    export class StateGrid extends Serenity.EntityGrid<StateRow, any> {
        protected getColumnsKey() { return 'Default.State'; }
        protected getDialogType() { return StateDialog; }
        protected getIdProperty() { return StateRow.idProperty; }
        protected getLocalTextPrefix() { return StateRow.localTextPrefix; }
        protected getService() { return StateService.baseUrl; }
        protected getInsertPermission() { return StateRow.insertPermission; }

        constructor(container: JQuery) {
            super(container);
        }

        protected getColumns() {
            var columns = super.getColumns();

            columns.unshift({
                field: 'Update Button',
                name: '',
                format: ctx => '<a class="inline-action update-full-and-short" title="delete">' +
                    '<i class="fa fa-edit text-green"></i></a>',
                width: 24,
                minWidth: 24,
                maxWidth: 24
            });

            return columns;
        }

        counter: number = 0; // demo change

        protected onClick(e: JQueryEventObject, row: number, cell: number) {
            super.onClick(e, row, cell);

            if (e.isDefaultPrevented())
                return;

            var item = this.itemAt(row);
            var target = $(e.target);

            // if user clicks "i" element, e.g. icon
            if (target.parent().hasClass('inline-action'))
                target = target.parent();

            if (target.hasClass('inline-action')) {
                e.preventDefault();
                if (target.hasClass('update-full-and-short')) {
                    this.counter++;

                    StateService.Update({
                        EntityId: item.Id,
                        Entity: {
                            Full: item.Full + "_" + this.counter,
                            Short: item.Short + "_" + Math.random()
                        }
                    }, res => {
                            Q.notifySuccess("Updated");
                            this.refresh();
                    })
                }
            }
        }
    }

[waleed51]

i will try it , and thank you @minhhungit

[waleed51]

it's work, thank you very much @minhhungit

[minhhungit]

@waleed51 if it works please mark it as answered !