Insert column at the first position in grid

[ghost]

I am trying to insert row selection at the first position of grid but it always ends up among hidden columns. I did the same thing with delete button column and it worked just fine.

`protected getColumns(): Slick.Column[] {
var cols = super.getColumns();

        cols.unshift({
            field: 'Delete Row',
            name: '',
            format: ctx => '<a class="inline-action delete-row" title="delete">' +
                '<i class="fa fa-trash-o text-red"></i></a>',
            width: 24,
            minWidth: 24,
            maxWidth: 24,
            visible: true
        });

        cols.unshift(Serenity.GridRowSelectionMixin.createSelectColumn(() => this.rowSelection));

        return cols;`

The problem is not incorrect implementation of selection row. I know that because I tried it with different columns with same results. I also tried to set "visible" to true
Any ideas? Thanks

[ghost]

The problem was that persistence of data was turned on with this function

protected getPersistanceStorage(): Serenity.SettingStorage {
        return new Common.UserPreferenceStorage();
    }

[minhhungit]

This code will make your selection column stay at first position

protected getPersistedSettings() {
    let setting = super.getPersistedSettings();

    let idCol = Q.tryFirst(setting.columns, x => x.id == "__select__");
    if (idCol) {
        setting.columns.splice(setting.columns.indexOf(idCol), 1);
        setting.columns.splice(0, 0, idCol);
    }

    return setting;
}

But make sure that the selection is not in hidden list

[ghost]

thank you

[ghost]

Hey,
The problem is that the column is actually hidden even though I set visible to true. Therefore "setting.columns" don't contain this column. Any idea how to make it visible?
Thanks

[minhhungit]

I updated it, this is full code, let see if it works for you
This code will check and revert selection column even it's hidden

private rowSelection: Serenity.GridRowSelectionMixin;

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

protected createToolbarExtensions() {
    super.createToolbarExtensions();
    this.rowSelection = new Serenity.GridRowSelectionMixin(this);
}

protected getColumns() {
    var columns = super.getColumns();
    columns.splice(0, 0, Serenity.GridRowSelectionMixin.createSelectColumn(() => this.rowSelection));
    return columns;
}

protected getPersistanceStorage(): Serenity.SettingStorage {
    return new Common.UserPreferenceStorage();
}

private selectionColSetting;

protected getCurrentSettings(flag) {
    let setting = super.getCurrentSettings(flag);

    if (setting) {
        this.selectionColSetting = Q.tryFirst(setting.columns || [], x => x.id == "__select__");
    }
	
    return setting;
}

protected getPersistedSettings() {
    let setting = super.getPersistedSettings();

    if (setting) {
        let idCol = Q.tryFirst(setting.columns || [], x => x.id == "__select__");
        if (idCol) {
            setting.columns.splice(setting.columns.indexOf(idCol), 1);
            setting.columns.splice(0, 0, idCol);
        }
        else {
            setting.columns.splice(0, 0, this.selectionColSetting);
        }
    }

    return setting;
}

[luongnv6]

protected getColumns(): Slick.Column[] {
        var cols = super.getColumns();

        cols.splice(0, 0, {
            field: 'Delete Row',
            name: '',
            format: ctx => '<a class="inline-action delete-row" title="delete">' +
                '<i class="fa fa-trash-o text-red"></i></a>',
            width: 24,
            minWidth: 24,
            maxWidth: 24,
            visible: true
        });

        cols.splice(1, 0, Serenity.GridRowSelectionMixin.createSelectColumn(() => this.rowSelection));

        return cols;